fomantic-ui 2.9.0-beta.317 → 2.9.0-beta.319

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.317+6a18b84",
+  "version": "2.9.0-beta.319+0740de8",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/modules/flyout.js

@@ -23,7 +23,7 @@ window = (typeof window != 'undefined' && window.Math == Math)
     : Function('return this')()
 ;
 
-$.fn.flyout = function(parameters) {
+$.flyout = $.fn.flyout = function(parameters) {
   var
     $allModules     = $(this),
     $window         = $(window),
@@ -68,15 +68,19 @@ $.fn.flyout = function(parameters) {
         moduleNamespace      = 'module-' + namespace,
 
         $module              = $(this),
-        $context             = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $body,
-        $close               = $module.find(selector.close),
+        $context             = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body,
+        $closeIcon           = $module.find(selector.close),
+        $inputs,
+        $focusedElement,
 
         $flyouts             = $module.children(selector.flyout),
         $pusher              = $context.children(selector.pusher),
         $style,
 
+        isFlyoutComponent    = $module.hasClass('flyout'),
+
         element              = this,
-        instance             = $module.hasClass(namespace) ? $module.data(moduleNamespace) : undefined,
+        instance             = isFlyoutComponent ? $module.data(moduleNamespace) : undefined,
 
         ignoreRepeatedEvents = false,
         isBody               = $context[0] === $body[0],
@@ -86,6 +90,7 @@ $.fn.flyout = function(parameters) {
 
         elementNamespace,
         id,
+        observer,
         currentScroll,
         transitionEvent,
 
@@ -97,7 +102,8 @@ $.fn.flyout = function(parameters) {
         initialize: function() {
           module.debug('Initializing flyout', parameters);
 
-          if(!$module.hasClass(namespace)) {
+          module.create.id();
+          if(!isFlyoutComponent) {
             module.create.flyout();
             if(!$.isFunction(settings.onHidden)) {
               settings.onHidden = function () {
@@ -105,6 +111,9 @@ $.fn.flyout = function(parameters) {
                 $module.remove();
               };
             }
+            if(!settings.autoShow) {
+              settings.autoShow = true;
+            }
           }
           $module.addClass(settings.class);
           if (settings.title !== '') {
@@ -122,13 +131,14 @@ $.fn.flyout = function(parameters) {
             }
             settings.actions.forEach(function (el) {
               var
-                icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
+                icon = el[fields.icon] ? '<i '+(el[fields.text] ? 'aria-hidden="true"' : '')+' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
                 text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
                 cls = module.helpers.deQuote(el[fields.class] || ''),
                 click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {}
               ;
               $actions.append($('<button/>', {
                 html: icon + text,
+                'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                 class: className.button + ' ' + cls,
                 click: function () {
                   if (click.call(element, $module) === false) {
@@ -140,8 +150,6 @@ $.fn.flyout = function(parameters) {
             });
           }
 
-          module.create.id();
-
           transitionEvent = module.get.transitionEvent();
 
           // avoids locking rendering if initialized in onReady
@@ -160,6 +168,9 @@ $.fn.flyout = function(parameters) {
             module.setup.heights();
             module.bind.resize();
           }
+          module.refreshInputs();
+          module.bind.events();
+          module.observeChanges();
           module.instantiate();
 
           if(settings.autoShow){
@@ -178,30 +189,37 @@ $.fn.flyout = function(parameters) {
         create: {
           flyout: function() {
             module.verbose('Programmaticaly create flyout', $context);
-            $module = $('<div/>', {class: className.flyout});
+            $module = $('<div/>', {class: className.flyout, role: 'dialog', 'aria-modal': settings.dimPage});
             if (settings.closeIcon) {
-              $close = $('<i/>', {class: className.close})
-              $module.append($close);
+              $closeIcon = $('<i/>', {class: className.close, role: 'button', tabindex: 0, 'aria-label': settings.text.close})
+              $module.append($closeIcon);
             }
             if (settings.title !== '') {
-              $('<div/>', {class: className.header}).appendTo($module);
+              var titleId = '_' + module.get.id() + 'title';
+              $module.attr('aria-labelledby', titleId);
+              $('<div/>', {class: className.header, id: titleId}).appendTo($module);
             }
             if (settings.content !== '') {
-              $('<div/>', {class: className.content}).appendTo($module);
+              var descId = '_' + module.get.id() + 'desc';
+              $module.attr('aria-describedby', descId);
+              $('<div/>', {class: className.content, id: descId}).appendTo($module);
             }
             if (module.has.configActions()) {
               $('<div/>', {class: className.actions}).appendTo($module);
             }
-            $context.append($module);
+            $module.prependTo($context);
           },
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2,8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             elementNamespace = '.' + id;
             module.verbose('Creating unique id for element', id);
           }
         },
 
         destroy: function() {
+          if (observer) {
+            observer.disconnect();
+          }
           module.verbose('Destroying previous module for', $module);
           $module
             .off(eventNamespace)
@@ -210,6 +228,10 @@ $.fn.flyout = function(parameters) {
           if(module.is.ios()) {
             module.remove.ios();
           }
+          $closeIcon.off(elementNamespace);
+          if($inputs) {
+            $inputs.off(elementNamespace);
+          }
           // bound by uuid
           $context.off(elementNamespace);
           $window.off(elementNamespace);
@@ -217,6 +239,21 @@ $.fn.flyout = function(parameters) {
         },
 
         event: {
+          keyboard: function(event) {
+            var
+                keyCode   = event.which
+            ;
+            if(keyCode === settings.keys.escape) {
+              if(settings.closable) {
+                module.debug('Escape key pressed hiding flyout');
+                module.hide();
+              }
+              else {
+                module.debug('Escape key pressed, but closable is set to false');
+              }
+              event.preventDefault();
+            }
+          },
           resize: function() {
             module.setup.heights();
           },
@@ -239,6 +276,34 @@ $.fn.flyout = function(parameters) {
           close: function(event) {
             module.hide();
           },
+          closeKeyUp: function(event){
+            var
+                keyCode   = event.which
+            ;
+            if (keyCode === settings.keys.enter || keyCode === settings.keys.space) {
+              module.hide();
+            }
+          },
+          inputKeyDown: {
+            first: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && event.shiftKey) {
+                $inputs.last().focus();
+                event.preventDefault();
+              }
+            },
+            last: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && !event.shiftKey) {
+                $inputs.first().focus();
+                event.preventDefault();
+              }
+            }
+          },
           approve: function(event) {
             if (ignoreRepeatedEvents || settings.onApprove.call(module.element, $(this)) === false) {
               module.verbose('Approve callback returned false cancelling close');
@@ -282,16 +347,23 @@ $.fn.flyout = function(parameters) {
             module.verbose('Adding resize event to window', $window);
             $window.on('resize' + elementNamespace, module.event.resize);
           },
+          events: function() {
+            module.verbose('Attaching events');
+            $module
+                .on('click' + eventNamespace, selector.close, module.event.close)
+                .on('click' + eventNamespace, selector.approve, module.event.approve)
+                .on('click' + eventNamespace, selector.deny, module.event.deny)
+            ;
+            $closeIcon
+                .on('keyup' + elementNamespace, module.event.closeKeyUp)
+            ;
+          },
           clickaway: function() {
             module.verbose('Adding clickaway events to context', $context);
             $context
               .on('click'    + elementNamespace, module.event.clickaway)
               .on('touchend' + elementNamespace, module.event.clickaway)
             ;
-
-            $module.on('click' + elementNamespace, settings.selector.close, module.event.close);
-            $module.on('click' + elementNamespace, settings.selector.approve, module.event.approve);
-            $module.on('click' + elementNamespace, settings.selector.deny, module.event.deny);
           },
           scrollLock: function() {
             if(settings.scrollLock) {
@@ -378,7 +450,7 @@ $.fn.flyout = function(parameters) {
               if(direction === 'left' || direction === 'right') {
                 module.debug('Adding CSS rules for animation distance', width);
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher::after {'
                   + '   -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + '           transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + ' }'
@@ -386,7 +458,7 @@ $.fn.flyout = function(parameters) {
               }
               else if(direction === 'top' || direction == 'bottom') {
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher::after {'
                   + '   -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + '           transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + ' }'
@@ -394,8 +466,8 @@ $.fn.flyout = function(parameters) {
               }
               /* opposite sides visible forces content overlay */
               style += ''
-                + ' body.pushable > .ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .pusher:after,'
-                + ' body.pushable > .ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .pusher:after {'
+                + ' body.pushable > .ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .pusher::after,'
+                + ' body.pushable > .ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .pusher::after {'
                 + '   -webkit-transform: translate3d(0, 0, 0);'
                 + '           transform: translate3d(0, 0, 0);'
                 + ' }'
@@ -406,13 +478,30 @@ $.fn.flyout = function(parameters) {
               .appendTo($head)
             ;
             module.debug('Adding sizing css to head', $style);
+          },
+          keyboardShortcuts: function() {
+            module.verbose('Adding keyboard shortcuts');
+            $document
+                .on('keydown' + eventNamespace, module.event.keyboard)
+            ;
+          }
+        },
+        observeChanges: function() {
+          if('MutationObserver' in window) {
+            observer = new MutationObserver(function(mutations) {
+              module.refreshInputs();
+            });
+            observer.observe(element, {
+              childList : true,
+              subtree   : true
+            });
+            module.debug('Setting up mutation observer', observer);
           }
         },
-
         refresh: function() {
           module.verbose('Refreshing selector cache');
-          $context  = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
-          $flyouts = $context.children(selector.flyout);
+          $context  = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body;
+          module.refreshFlyouts();
           $pusher   = $context.children(selector.pusher);
           module.clear.cache();
         },
@@ -422,11 +511,24 @@ $.fn.flyout = function(parameters) {
           $flyouts = $context.children(selector.flyout);
         },
 
-        repaint: function() {
-          module.verbose('Forcing repaint event');
-          element.style.display = 'none';
-          element.scrollTop = element.scrollTop;
-          element.style.display = '';
+        refreshInputs: function(){
+          if($inputs){
+            $inputs
+                .off('keydown' + elementNamespace)
+            ;
+          }
+          if(!settings.dimPage){
+            return;
+          }
+          $inputs    = $module.find('[tabindex], :input').filter(':visible').filter(function() {
+            return $(this).closest('.disabled').length === 0;
+          });
+          $inputs.first()
+              .on('keydown' + elementNamespace, module.event.inputKeyDown.first)
+          ;
+          $inputs.last()
+              .on('keydown' + elementNamespace, module.event.inputKeyDown.last)
+          ;
         },
 
         setup: {
@@ -498,7 +600,10 @@ $.fn.flyout = function(parameters) {
             : function(){}
           ;
           if(module.is.hidden()) {
-            module.refreshFlyouts();
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling show');
+              return;
+            }
             module.refresh();
             if(module.othersActive()) {
               module.debug('Other flyouts currently visible');
@@ -508,12 +613,19 @@ $.fn.flyout = function(parameters) {
                 ignoreRepeatedEvents = false;
               }
             }
+            module.set.dimmerStyles();
             module.pushPage(function() {
               callback.call(element);
-              settings.onShow.call(element);
+              settings.onVisible.call(element);
+              if(settings.keyboardShortcuts) {
+                module.add.keyboardShortcuts();
+              }
+              module.save.focus();
+              if(settings.autofocus) {
+                module.set.autofocus();
+              }
             });
             settings.onChange.call(element);
-            settings.onVisible.call(element);
           }
           else {
             module.debug('Flyout is already visible');
@@ -538,6 +650,7 @@ $.fn.flyout = function(parameters) {
               if($.isFunction(settings.onHidden)) {
                 settings.onHidden.call(element);
               }
+              module.restore.focus();
             });
             settings.onChange.call(element);
           }
@@ -591,7 +704,6 @@ $.fn.flyout = function(parameters) {
             : function(){}
           ;
           module.set.overlay();
-          module.repaint();
           if(settings.returnScroll) {
             currentScroll = (isBody ? $window : $context).scrollTop();
           }
@@ -634,18 +746,25 @@ $.fn.flyout = function(parameters) {
           module.unbind.clickaway();
           if(!module.othersActive()) {
             module.unbind.scrollLock();
+            if( settings.keyboardShortcuts ) {
+              module.remove.keyboardShortcuts();
+            }
           }
 
+
           animate = function() {
             module.set.overlay();
             module.set.animating();
+            if(settings.dimPage && !module.othersVisible()) {
+              module.set.closing();
+            }
             module.remove.visible();
-            
           };
           transitionEnd = function(event) {
             if( event.target == $module[0] ) {
               $module.off(transitionEvent + elementNamespace, transitionEnd);
               module.remove.animating();
+              module.remove.closing();
               module.remove.overlay();
               module.remove.inlineCSS();
               if(settings.returnScroll) {
@@ -681,6 +800,25 @@ $.fn.flyout = function(parameters) {
         },
 
         set: {
+          autofocus: function() {
+            var
+                $autofocus = $inputs.filter('[autofocus]'),
+                $input     = ($autofocus.length > 0)
+                    ? $autofocus.first()
+                    : ($inputs.length > 1 ? $inputs.filter(':not(i.close)') : $inputs).first()
+            ;
+            if($input.length > 0) {
+              $input.focus();
+            }
+          },
+          dimmerStyles: function() {
+            if(settings.blurring) {
+              $pusher.addClass(className.blurring);
+            }
+            else {
+              $pusher.removeClass(className.blurring);
+            }
+          },
           bodyMargin: function() {
             var position = module.can.leftBodyScrollbar() ? 'left':'right';
             $context.css((isBody ? 'margin-':'padding-')+position, tempBodyMargin + 'px');
@@ -718,6 +856,9 @@ $.fn.flyout = function(parameters) {
           animating: function() {
             $module.addClass(className.animating);
           },
+          closing: function() {
+            $pusher.addClass(className.closing);
+          },
           direction: function(direction) {
             direction = direction || module.get.direction();
             $module.addClass(className[direction]);
@@ -737,6 +878,12 @@ $.fn.flyout = function(parameters) {
               $style.remove();
             }
           },
+          keyboardShortcuts: function() {
+            module.verbose('Removing keyboard shortcuts');
+            $document
+                .off('keydown' + eventNamespace)
+            ;
+          },
 
           // ios scroll on html not document
           ios: function() {
@@ -758,6 +905,9 @@ $.fn.flyout = function(parameters) {
           animating: function() {
             $module.removeClass(className.animating);
           },
+          closing: function() {
+            $pusher.removeClass(className.closing);
+          },
           direction: function(direction) {
             direction = direction || module.get.direction();
             $module.removeClass(className[direction]);
@@ -771,7 +921,6 @@ $.fn.flyout = function(parameters) {
         },
 
         get: {
-          
           direction: function() {
             if($module.hasClass(className.top)) {
               return className.top;
@@ -801,6 +950,12 @@ $.fn.flyout = function(parameters) {
               }
             }
           },
+          id: function() {
+            return id;
+          },
+          element: function() {
+            return $module;
+          },
           settings: function() {
             return settings;
           }
@@ -816,6 +971,15 @@ $.fn.flyout = function(parameters) {
         },
 
         save: {
+          focus: function() {
+            var
+                $activeElement = $(document.activeElement),
+                inCurrentFlyout = $activeElement.closest($module).length > 0
+            ;
+            if(!inCurrentFlyout) {
+              $focusedElement = $(document.activeElement).blur();
+            }
+          },
           bodyMargin: function() {
             initialBodyMargin = $context.css((isBody ? 'margin-':'padding-')+(module.can.leftBodyScrollbar() ? 'left':'right'));
             var bodyMarginRightPixel = parseInt(initialBodyMargin.replace(/[^\d.]/g, '')),
@@ -911,6 +1075,11 @@ $.fn.flyout = function(parameters) {
         },
 
         restore: {
+          focus: function() {
+            if($focusedElement && $focusedElement.length > 0 && settings.restoreFocus) {
+              $focusedElement.focus();
+            }
+          },
           bodyMargin: function() {
             var position = module.can.leftBodyScrollbar() ? 'left':'right';
             $context.css((isBody ? 'margin-':'padding-')+position, initialBodyMargin);
@@ -946,7 +1115,7 @@ $.fn.flyout = function(parameters) {
                 }
             ;
             if(shouldEscape.test(string)) {
-              string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
+              string = string.replace(/&(?![a-z0-9#]{1,12};)/gi, "&amp;");
               return string.replace(badChars, escapedChar);
             }
             return string;
@@ -1164,12 +1333,16 @@ $.fn.flyout.settings = {
   context      : 'body',
   exclusive    : false,
   closable     : true,
+  autofocus    : true,
+  restoreFocus : true,
   dimPage      : true,
   scrollLock   : false,
   returnScroll : false,
   delaySetup   : false,
   autoShow     : false,
 
+  keyboardShortcuts: true,
+
   //dynamic content
   title        : '',
   content      : '',
@@ -1198,6 +1371,13 @@ $.fn.flyout.settings = {
   onApprove    : function(){},
   onDeny       : function(){},
 
+  keys : {
+    space      : 32,
+    enter      : 13,
+    escape     : 27,
+    tab        :  9,
+  },
+
   className    : {
     flyout     : 'ui flyout',
     close      : 'close icon',
@@ -1206,6 +1386,8 @@ $.fn.flyout.settings = {
     actions    : 'actions',
     active     : 'active',
     animating  : 'animating',
+    blurring   : 'blurring',
+    closing    : 'closing',
     dimmed     : 'dimmed',
     ios        : 'ios',
     locked     : 'locked',
@@ -1254,7 +1436,8 @@ $.fn.flyout.settings = {
 
   text: {
     ok     : 'Ok',
-    cancel : 'Cancel'
+    cancel : 'Cancel',
+    close : 'Close'
   }
 };