Merge pull request #11 from pavlovicnemanja/master

feat(dropdown): Added smart function for dropdown menus

Author: pavlovicnemanja

.gitignore

@@ -1,4 +1,5 @@
 .sass-cache/
 *.css.map
 node_modules/
+dist/
 nbproject/

Gruntfile.js

@@ -46,7 +46,8 @@ module.exports = function (grunt) {
                 files: {
                     'dist/superdesk-ui-framework.js': [
                         'node_modules/angular-ui-bootstrap/ui-bootstrap.min.js',
-                        'app/scripts/index.js'
+                        'app/scripts/index.js',
+                        'app/scripts/dropdown.js'
                     ]
                 }
             }
@@ -75,6 +76,14 @@ module.exports = function (grunt) {
                     livereload: true,
                     spawn: false
                 }
+            },
+            uglify: {
+                files: ['app/scripts/**/*.js'],
+                tasks: ['uglify'],
+                options: {
+                    livereload: true,
+                    spawn: false
+                }
             }
         }
     });

app/scripts/dropdown.js

@@ -0,0 +1,102 @@
+'use strict';
+
+sdDropdown.$inject = ['$window'];
+function sdDropdown($window) {
+    return {
+        link: function (scope, elem) {
+            var menu = elem.children('.dropdown__menu');
+            var button = elem.children('[dropdown__toggle]');
+
+            var settings = {
+                isTopOriented: menu.hasClass('dropdown--dropup'),
+                isRightOriented: menu.hasClass('pull-right'),
+                isInlineOriented: elem.hasClass('dropdown--dropright') ||
+                        elem.hasClass('dropdown--dropleft')
+            };
+
+            function closeToBottom(event) {
+                return event.clientY > $window.innerHeight - (menu.outerHeight() + button.outerHeight());
+            }
+
+            function closeToLeft() {
+                return elem.offset().left < menu.outerWidth();
+            }
+
+            function closeToRight() {
+                return ($window.innerWidth - elem.offset().left) < menu.outerWidth();
+            }
+
+            button.bind('click mouseover', function (event) {
+                // Check if menu is near bottom edge
+                if (closeToBottom(event)) {
+                    elem.addClass('dropdown--dropup');
+                } else if (!settings.isTopOriented) {
+                    elem.removeClass('dropdown--dropup');
+                }
+
+                // Check if menu is near left edge
+                if (closeToLeft()) {
+                    menu.removeClass('pull-right');
+                } else if (settings.isRightOriented) {
+                    menu.addClass('pull-right');
+                }
+
+                // Check if menu is near right edge
+                if (closeToRight()) {
+                    menu.addClass('pull-right');
+                } else if (!settings.isRightOriented) {
+                    menu.removeClass('pull-right');
+                }
+            });
+        }
+    };
+}
+
+sdDropdownAppendToBody.$inject = ['$window'];
+function sdDropdownAppendToBody($window) {
+    return {
+        require: 'dropdown',
+        link: function (scope, elem, attr, ctrl) {
+            var button = elem.find('[dropdown__toggle]');
+
+            function closeToRight(menu) {
+                return ($window.innerWidth - elem.offset().left) < menu.outerWidth();
+            }
+
+            scope.$watch(ctrl.isOpen, function (isOpen) {
+                if (!isOpen)
+                    return false;
+
+                var style = {
+                    display: isOpen ? 'block' : 'none',
+                    top: elem.offset().top + button.outerHeight(),
+                    left: elem.offset().left,
+                    opacity: 1
+                };
+
+                scope.$evalAsync(function () {
+                    ctrl.dropdownMenu.css({opacity: 0});
+                });
+
+                scope.$applyAsync(function () {
+                    // Check if menu is near bottom edge
+                    if (elem.hasClass('dropdown--dropup')) {
+                        style.top = elem.offset().top - button.outerHeight() - ctrl.dropdownMenu.outerHeight();
+                    }
+
+                    // Check if menu is near left edge
+                    if (closeToRight(ctrl.dropdownMenu)) {
+                        style.left = $window.innerWidth - ctrl.dropdownMenu.outerWidth() - 15;
+                    }
+
+                    // Apply modified css to dropdown menu element
+                    ctrl.dropdownMenu.css(style);
+                });
+            });
+        }
+    };
+}
+
+angular.module('superdesk-ui.dropdown', [])
+        .directive('dropdown', sdDropdown)
+        .directive('dropdownAppendToBody', sdDropdownAppendToBody);

app/scripts/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
 angular.module('superdesk-ui', [
-    'ui.bootstrap'
+    'ui.bootstrap',
+    'superdesk-ui.dropdown',
 ]);

app/styles/dropdowns/_basic-dropdown.scss

@@ -121,6 +121,8 @@ $dropdownLinkBackgroundHover:   $sd-hover;
     button {
         width: 100%;
         text-align: left;
+        -webkit-appearance: none;
+        border: 0;
     }
     a, button {
         display: block;