semantic-ui-less - npm Package Compare versions

Comparing version 2.3.3 to 2.4.0

definitions/modules/dimmer.js

@@ -86,3 +86,2 @@ /*!
             }
-            module.set.variation();
           }
@@ -118,6 +117,2 @@ },
           events: function() {
-            if(module.is.page()) {
-              // touch events default to passive, due to changes in chrome to optimize mobile perf
-              $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
-            }
             if(settings.on == 'hover') {
@@ -150,5 +145,2 @@ $dimmable
           events: function() {
-            if(module.is.page()) {
-              $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
-            }
             $module
@@ -171,5 +163,2 @@ .removeData(moduleNamespace)
           },
-          preventScroll: function(event) {
-            event.preventDefault();
-          }
         },
@@ -207,2 +196,3 @@
           module.debug('Showing dimmer', $dimmer, settings);
+          module.set.variation();
           if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
@@ -251,2 +241,10 @@ module.animate.show(callback);
             if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+              if(settings.useFlex) {
+                module.debug('Using flex dimmer');
+                module.remove.legacy();
+              }
+              else {
+                module.debug('Using legacy non-flex dimmer');
+                module.set.legacy();
+              }
               if(settings.opacity !== 'auto') {
@@ -257,3 +255,5 @@ module.set.opacity();
                 .transition({
-                  displayType : 'flex',
+                  displayType : settings.useFlex
+                    ? 'flex'
+                    : 'block',
                   animation   : settings.transition + ' in',
@@ -303,3 +303,5 @@ queue       : false,
                 .transition({
-                  displayType : 'flex',
+                  displayType : settings.useFlex
+                    ? 'flex'
+                    : 'block',
                   animation   : settings.transition + ' out',
@@ -313,2 +315,3 @@ queue       : false,
                   onComplete  : function() {
+                    module.remove.variation();
                     module.remove.active();
@@ -427,2 +430,5 @@ callback();
           },
+          legacy: function() {
+            $dimmer.addClass(className.legacy);
+          },
           active: function() {
@@ -457,2 +463,5 @@ $dimmer.addClass(className.active);
           },
+          legacy: function() {
+            $dimmer.removeClass(className.legacy);
+          },
           dimmed: function() {
@@ -671,2 +680,5 @@ $dimmable.removeClass(className.dimmed);
 
+  // whether should use flex layout
+  useFlex     : true,
+
   // name to distinguish between multiple dimmers in context
@@ -715,2 +727,3 @@ dimmerName  : false,
     hide       : 'hide',
+    legacy     : 'legacy',
     pageDimmer : 'page',
@@ -717,0 +730,0 @@ show       : 'show'

definitions/modules/modal.js

@@ -113,4 +113,3 @@ /*!
                   ? false
-                  : 'top aligned'
-                ,
+                  : 'top aligned',
                 dimmerName : 'modals'
@@ -136,3 +135,3 @@ },
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2,8);
+            id = (Math.random().toString(16) + '000000000').substr(2, 8);
             elementEventNamespace = '.' + id;
@@ -172,2 +171,5 @@ module.verbose('Creating unique id for element', id);
           module.cacheSizes();
+          if(!module.can.useFlex()) {
+            module.set.modalOffset();
+          }
           module.set.screenHeight();
@@ -213,8 +215,18 @@ module.set.type();
             ;
+          },
+          scrollLock: function() {
+            // touch events default to passive, due to changes in chrome to optimize mobile perf
+            $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
           }
         },
 
+        unbind: {
+          scrollLock: function() {
+            $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
+          }
+        },
+
         get: {
           id: function() {
-            return (Math.random().toString(16) + '000000000').substr(2,8);
+            return (Math.random().toString(16) + '000000000').substr(2, 8);
           }
@@ -234,2 +246,5 @@ },
           },
+          preventScroll: function(event) {
+            event.preventDefault();
+          },
           deny: function() {
@@ -312,2 +327,4 @@ if(ignoreRepeatedEvents || settings.onDeny.call(element, $(this)) === false) {
           module.set.dimmerSettings();
+          module.set.dimmerStyles();
+
           module.showModal(callback);
@@ -331,5 +348,12 @@ },
           if( module.is.animating() || !module.is.active() ) {
-
             module.showDimmer();
             module.cacheSizes();
+            if(module.can.useFlex()) {
+              module.remove.legacy();
+            }
+            else {
+              module.set.legacy();
+              module.set.modalOffset();
+              module.debug('Using non-flex legacy modal positioning.');
+            }
             module.set.screenHeight();
@@ -412,2 +436,3 @@ module.set.type();
                     settings.onHidden.call(element);
+                    module.remove.dimmerStyles();
                     module.restore.focus();
@@ -437,2 +462,3 @@ callback();
           if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
+            module.unbind.scrollLock();
             $dimmable.dimmer('hide', function() {
@@ -525,2 +551,5 @@ module.remove.clickaway();
           },
+          legacy: function() {
+            $module.removeClass(className.legacy);
+          },
           clickaway: function() {
@@ -531,2 +560,6 @@ $dimmer
           },
+          dimmerStyles: function() {
+            $dimmer.removeClass(className.inverted);
+            $dimmable.removeClass(className.blurring);
+          },
           bodyStyle: function() {
@@ -560,2 +593,3 @@ if($body.attr('style') === '') {
             scrollHeight = $module.prop('scrollHeight'),
+            modalWidth   = $module.outerWidth(),
             modalHeight  = $module.outerHeight()
@@ -566,2 +600,3 @@ ;
               pageHeight    : $(document).outerHeight(),
+              width         : modalWidth,
               height        : modalHeight + settings.offset,
@@ -580,2 +615,8 @@ scrollHeight  : scrollHeight + settings.offset,
         can: {
+          useFlex: function() {
+            return (settings.useFlex == 'auto')
+              ? settings.detachable && !module.is.ie()
+              : settings.useFlex
+            ;
+          },
           fit: function() {
@@ -602,2 +643,9 @@ var
           },
+          ie: function() {
+            var
+              isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
+              isIE   = ('ActiveXObject' in window)
+            ;
+            return (isIE11 || isIE);
+          },
           animating: function() {
@@ -614,3 +662,3 @@ return $module.transition('is supported')
             // appName for IE11 reports 'Netscape' can no longer use
-            return !(window.ActiveXObject || "ActiveXObject" in window);
+            return !(window.ActiveXObject || 'ActiveXObject' in window);
           }
@@ -647,6 +695,6 @@ },
                 closable   : 'auto',
+                useFlex    : module.can.useFlex(),
                 variation  : settings.centered
                   ? false
-                  : 'top aligned'
-                ,
+                  : 'top aligned',
                 duration   : {
@@ -664,2 +712,7 @@ show     : settings.duration,
               ;
+            }
+            $context.dimmer('setting', dimmerSettings);
+          },
+          dimmerStyles: function() {
+            if(settings.inverted) {
               $dimmer.addClass(className.inverted);
@@ -676,4 +729,18 @@ }
             }
-            $context.dimmer('setting', dimmerSettings);
           },
+          modalOffset: function() {
+            var
+              width = module.cache.width,
+              height = module.cache.height
+            ;
+            $module
+              .css({
+                marginTop: (settings.centered && module.can.fit())
+                  ? -(height / 2)
+                  : 0,
+                marginLeft: -(width / 2)
+              })
+            ;
+            module.verbose('Setting modal offset for legacy mode');
+          },
           screenHeight: function() {
@@ -696,3 +763,7 @@ if( module.can.fit() ) {
             $module.addClass(className.scrolling);
+            module.unbind.scrollLock();
           },
+          legacy: function() {
+            $module.addClass(className.legacy);
+          },
           type: function() {
@@ -703,2 +774,3 @@ if(module.can.fit()) {
                 module.remove.scrolling();
+                module.bind.scrollLock();
               }
@@ -904,2 +976,5 @@ }
 
+  useFlex        : 'auto',
+  offset         : 0,
+
   silent         : false,
@@ -934,3 +1009,2 @@ debug          : false,
   duration   : 500,
-  offset     : 0,
   transition : 'scale',
@@ -975,2 +1049,3 @@
     inverted   : 'inverted',
+    legacy     : 'legacy',
     loading    : 'loading',
@@ -977,0 +1052,0 @@ scrolling  : 'scrolling',

definitions/modules/popup.js

@@ -1015,8 +1015,8 @@ /*!
             }
-            if(settings.on == 'hover' && openedWithTouch) {
+            if(module.is.closable()) {
+              module.bind.clickaway();
+            }
+            else if(settings.on == 'hover' && openedWithTouch) {
               module.bind.touchClose();
             }
-            if(settings.on == 'click' && settings.closable) {
-              module.bind.clickaway();
-            }
           },
@@ -1077,6 +1077,15 @@ closeOnScroll: function() {
             return !module.is.basic() && calculations.target.width <= (settings.arrowPixelsFromEdge * 2);
-          }
+          },
         },
 
         is: {
+          closable: function() {
+            if(settings.closable == 'auto') {
+              if(settings.on == 'hover') {
+                return false;
+              }
+              return true;
+            }
+            return settings.closable;
+          },
           offstage: function(distanceFromBoundary, position) {
@@ -1083,0 +1092,0 @@ var

package.js

@@ -8,3 +8,3 @@ var
   summary : 'Semantic UI - LESS Release of Semantic UI',
-  version : '2.3.3',
+  version : '2.4.0',
   git     : 'git://github.com/Semantic-Org/Semantic-UI-LESS.git',
@@ -11,0 +11,0 @@ });

package.json

 {
   "name": "semantic-ui-less",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "title": "Semantic UI",
@@ -5,0 +5,0 @@ "description": "LESS Only distribution of Semantic UI",

No alert changes

Improved metrics

Total package byte prevSize

4638850

0.27%

Number of package files

407

0.74%

Lines of code

22713

0.51%

No dependency changes