Commit inicial Ventas Productivo

Metronic/assets/admin/pages/scripts/components-nouisliders.js

@@ -0,0 +1,253 @@
+var ComponentsNoUiSliders = function() {
+
+
+    var demo1 = function() {
+        $('#slider_0').noUiSlider({
+            direction: (Metronic.isRTL() ? "rtl" : "ltr"),
+            start: 40,
+            connect: "lower",
+            range: {
+                'min': 0,
+                'max': 100
+            }
+        });
+    }
+
+    var demo2 = function() {
+        $("#slider_1").noUiSlider({
+            direction: (Metronic.isRTL() ? "rtl" : "ltr"),
+            start: [20, 80],
+            range: {
+                min: 0,
+                max: 100
+            },
+            connect: true,
+            handles: 2
+        });
+    }
+
+    var demo3 = function() {
+        // slider 2
+        $("#nonlinear").noUiSlider({
+            connect: true,
+            behaviour: 'tap',
+            start: [500, 4000],
+            range: {
+                // Starting at 500, step the value by 500,
+                // until 4000 is reached. From there, step by 1000.
+                'min': [0],
+                '10%': [500, 500],
+                '50%': [4000, 1000],
+                'max': [10000]
+            }
+        });
+
+        // Write the CSS 'left' value to a span.
+        function leftValue(value, handle, slider) {
+            $(this).text(handle.parent()[0].style.left);
+        }
+
+        // Bind two elements to the lower handle.
+        // The first item will display the slider value, 
+        // the second shows how far the handle moved
+        // from the left edge of the slider.
+        $("#nonlinear").Link('lower').to($('#lower-value'));
+        $("#nonlinear").Link('lower').to($('#lower-offset'), leftValue);
+
+
+        // Do the same for the upper handle.
+        $("#nonlinear").Link('upper').to($('#upper-value'));
+        $("#nonlinear").Link('upper').to($('#upper-offset'), leftValue);
+    }
+
+    var demo4 = function() {
+        // Store the locked state and slider values.
+        var lockedState = false,
+            values = [60, 80],
+            slider1 = $("#slider1"),
+            slider2 = $("#slider2");
+
+        // When the button is clicked, the locked
+        // state is inverted.
+        $("#slider2-btn").click(function() {
+            lockedState = !lockedState;
+            $(this).text(lockedState ? 'unlock' : 'lock');
+        });
+
+        function crossUpdate(value, handle, slider) {
+
+            // If the sliders aren't interlocked, don't
+            // cross-update.
+            if (!lockedState) return;
+
+            // Select whether to increase or decrease
+            // the other slider value.
+            var lValue = slider1.is(slider) ? 1 : 0,
+                hValue = lValue ? 0 : 1;
+
+            // Modify the slider value.
+            value -= (values[hValue] - values[lValue]);
+
+            // Set the value
+            $(this).val(value);
+        }
+
+        slider1.noUiSlider({
+            start: 60,
+
+            // Disable animation on value-setting,
+            // so the sliders respond immediately.
+            animate: false,
+            range: {
+                min: 50,
+                max: 100
+            }
+        });
+
+        slider2.noUiSlider({
+            start: 80,
+            animate: false,
+            range: {
+                min: 50,
+                max: 100
+            }
+        });
+
+        $(".slider").on('set', function() {
+
+            // The .val() function returns a string,
+            // but we wan't to do substractions, so
+            // convert the values to numbers.
+            values = [
+                Number(slider1.val()),
+                Number(slider2.val())
+            ];
+        });
+
+        // The value will be send to the other slider,
+        // using a custom function as the serialization
+        // method. The function uses the global 'lockedState'
+        // variable to decide whether the other slider is updated.
+
+        slider1.Link('lower').to(slider2, crossUpdate);
+        slider1.Link('lower').to($("#slider1-span"));
+
+        slider2.Link('lower').to(slider1, crossUpdate);
+        slider2.Link('lower').to($("#slider2-span"));
+
+    }
+
+    var demo5 = function() {
+
+        function timestamp(str){
+            return new Date(str).getTime();   
+        }
+
+        // Create a list of day and monthnames.
+        var
+            weekdays = [
+                "Sunday", "Monday", "Tuesday",
+                "Wednesday", "Thursday", "Friday",
+                "Saturday"
+            ],
+            months = [
+                "January", "February", "March",
+                "April", "May", "June", "July",
+                "August", "September", "October",
+                "November", "December"
+            ];
+
+        // Append a suffix to dates.
+        // Example: 23 => 23rd, 1 => 1st.
+        function nth(d) {
+            if (d > 3 && d < 21) return 'th';
+            switch (d % 10) {
+                case 1:
+                    return "st";
+                case 2:
+                    return "nd";
+                case 3:
+                    return "rd";
+                default:
+                    return "th";
+            }
+        }
+
+        // Create a string representation of the date.
+        function formatDate(date) {
+            return weekdays[date.getDay()] + ", " +
+                date.getDate() + nth(date.getDate()) + " " +
+                months[date.getMonth()] + " " +
+                date.getFullYear();
+        }
+
+        // Write a date as a pretty value.
+        function setDate(value) {
+            $(this).html(formatDate(new Date(+value)));
+        }
+
+        $("#slider-date").noUiSlider({
+            // Create two timestamps to define a range.
+            range: {
+                min: timestamp('2010'),
+                max: timestamp('2016')
+            },
+
+            // Steps of one week
+            step: 7 * 24 * 60 * 60 * 1000,
+
+            // Two more timestamps indicate the handle starting positions.
+            start: [timestamp('2011'), timestamp('2015')],
+
+            // No decimals
+            format: wNumb({
+                decimals: 0
+            })
+        });
+
+        $("#slider-date").Link('lower').to($("#event-start"), setDate);
+
+        $("#slider-date").Link('upper').to($("#event-end"), setDate);
+
+
+    }
+
+    var demo6 = function() {
+        $('#soft').noUiSlider({
+            start: 50,
+            range: {
+                min: 0,
+                max: 100
+            }
+        });
+
+        $('#soft').noUiSlider_pips({
+            mode: 'values',
+            values: [20, 80],
+            density: 4
+        });
+
+        $('#soft').on('set', function ( event, value ) {
+            if ( value < 20 ) {
+                $(this).val(20);
+            } else if ( value > 80 ) {
+                $(this).val(80);
+            }
+        });
+
+    }
+
+    return {
+        //main function to initiate the module
+        init: function() {
+            demo1();
+            demo2();
+            demo3();
+            demo4();
+            demo5();
+            demo6();
+        }
+
+    };
+
+}();