pips_slider_rails 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ab8cf1f5af113a9b939590839e13a211369d4c91
+  data.tar.gz: ffecaedc7c8d1ab3b6ceb64d7a22bac9b6f29d37
+SHA512:
+  metadata.gz: 50378ab11a6930e8b6246f5d038ceaef22cbcab7f7b4028edbe2c761f083b7326969042856a8a166304c15a7389cd9ebb994d02b3cac0de468c1f87067e08e40
+  data.tar.gz: 8958049011562ebdea501cfd3b5c5bb89a06fd0d1d56e38d726db25ec344301f8ab8e6e40ee73e1b11656e53e78d1ca0820253ebd0b9caf2e539d7f3bdcff5aa

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 stanislav nosovskyi
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,16 @@
+= PipsSliderRails
+
+Gem created for easy installation pips-slider
+
+http://simeydotme.github.io/jQuery-ui-Slider-Pips/
+
+
+*Install - add to*
+
+js assets
+ //= require jquery-ui-slider-pips
+
+stylesheet assets
+ *= require jquery-ui-slider-pips
+
+

data/Rakefile

@@ -0,0 +1,34 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'PipsSlider'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/jquery-ui-slider-pips.js

@@ -0,0 +1,812 @@
+/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
+ * Copyright (c) 2016 Simon Goellner <simey.me@gmail.com>; Licensed MIT */
+
+(function($) {
+
+    "use strict";
+
+    var extensionMethods = {
+
+
+
+
+
+        // pips
+
+        pips: function( settings ) {
+
+            var slider = this,
+                i, j, p,
+                collection = "",
+                mousedownHandlers,
+                min = slider._valueMin(),
+                max = slider._valueMax(),
+                pips = ( max - min ) / slider.options.step,
+                $handles = slider.element.find(".ui-slider-handle"),
+                $pips;
+
+            var options = {
+
+                first: "label",
+                /* "label", "pip", false */
+
+                last: "label",
+                /* "label", "pip", false */
+
+                rest: "pip",
+                /* "label", "pip", false */
+
+                labels: false,
+                /* [array], { first: "string", rest: [array], last: "string" }, false */
+
+                prefix: "",
+                /* "", string */
+
+                suffix: "",
+                /* "", string */
+
+                step: ( pips > 100 ) ? Math.floor( pips * 0.05 ) : 1,
+                /* number */
+
+                formatLabel: function(value) {
+                    return this.prefix + value + this.suffix;
+                }
+                /* function
+                 must return a value to display in the pip labels */
+
+            };
+
+            if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
+
+                $.extend( options, settings );
+                slider.element.data("pips-options", options );
+
+            } else {
+
+                if ( settings === "destroy" ) {
+
+                    destroy();
+
+                } else if ( settings === "refresh" ) {
+
+                    slider.element.slider( "pips", slider.element.data("pips-options") );
+
+                }
+
+                return;
+
+            }
+
+
+            // we don't want the step ever to be a floating point or negative
+            // (or 0 actually, so we'll set it to 1 in that case).
+            slider.options.pipStep = Math.abs( Math.round( options.step ) ) || 1;
+
+            // get rid of all pips that might already exist.
+            slider.element
+                .off( ".selectPip" )
+                .addClass("ui-slider-pips")
+                .find(".ui-slider-pip")
+                .remove();
+
+            // small object with functions for marking pips as selected.
+
+            var selectPip = {
+
+                single: function(value) {
+
+                    this.resetClasses();
+
+                    $pips
+                        .filter(".ui-slider-pip-" + this.classLabel(value) )
+                        .addClass("ui-slider-pip-selected");
+
+                    if ( slider.options.range ) {
+
+                        $pips.each(function(k, v) {
+
+                            var pipVal = $(v).children(".ui-slider-label").data("value");
+
+                            if (( slider.options.range === "min" && pipVal < value ) ||
+                                ( slider.options.range === "max" && pipVal > value )) {
+
+                                $(v).addClass("ui-slider-pip-inrange");
+
+                            }
+
+                        });
+
+                    }
+
+                },
+
+                range: function(values) {
+
+                    this.resetClasses();
+
+                    for ( i = 0; i < values.length; i++ ) {
+
+                        $pips
+                            .filter(".ui-slider-pip-" + this.classLabel(values[i]) )
+                            .addClass("ui-slider-pip-selected-" + ( i + 1 ) );
+
+                    }
+
+                    if ( slider.options.range ) {
+
+                        $pips.each(function(k, v) {
+
+                            var pipVal = $(v).children(".ui-slider-label").data("value");
+
+                            if ( pipVal > values[0] && pipVal < values[1] ) {
+
+                                $(v).addClass("ui-slider-pip-inrange");
+
+                            }
+
+                        });
+
+                    }
+
+                },
+
+                classLabel: function(value) {
+
+                    return value.toString().replace(".", "-");
+
+                },
+
+                resetClasses: function() {
+
+                    var regex = /(^|\s*)(ui-slider-pip-selected|ui-slider-pip-inrange)(-{1,2}\d+|\s|$)/gi;
+
+                    $pips.removeClass( function(index, css) {
+                        return ( css.match(regex) || [] ).join(" ");
+                    });
+
+                }
+
+            };
+
+            function getClosestHandle( val ) {
+
+                var h, k,
+                    sliderVals,
+                    comparedVals,
+                    closestVal,
+                    tempHandles = [],
+                    closestHandle = 0;
+
+                if ( slider.values() && slider.values().length ) {
+
+                    // get the current values of the slider handles
+                    sliderVals = slider.values();
+
+                    // find the offset value from the `val` for each
+                    // handle, and store it in a new array
+                    comparedVals = $.map( sliderVals, function(v) {
+                        return Math.abs( v - val );
+                    });
+
+                    // figure out the closest handles to the value
+                    closestVal = Math.min.apply( Math, comparedVals );
+
+                    // if a comparedVal is the closestVal, then
+                    // set the value accordingly, and set the closest handle.
+                    for ( h = 0; h < comparedVals.length; h++ ) {
+                        if ( comparedVals[h] === closestVal ) {
+                            tempHandles.push(h);
+                        }
+                    }
+
+                    // set the closest handle to the first handle in array,
+                    // just incase we have no _lastChangedValue to compare to.
+                    closestHandle = tempHandles[0];
+
+                    // now we want to find out if any of the closest handles were
+                    // the last changed handle, if so we specify that handle to change
+                    for ( k = 0; k < tempHandles.length; k++ ) {
+                        if ( slider._lastChangedValue === tempHandles[k] ) {
+                            closestHandle = tempHandles[k];
+                        }
+                    }
+
+                    if ( slider.options.range && tempHandles.length === 2 ) {
+
+                        if ( val > sliderVals[1] ) {
+
+                            closestHandle = tempHandles[1];
+
+                        } else if ( val < sliderVals[0] ) {
+
+                            closestHandle = tempHandles[0];
+
+                        }
+
+                    }
+
+                }
+
+                return closestHandle;
+
+            }
+
+            function destroy() {
+
+                slider.element
+                    .off(".selectPip")
+                    .on("mousedown.slider", slider.element.data("mousedown-original") )
+                    .removeClass("ui-slider-pips")
+                    .find(".ui-slider-pip")
+                    .remove();
+
+            }
+
+            // when we click on a label, we want to make sure the
+            // slider's handle actually goes to that label!
+            // so we check all the handles and see which one is closest
+            // to the label we clicked. If 2 handles are equidistant then
+            // we move both of them. We also want to trigger focus on the
+            // handle.
+
+            // without this method the label is just treated like a part
+            // of the slider and there's no accuracy in the selected value
+
+            function labelClick( label, e ) {
+
+                if (slider.option("disabled")) {
+                    return;
+                }
+
+                var val = $(label).data("value"),
+                    indexToChange = getClosestHandle( val );
+
+                if ( slider.values() && slider.values().length ) {
+
+                    slider.options.values[ indexToChange ] = slider._trimAlignValue( val );
+
+                } else {
+
+                    slider.options.value = slider._trimAlignValue( val );
+
+                }
+
+                slider._refreshValue();
+                slider._change( e, indexToChange );
+
+            }
+
+            // method for creating a pip. We loop this for creating all
+            // the pips.
+
+            function createPip( which ) {
+
+                var label,
+                    percent,
+                    number = which,
+                    classes = "ui-slider-pip",
+                    css = "",
+                    value = slider.value(),
+                    values = slider.values(),
+                    labelValue,
+                    classLabel,
+                    labelIndex;
+
+                if ( which === "first" ) {
+
+                    number = 0;
+
+                } else if ( which === "last" ) {
+
+                    number = pips;
+
+                }
+
+                // labelValue is the actual value of the pip based on the min/step
+                labelValue = min + ( slider.options.step * number );
+
+                // classLabel replaces any decimals with hyphens
+                classLabel = labelValue.toString().replace(".", "-");
+
+                // get the index needed for selecting labels out of the array
+                labelIndex = ( number + min ) - min;
+
+                // we need to set the human-readable label to either the
+                // corresponding element in the array, or the appropriate
+                // item in the object... or an empty string.
+
+                if ( $.type(options.labels) === "array" ) {
+
+                    label = options.labels[ labelIndex ] || "";
+
+                } else if ( $.type( options.labels ) === "object" ) {
+
+                    if ( which === "first" ) {
+
+                        // set first label
+                        label = options.labels.first || "";
+
+                    } else if ( which === "last" ) {
+
+                        // set last label
+                        label = options.labels.last || "";
+
+                    } else if ( $.type( options.labels.rest ) === "array" ) {
+
+                        // set other labels, but our index should start at -1
+                        // because of the first pip.
+                        label = options.labels.rest[ labelIndex - 1 ] || "";
+
+                    } else {
+
+                        // urrggh, the options must be f**ked, just show nothing.
+                        label = labelValue;
+
+                    }
+
+                } else {
+
+                    label = labelValue;
+
+                }
+
+
+
+
+                if ( which === "first" ) {
+
+                    // first Pip on the Slider
+                    percent = "0%";
+
+                    classes += " ui-slider-pip-first";
+                    classes += ( options.first === "label" ) ? " ui-slider-pip-label" : "";
+                    classes += ( options.first === false ) ? " ui-slider-pip-hide" : "";
+
+                } else if ( which === "last" ) {
+
+                    // last Pip on the Slider
+                    percent = "100%";
+
+                    classes += " ui-slider-pip-last";
+                    classes += ( options.last === "label" ) ? " ui-slider-pip-label" : "";
+                    classes += ( options.last === false ) ? " ui-slider-pip-hide" : "";
+
+                } else {
+
+                    // all other Pips
+                    percent = (( 100 / pips ) * which ).toFixed(4) + "%";
+
+                    classes += ( options.rest === "label" ) ? " ui-slider-pip-label" : "";
+                    classes += ( options.rest === false ) ? " ui-slider-pip-hide" : "";
+
+                }
+
+                classes += " ui-slider-pip-" + classLabel;
+
+
+                // add classes for the initial-selected values.
+                if ( values && values.length ) {
+
+                    for ( i = 0; i < values.length; i++ ) {
+
+                        if ( labelValue === values[i] ) {
+
+                            classes += " ui-slider-pip-initial-" + ( i + 1 );
+                            classes += " ui-slider-pip-selected-" + ( i + 1 );
+
+                        }
+
+                    }
+
+                    if ( slider.options.range ) {
+
+                        if ( labelValue > values[0] &&
+                            labelValue < values[1] ) {
+
+                            classes += " ui-slider-pip-inrange";
+
+                        }
+
+                    }
+
+                } else {
+
+                    if ( labelValue === value ) {
+
+                        classes += " ui-slider-pip-initial";
+                        classes += " ui-slider-pip-selected";
+
+                    }
+
+                    if ( slider.options.range ) {
+
+                        if (( slider.options.range === "min" && labelValue < value ) ||
+                            ( slider.options.range === "max" && labelValue > value )) {
+
+                            classes += " ui-slider-pip-inrange";
+
+                        }
+
+                    }
+
+                }
+
+
+
+                css = ( slider.options.orientation === "horizontal" ) ?
+                    "left: " + percent :
+                    "bottom: " + percent;
+
+
+                // add this current pip to the collection
+                return "<span class=\"" + classes + "\" style=\"" + css + "\">" +
+                    "<span class=\"ui-slider-line\"></span>" +
+                    "<span class=\"ui-slider-label\" data-value=\"" +
+                    labelValue + "\">" + options.formatLabel(label) + "</span>" +
+                    "</span>";
+
+            }
+
+            // create our first pip
+            collection += createPip("first");
+
+            // for every stop in the slider where we need a pip; create one.
+            for ( p = slider.options.pipStep; p < pips; p += slider.options.pipStep ) {
+                collection += createPip( p );
+            }
+
+            // create our last pip
+            collection += createPip("last");
+
+            // append the collection of pips.
+            slider.element.append( collection );
+
+            // store the pips for setting classes later.
+            $pips = slider.element.find(".ui-slider-pip");
+
+
+
+            // store the mousedown handlers for later, just in case we reset
+            // the slider, the handler would be lost!
+
+            if ( $._data( slider.element.get(0), "events").mousedown &&
+                $._data( slider.element.get(0), "events").mousedown.length ) {
+
+                mousedownHandlers = $._data( slider.element.get(0), "events").mousedown;
+
+            } else {
+
+                mousedownHandlers = slider.element.data("mousedown-handlers");
+
+            }
+
+            slider.element.data("mousedown-handlers", mousedownHandlers.slice() );
+
+            // loop through all the mousedown handlers on the slider,
+            // and store the original namespaced (.slider) event handler so
+            // we can trigger it later.
+            for ( j = 0; j < mousedownHandlers.length; j++ ) {
+                if ( mousedownHandlers[j].namespace === "slider" ) {
+                    slider.element.data("mousedown-original", mousedownHandlers[j].handler );
+                }
+            }
+
+            // unbind the mousedown.slider event, because it interferes with
+            // the labelClick() method (stops smooth animation), and decide
+            // if we want to trigger the original event based on which element
+            // was clicked.
+            slider.element
+                .off("mousedown.slider")
+                .on("mousedown.selectPip", function(e) {
+
+                    var $target = $(e.target),
+                        closest = getClosestHandle( $target.data("value") ),
+                        $handle = $handles.eq( closest );
+
+                    $handle.addClass("ui-state-active");
+
+                    if ( $target.is(".ui-slider-label") ) {
+
+                        labelClick( $target, e );
+
+                        slider.element
+                            .one("mouseup.selectPip", function() {
+
+                                $handle
+                                    .removeClass("ui-state-active")
+                                    .focus();
+
+                            });
+
+                    } else {
+
+                        var originalMousedown = slider.element.data("mousedown-original");
+                        originalMousedown(e);
+
+                    }
+
+                });
+
+
+
+
+            slider.element.on( "slide.selectPip slidechange.selectPip", function(e, ui) {
+
+                var $slider = $(this),
+                    value = $slider.slider("value"),
+                    values = $slider.slider("values");
+
+                if ( ui ) {
+
+                    value = ui.value;
+                    values = ui.values;
+
+                }
+
+                if ( slider.values() && slider.values().length ) {
+
+                    selectPip.range( values );
+
+                } else {
+
+                    selectPip.single( value );
+
+                }
+
+            });
+
+
+
+
+        },
+
+
+
+
+
+
+
+
+        // floats
+
+        float: function( settings ) {
+
+            var i,
+                slider = this,
+                min = slider._valueMin(),
+                max = slider._valueMax(),
+                value = slider._value(),
+                values = slider._values(),
+                tipValues = [],
+                $handles = slider.element.find(".ui-slider-handle");
+
+            var options = {
+
+                handle: true,
+                /* false */
+
+                pips: false,
+                /* true */
+
+                labels: false,
+                /* [array], { first: "string", rest: [array], last: "string" }, false */
+
+                prefix: "",
+                /* "", string */
+
+                suffix: "",
+                /* "", string */
+
+                event: "slidechange slide",
+                /* "slidechange", "slide", "slidechange slide" */
+
+                formatLabel: function(value) {
+                    return this.prefix + value + this.suffix;
+                }
+                /* function
+                 must return a value to display in the floats */
+
+            };
+
+            if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
+
+                $.extend( options, settings );
+                slider.element.data("float-options", options );
+
+            } else {
+
+                if ( settings === "destroy" ) {
+
+                    destroy();
+
+                } else if ( settings === "refresh" ) {
+
+                    slider.element.slider( "float", slider.element.data("float-options") );
+
+                }
+
+                return;
+
+            }
+
+
+
+
+            if ( value < min ) {
+                value = min;
+            }
+
+            if ( value > max ) {
+                value = max;
+            }
+
+            if ( values && values.length ) {
+
+                for ( i = 0; i < values.length; i++ ) {
+
+                    if ( values[i] < min ) {
+                        values[i] = min;
+                    }
+
+                    if ( values[i] > max ) {
+                        values[i] = max;
+                    }
+
+                }
+
+            }
+
+            // add a class for the CSS
+            slider.element
+                .addClass("ui-slider-float")
+                .find(".ui-slider-tip, .ui-slider-tip-label")
+                .remove();
+
+
+
+            function destroy() {
+
+                slider.element
+                    .off(".sliderFloat")
+                    .removeClass("ui-slider-float")
+                    .find(".ui-slider-tip, .ui-slider-tip-label")
+                    .remove();
+
+            }
+
+
+            function getPipLabels( values ) {
+
+                // when checking the array we need to divide
+                // by the step option, so we store those values here.
+
+                var vals = [],
+                    steppedVals = $.map( values, function(v) {
+                        return Math.ceil(( v - min ) / slider.options.step);
+                    });
+
+                // now we just get the values we need to return
+                // by looping through the values array and assigning the
+                // label if it exists.
+
+                if ( $.type( options.labels ) === "array" ) {
+
+                    for ( i = 0; i < values.length; i++ ) {
+
+                        vals[i] = options.labels[ steppedVals[i] ] || values[i];
+
+                    }
+
+                } else if ( $.type( options.labels ) === "object" ) {
+
+                    for ( i = 0; i < values.length; i++ ) {
+
+                        if ( values[i] === min ) {
+
+                            vals[i] = options.labels.first || min;
+
+                        } else if ( values[i] === max ) {
+
+                            vals[i] = options.labels.last || max;
+
+                        } else if ( $.type( options.labels.rest ) === "array" ) {
+
+                            vals[i] = options.labels.rest[ steppedVals[i] - 1 ] || values[i];
+
+                        } else {
+
+                            vals[i] = values[i];
+
+                        }
+
+                    }
+
+                } else {
+
+                    for ( i = 0; i < values.length; i++ ) {
+
+                        vals[i] = values[i];
+
+                    }
+
+                }
+
+                return vals;
+
+            }
+
+            // apply handle tip if settings allows.
+            if ( options.handle ) {
+
+                // we need to set the human-readable label to either the
+                // corresponding element in the array, or the appropriate
+                // item in the object... or an empty string.
+
+                tipValues = ( slider.values() && slider.values().length ) ?
+                    getPipLabels( values ) :
+                    getPipLabels( [ value ] );
+
+                for ( i = 0; i < tipValues.length; i++ ) {
+
+                    $handles
+                        .eq( i )
+                        .append( $("<span class=\"ui-slider-tip\">"+ options.formatLabel(tipValues[i]) +"</span>") );
+
+                }
+
+            }
+
+            if ( options.pips ) {
+
+                // if this slider also has pip-labels, we make those into tips, too.
+                slider.element.find(".ui-slider-label").each(function(k, v) {
+
+                    var $this = $(v),
+                        val = [ $this.data("value") ],
+                        label,
+                        $tip;
+
+
+                    label = options.formatLabel( getPipLabels( val )[0] );
+
+                    // create a tip element
+                    $tip =
+                        $("<span class=\"ui-slider-tip-label\">" + label + "</span>")
+                            .insertAfter( $this );
+
+                });
+
+            }
+
+            // check that the event option is actually valid against our
+            // own list of the slider's events.
+            if ( options.event !== "slide" &&
+                options.event !== "slidechange" &&
+                options.event !== "slide slidechange" &&
+                options.event !== "slidechange slide" ) {
+
+                options.event = "slidechange slide";
+
+            }
+
+            // when slider changes, update handle tip label.
+            slider.element
+                .off(".sliderFloat")
+                .on( options.event + ".sliderFloat", function( e, ui ) {
+
+                    var uiValue = ( $.type( ui.value ) === "array" ) ? ui.value : [ ui.value ],
+                        val = options.formatLabel( getPipLabels( uiValue )[0] );
+
+                    $(ui.handle)
+                        .find(".ui-slider-tip")
+                        .html( val );
+
+                });
+
+        }
+
+    };
+
+    $.extend(true, $.ui.slider.prototype, extensionMethods);
+
+})(jQuery);