Range slider component

README.md

@@ -2,6 +2,12 @@
 
 # Fomantic UI
 
+
+[![Discord](https://img.shields.io/discord/453127116427493376.svg?label=Discord)](https://discord.gg/YChxjJ3)
+[![npm downloads](https://img.shields.io/npm/dw/fomantic-ui.svg)](https://www.npmjs.com/package/fomantic-ui)
+[![npm version](https://img.shields.io/npm/v/fomantic-ui.svg)](https://www.npmjs.com/package/fomantic-ui)
+[![last commit](https://img.shields.io/github/last-commit/hammy2899/fomantic-ui.svg)](https://github.com/hammy2899/Fomantic-UI/commits/master)
+
 [Fomantic](http://fomantic-ui.com) is a community fork of the popular Semantic-UI framework.
 
 *NOTE:* Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. For more info please read the following issues https://github.com/Semantic-Org/Semantic-UI/issues/6109 https://github.com/Semantic-Org/Semantic-UI/issues/6413

RELEASE-NOTES.md

@@ -6,6 +6,11 @@
 - Calendar Component
 - Range Slider Component
 
+### Version 2.5.0 - DATE, HERE
+
+**Major Enhancements**
+- Added range slider component created by **@tyleryasaka** :level_slider: **Thanks @hammy2899** [#1336](https://github.com/Semantic-Org/Semantic-UI/issues/1336)
+
 ### Version 2.4.4 - July 26, 2018
 
 **Enhancements**

src/definitions/globals/site.js

@@ -447,15 +447,16 @@ $.site.settings = {
     'modal',
     'nag',
     'popup',
+    'range',
     'rating',
     'shape',
     'sidebar',
     'state',
     'sticky',
     'tab',
     'transition',
-    'visit',
-    'visibility'
+    'visibility',
+    'visit'
   ],
 
   siteNamespace   : 'site',

src/definitions/modules/range.js

@@ -0,0 +1,278 @@
+/*!
+ * # Semantic UI - Range
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ( $, window, document, undefined ) {
+
+  "use strict";
+
+  $.fn.range = function(parameters) {
+
+    var
+      $allModules    = $(this),
+
+      offset         = 10,
+
+      query          = arguments[0],
+      methodInvoked  = (typeof query == 'string'),
+      queryArguments = [].slice.call(arguments, 1)
+    ;
+
+    $allModules
+      .each(function() {
+
+        var
+          settings          = ( $.isPlainObject(parameters) )
+            ? $.extend(true, {}, $.fn.range.settings, parameters)
+            : $.extend({}, $.fn.range.settings),
+
+          namespace       = settings.namespace,
+          min             = settings.min,
+          max             = settings.max,
+          step            = settings.step,
+          start           = settings.start,
+          input           = settings.input,
+
+          eventNamespace  = '.' + namespace,
+          moduleNamespace = 'module-' + namespace,
+
+          $module         = $(this),
+
+          element         = this,
+          instance        = $module.data(moduleNamespace),
+
+          inner,
+          thumb,
+          trackLeft,
+          precision,
+
+          module
+        ;
+
+        module = {
+
+          initialize: function() {
+            module.instantiate();
+            module.sanitize();
+          },
+
+          instantiate: function() {
+            instance = module;
+            $module
+              .data(moduleNamespace, module)
+            ;
+            $(element).html("<div class='inner'><div class='track'></div><div class='track-fill'></div><div class='thumb'></div></div>");
+            inner = $(element).children('.inner')[0];
+            thumb = $(element).find('.thumb')[0];
+            trackLeft = $(element).find('.track-fill')[0];
+            // find precision of step, used in calculating the value
+            module.determinePrecision();
+            // set start location
+            module.setValuePosition(settings.start);
+            // event listeners
+            $(element).find('.track, .thumb, .inner').on('mousedown', function(event) {
+              event.stopImmediatePropagation();
+              event.preventDefault();
+              $(this).closest(".range").trigger('mousedown', event);
+            });
+            $(element).find('.track, .thumb, .inner').on('touchstart', function(event) {
+              event.stopImmediatePropagation();
+              event.preventDefault();
+              $(this).closest(".range").trigger('touchstart', event);
+            });
+            $(element).on('mousedown', function(event, originalEvent) {
+              module.rangeMousedown(event, false, originalEvent);
+            });
+            $(element).on('touchstart', function(event, originalEvent) {
+              module.rangeMousedown(event, true, originalEvent);
+            });
+            module.addVisibilityListener(element);
+          },
+
+          sanitize: function() {
+            if (typeof settings.min != 'number') {
+              settings.min = parseInt(settings.min) || 0;
+            }
+            if (typeof settings.max != 'number') {
+              settings.max = parseInt(settings.max) || false;
+            }
+            if (typeof settings.start != 'number') {
+              settings.start = parseInt(settings.start) || 0;
+            }
+          },
+
+          determinePrecision: function() {
+            var split = String(settings.step).split('.');
+            var decimalPlaces;
+            if(split.length == 2) {
+              decimalPlaces = split[1].length;
+            } else {
+              decimalPlaces = 0;
+            }
+            precision = Math.pow(10, decimalPlaces);
+          },
+
+          determineValue: function(startPos, endPos, currentPos) {
+            var ratio = (currentPos - startPos) / (endPos - startPos);
+            var range = settings.max - settings.min;
+            var difference = Math.round(ratio * range / step) * step;
+            // Use precision to avoid ugly Javascript floating point rounding issues
+            // (like 35 * .01 = 0.35000000000000003)
+            difference = Math.round(difference * precision) / precision;
+            return difference + settings.min;
+          },
+
+          determinePosition: function(value) {
+            var ratio = (value - settings.min) / (settings.max - settings.min);
+            return Math.round(ratio * $(inner).width()) + $(trackLeft).position().left - offset;
+          },
+
+          setValue: function(newValue, triggeredByUser) {
+            if(typeof triggeredByUser === 'undefined') {
+              triggeredByUser = true;
+            }
+            if(settings.input) {
+              $(settings.input).val(newValue);
+            }
+            if(settings.onChange) {
+              settings.onChange(newValue, {triggeredByUser: triggeredByUser});
+            }
+          },
+
+          setPosition: function(value) {
+            $(thumb).css({left: String(value) + 'px'});
+            $(trackLeft).css({width: String(value + offset) + 'px'});
+          },
+
+          rangeMousedown: function(mdEvent, isTouch, originalEvent) {
+            if( !$(element).hasClass('disabled') ) {
+              mdEvent.preventDefault();
+              var left = $(inner).offset().left;
+              var right = left + $(inner).width();
+              var pageX;
+              if(isTouch) {
+                pageX = originalEvent.originalEvent.touches[0].pageX;
+              } else {
+                pageX = (typeof mdEvent.pageX != 'undefined') ? mdEvent.pageX : originalEvent.pageX;
+              }
+              var value = module.determineValue(left, right, pageX);
+              if(pageX >= left && pageX <= right) {
+                module.setPosition(pageX - left - offset);
+                module.setValue(value);
+              }
+              var rangeMousemove = function(mmEvent) {
+                mmEvent.preventDefault();
+                if(isTouch) {
+                  pageX = mmEvent.originalEvent.touches[0].pageX;
+                } else {
+                  pageX = mmEvent.pageX;
+                }
+                value = module.determineValue(left, right, pageX);
+                if(pageX >= left && pageX <= right) {
+                  if(value >= settings.min && value <= settings.max) {
+                    module.setPosition(pageX - left - offset);
+                    module.setValue(value);
+                  }
+                }
+              }
+              var rangeMouseup = function(muEvent) {
+                if(isTouch) {
+                  $(document).off('touchmove', rangeMousemove);
+                  $(document).off('touchend', rangeMouseup);
+                } else {
+                  $(document).off('mousemove', rangeMousemove);
+                  $(document).off('mouseup', rangeMouseup);
+                }
+              }
+              if(isTouch) {
+                $(document).on('touchmove', rangeMousemove);
+                $(document).on('touchend', rangeMouseup);
+              }
+              else {
+                $(document).on('mousemove', rangeMousemove);
+                $(document).on('mouseup', rangeMouseup);
+              }
+            }
+          },
+
+          setValuePosition: function(val, triggeredByUser) {
+            if(typeof triggeredByUser === 'undefined') {
+              triggeredByUser = true;
+            }
+            var position = module.determinePosition(val);
+            module.setPosition(position);
+            module.setValue(val, triggeredByUser);
+          },
+
+          invoke: function(query) {
+            switch(query) {
+              case 'set value':
+                if(queryArguments.length > 0) {
+                  instance.setValuePosition(queryArguments[0], false);
+                }
+                break;
+            }
+          },
+
+          addVisibilityListener: function(elem) {
+
+            // Add a mutation observer (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+            // to detect when root invisible element is behing shown in order to initialize the thumb correctly
+            // when position and offets are available (https://stackoverflow.com/a/5974377)
+
+            var observer = new MutationObserver(function(mutationList) {
+              if ($(elem).is(':visible')) {
+                observer.disconnect(); // Avoid infinite recursion because « module.setValuePosition » will trigger this observer
+                module.setValuePosition(settings.start);
+              }
+            });
+
+            var closestHiddenParent = $(elem).parentsUntil(':visible');
+
+            if (closestHiddenParent.length != 0) {
+              observer.observe(closestHiddenParent[closestHiddenParent.length - 1], {attributes: true});
+            }
+          },
+
+        };
+
+        if(methodInvoked) {
+          if(instance === undefined) {
+            module.initialize();
+          }
+          module.invoke(query);
+        }
+        else {
+          module.initialize();
+        }
+
+      })
+    ;
+
+    return this;
+
+  };
+
+  $.fn.range.settings = {
+
+    name         : 'Range',
+    namespace    : 'range',
+
+    min          : 0,
+    max          : false,
+    step         : 1,
+    start        : 0,
+    input        : false,
+
+    onChange     : function(value){},
+
+  };
+
+
+})( jQuery, window, document );