Skip to content

Commit 046235b

Browse files
msarshamsarsha
committed
added options object. support rtl
1 parent ccff7e1 commit 046235b

File tree

9 files changed

+286
-29
lines changed

9 files changed

+286
-29
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎dist/bundle.js

Lines changed: 54 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,31 @@
22
'use strict';
33
// For more information about browser field, check out the browser field at https://github.com/substack/browserify-handbook#browser-field.
44

5+
var styleElementsInsertedAtTop = [];
6+
7+
var insertStyleElement = function(styleElement, options) {
8+
var head = document.head || document.getElementsByTagName('head')[0];
9+
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
10+
11+
options = options || {};
12+
options.insertAt = options.insertAt || 'bottom';
13+
14+
if (options.insertAt === 'top') {
15+
if (!lastStyleElementInsertedAtTop) {
16+
head.insertBefore(styleElement, head.firstChild);
17+
} else if (lastStyleElementInsertedAtTop.nextSibling) {
18+
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
19+
} else {
20+
head.appendChild(styleElement);
21+
}
22+
styleElementsInsertedAtTop.push(styleElement);
23+
} else if (options.insertAt === 'bottom') {
24+
head.appendChild(styleElement);
25+
} else {
26+
throw new Error('Invalid value for parameter \'insertAt\'. Must be \'top\' or \'bottom\'.');
27+
}
28+
};
29+
530
module.exports = {
631
// Create a <link> tag with optional data attributes
732
createLink: function(href, attributes) {
@@ -22,10 +47,10 @@ module.exports = {
2247
head.appendChild(link);
2348
},
2449
// Create a <style> tag with optional data attributes
25-
createStyle: function(cssText, attributes) {
26-
var head = document.head || document.getElementsByTagName('head')[0],
27-
style = document.createElement('style');
50+
createStyle: function(cssText, attributes, extraOptions) {
51+
extraOptions = extraOptions || {};
2852

53+
var style = document.createElement('style');
2954
style.type = 'text/css';
3055

3156
for (var key in attributes) {
@@ -35,17 +60,17 @@ module.exports = {
3560
var value = attributes[key];
3661
style.setAttribute('data-' + key, value);
3762
}
38-
63+
3964
if (style.sheet) { // for jsdom and IE9+
4065
style.innerHTML = cssText;
4166
style.sheet.cssText = cssText;
42-
head.appendChild(style);
67+
insertStyleElement(style, { insertAt: extraOptions.insertAt });
4368
} else if (style.styleSheet) { // for IE8 and below
44-
head.appendChild(style);
69+
insertStyleElement(style, { insertAt: extraOptions.insertAt });
4570
style.styleSheet.cssText = cssText;
4671
} else { // for Chrome, Firefox, and Safari
4772
style.appendChild(document.createTextNode(cssText));
48-
head.appendChild(style);
73+
insertStyleElement(style, { insertAt: extraOptions.insertAt });
4974
}
5075
}
5176
};
@@ -57,7 +82,8 @@ angular
5782
bindings: {
5883
menuOptions: '<',
5984
data: '<',
60-
closeMenu: '&'
85+
closeMenu: '&',
86+
options: '<'
6187
},
6288
templateUrl: 'src/component/menu.html',
6389
controller: function () {
@@ -80,7 +106,7 @@ angular
80106
}
81107
})
82108
},{}],3:[function(require,module,exports){
83-
var css = ".sh_menu_container {\n position: fixed;\n height: auto;\n background: #ececec;\n z-index: 90001;\n min-width: 150px;\n border: 0.5px solid rgba(0,0,0,0.2);\n border-radius: 2.5px;\n box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1);\n}\n.sh_menu_container ul {\n list-style: none;\n padding: 5px 0;\n margin: 0;\n}\n.sh_menu_container ul li {\n padding-right: 10px;\n padding-left: 15px;\n padding-bottom: 5px;\n padding-top: 5px;\n transition: all 0.15s;\n}\n.sh_menu_container ul li.sh_menu_item:hover {\n cursor: pointer;\n background: #4b8bec;\n color: white;\n}\n.sh_context_mask {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 90000;\n}\n.sh_menu_divider {\n height: 1px;\n margin: 1px 1px 8px 1px;\n overflow: hidden;\n background-color: #ececec;\n border-bottom: 1px solid #d0d0d0;\n line-height: 10px;\n}\n.sh_menu_container ul li.sh_menu_disabled {\n color: #d0d0d0;\n}\n.sh_menu_container ul li.sh_menu_disabled:hover {\n cursor: not-allowed;\n color: #d0d0d0;\n background: #ececec;\n}\n"; (require("browserify-css").createStyle(css, { "href": "src/component/menu.css"})); module.exports = css;
109+
var css = ".sh_menu_container {\n position: fixed;\n height: auto;\n background: #ececec;\n z-index: 90001;\n min-width: 150px;\n border: 0.5px solid rgba(0,0,0,0.2);\n border-radius: 2.5px;\n box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1);\n}\n.sh_menu_container ul {\n list-style: none;\n padding: 5px 0;\n margin: 0;\n}\n.sh_menu_container ul.sh_menu_rtl {\n direction: rtl;\n}\n.sh_menu_container ul li {\n padding-right: 10px;\n padding-left: 15px;\n padding-bottom: 5px;\n padding-top: 5px;\n transition: all 0.15s;\n}\n.sh_menu_container ul li.sh_menu_item:hover {\n cursor: pointer;\n background: #4b8bec;\n color: white;\n}\n.sh_context_mask {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 90000;\n}\n.sh_menu_divider {\n height: 1px;\n margin: 1px 1px 8px 1px;\n overflow: hidden;\n background-color: #ececec;\n border-bottom: 1px solid #d0d0d0;\n line-height: 10px;\n}\n.sh_menu_container ul li.sh_menu_disabled {\n color: #d0d0d0;\n}\n.sh_menu_container ul li.sh_menu_disabled:hover {\n cursor: not-allowed;\n color: #d0d0d0;\n background: #ececec;\n}\n"; (require("browserify-css").createStyle(css, { "href": "src/component/menu.css" }, { "insertAt": "bottom" })); module.exports = css;
84110
},{"browserify-css":1}],4:[function(require,module,exports){
85111
require('./component/menu.component.js');
86112
require('./component/menu.css');
@@ -96,7 +122,8 @@ angular
96122
return {
97123
scope: {
98124
menuOptions: '<',
99-
contextData: '<'
125+
contextData: '<',
126+
options: '<'
100127
},
101128
bindToController: true,
102129
controllerAs: '$ctrl',
@@ -105,30 +132,42 @@ angular
105132
var menuElement,
106133
maskElement;
107134

135+
var defaultOptions = {
136+
rtl: false
137+
}
138+
108139
ctrl.destroyElements = function () {
109140
destroyElements();
110141
}
111142

143+
ctrl.options = ctrl.options || defaultOptions;
144+
112145
element.on('contextmenu', function (event) {
113146
event.preventDefault();
114147
var body = angular.element(document.body);
115148

116149
menuElement = buildMenuElement();
117150
maskElement = buildMaskElement();
118151

119-
setMenuPosition(menuElement, event);
120-
121152
body.append(menuElement);
122153
body.append(maskElement);
154+
155+
setMenuPosition(menuElement, event, ctrl.options);
123156
});
124157

125-
function setMenuPosition(menuElement, event) {
158+
function setMenuPosition(menuElement, event, options) {
159+
var elmWidth = menuElement[0].offsetWidth;
160+
var clientX = event.clientX;
161+
162+
if(options.rtl)
163+
clientX = clientX - elmWidth;
164+
126165
menuElement[0].style.top = event.clientY + "px";
127-
menuElement[0].style.left = event.clientX + "px";
166+
menuElement[0].style.left = clientX + "px";
128167
}
129168

130169
function buildMenuElement() {
131-
var $elm = angular.element('<context-menu close-menu="$ctrl.destroyElements()" menu-options="$ctrl.menuOptions" data="$ctrl.contextData" class="sh_menu_container"></context-menu>');
170+
var $elm = angular.element('<context-menu options="$ctrl.options" close-menu="$ctrl.destroyElements()" menu-options="$ctrl.menuOptions" data="$ctrl.contextData" class="sh_menu_container"></context-menu>');
132171
var linkFun = $compile($elm);
133172
var content = linkFun($scope);
134173

‎dist/sarsha.contextmenu.js

Lines changed: 195 additions & 1 deletion
Large diffs are not rendered by default.

‎dist/templates.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,16 @@ gulp.task('browserify', function () {
2020
.pipe(gulp.dest('./dist/'))
2121
});
2222

23-
gulp.task('build-js', ['browserify', 'templatecache'], function () {
23+
gulp.task('clean', function(){
24+
return gulp.src('dist/sarsha.contextmenu.js')
25+
.pipe(clean());
26+
})
27+
28+
gulp.task('build-js', ['clean', 'browserify', 'templatecache'], function () {
2429
return gulp
2530
.src('./dist/*.js')
2631
.pipe(concat('sarsha.contextmenu.js'))
27-
.pipe(uglify())
32+
// .pipe(uglify())
2833
.pipe(gulp.dest('./dist/'));
2934
})
3035

‎src/component/menu.component.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ angular
44
bindings: {
55
menuOptions: '<',
66
data: '<',
7-
closeMenu: '&'
7+
closeMenu: '&',
8+
options: '<'
89
},
910
templateUrl: 'src/component/menu.html',
1011
controller: function () {

‎src/component/menu.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
margin: 0;
1616
}
1717

18+
.sh_menu_container ul.sh_menu_rtl{
19+
direction: rtl;
20+
}
21+
1822
.sh_menu_container ul li{
1923
padding-right: 10px;
2024
padding-left: 15px;
@@ -55,4 +59,5 @@
5559
cursor: not-allowed;
5660
color: #d0d0d0;
5761
background: #ececec;
58-
}
62+
}
63+

‎src/component/menu.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<ul>
2-
<li ng-repeat="option in $ctrl.menuOptions" ng-class="{sh_menu_item: !option.divider, sh_menu_divider: option.divider, sh_menu_disabled: $ctrl.isOptionDisabled(option)}">
1+
<ul ng-class="{sh_menu_rtl: $ctrl.options.rtl}">
2+
<li ng-style="" ng-repeat="option in $ctrl.menuOptions" ng-class="{sh_menu_item: !option.divider, sh_menu_divider: option.divider, sh_menu_disabled: $ctrl.isOptionDisabled(option)}">
33
<div ng-click="$ctrl.onClick($event, option)" ng-if="!option.divider">
44
{{option.label}}
55
</div>

‎src/index.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ angular
1212
return {
1313
scope: {
1414
menuOptions: '<',
15-
contextData: '<'
15+
contextData: '<',
16+
options: '<'
1617
},
1718
bindToController: true,
1819
controllerAs: '$ctrl',
@@ -21,30 +22,42 @@ angular
2122
var menuElement,
2223
maskElement;
2324

25+
var defaultOptions = {
26+
rtl: false
27+
}
28+
2429
ctrl.destroyElements = function () {
2530
destroyElements();
2631
}
2732

33+
ctrl.options = ctrl.options || defaultOptions;
34+
2835
element.on('contextmenu', function (event) {
2936
event.preventDefault();
3037
var body = angular.element(document.body);
3138

3239
menuElement = buildMenuElement();
3340
maskElement = buildMaskElement();
3441

35-
setMenuPosition(menuElement, event);
36-
3742
body.append(menuElement);
3843
body.append(maskElement);
44+
45+
setMenuPosition(menuElement, event, ctrl.options);
3946
});
4047

41-
function setMenuPosition(menuElement, event) {
48+
function setMenuPosition(menuElement, event, options) {
49+
var elmWidth = menuElement[0].offsetWidth;
50+
var clientX = event.clientX;
51+
52+
if(options.rtl)
53+
clientX = clientX - elmWidth;
54+
4255
menuElement[0].style.top = event.clientY + "px";
43-
menuElement[0].style.left = event.clientX + "px";
56+
menuElement[0].style.left = clientX + "px";
4457
}
4558

4659
function buildMenuElement() {
47-
var $elm = angular.element('<context-menu close-menu="$ctrl.destroyElements()" menu-options="$ctrl.menuOptions" data="$ctrl.contextData" class="sh_menu_container"></context-menu>');
60+
var $elm = angular.element('<context-menu options="$ctrl.options" close-menu="$ctrl.destroyElements()" menu-options="$ctrl.menuOptions" data="$ctrl.contextData" class="sh_menu_container"></context-menu>');
4861
var linkFun = $compile($elm);
4962
var content = linkFun($scope);
5063

0 commit comments

Comments
 (0)