From 4e89e9630a39832dcff5ab74f947851d3bc5ca5f Mon Sep 17 00:00:00 2001 From: zsloan Date: Wed, 7 Oct 2015 15:39:45 +0000 Subject: Adding library for slider used with correlation tool --- .../static/new/packages/noUiSlider/nouislider.css | 162 ++ .../static/new/packages/noUiSlider/nouislider.js | 1629 ++++++++++++++++++++ .../new/packages/noUiSlider/nouislider.pips.css | 98 ++ 3 files changed, 1889 insertions(+) create mode 100644 wqflask/wqflask/static/new/packages/noUiSlider/nouislider.css create mode 100644 wqflask/wqflask/static/new/packages/noUiSlider/nouislider.js create mode 100644 wqflask/wqflask/static/new/packages/noUiSlider/nouislider.pips.css diff --git a/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.css b/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.css new file mode 100644 index 00000000..d07b87f6 --- /dev/null +++ b/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.css @@ -0,0 +1,162 @@ + +/* Functional styling; + * These styles are required for noUiSlider to function. + * You don't need to change these rules to apply your design. + */ +.noUi-target, +.noUi-target * { +-webkit-touch-callout: none; +-webkit-user-select: none; +-ms-touch-action: none; +-ms-user-select: none; +-moz-user-select: none; +-moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-target { + position: relative; + direction: ltr; +} +.noUi-base { + width: 100%; + height: 100%; + position: relative; + z-index: 1; /* Fix 401 */ +} +.noUi-origin { + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; +} +.noUi-handle { + position: relative; + z-index: 1; +} +.noUi-stacking .noUi-handle { +/* This class is applied to the lower origin when + its values is > 50%. */ + z-index: 10; +} +.noUi-state-tap .noUi-origin { +-webkit-transition: left 0.3s, top 0.3s; + transition: left 0.3s, top 0.3s; +} +.noUi-state-drag * { + cursor: inherit !important; +} + +/* Painting and performance; + * Browsers can paint handles in their own layer. + */ +.noUi-base { + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); +} + +/* Slider size and handle placement; + */ +.noUi-horizontal { + height: 18px; +} +.noUi-horizontal .noUi-handle { + width: 34px; + height: 28px; + left: -17px; + top: -6px; +} +.noUi-vertical { + width: 18px; +} +.noUi-vertical .noUi-handle { + width: 28px; + height: 34px; + left: -6px; + top: -17px; +} + +/* Styling; + */ +.noUi-background { + background: #FAFAFA; + box-shadow: inset 0 1px 1px #f0f0f0; +} +.noUi-connect { + background: #3FB8AF; + box-shadow: inset 0 0 3px rgba(51,51,51,0.45); +-webkit-transition: background 450ms; + transition: background 450ms; +} +.noUi-origin { + border-radius: 2px; +} +.noUi-target { + border-radius: 4px; + border: 1px solid #D3D3D3; + box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; +} +.noUi-target.noUi-connect { + box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB; +} + +/* Handles and cursors; + */ +.noUi-dragable { + cursor: w-resize; +} +.noUi-vertical .noUi-dragable { + cursor: n-resize; +} +.noUi-handle { + border: 1px solid #D9D9D9; + border-radius: 3px; + background: #FFF; + cursor: default; + box-shadow: inset 0 0 1px #FFF, + inset 0 1px 7px #EBEBEB, + 0 3px 6px -3px #BBB; +} +.noUi-active { + box-shadow: inset 0 0 1px #FFF, + inset 0 1px 7px #DDD, + 0 3px 6px -3px #BBB; +} + +/* Handle stripes; + */ +.noUi-handle:before, +.noUi-handle:after { + content: ""; + display: block; + position: absolute; + height: 14px; + width: 1px; + background: #E8E7E6; + left: 14px; + top: 6px; +} +.noUi-handle:after { + left: 17px; +} +.noUi-vertical .noUi-handle:before, +.noUi-vertical .noUi-handle:after { + width: 14px; + height: 1px; + left: 6px; + top: 14px; +} +.noUi-vertical .noUi-handle:after { + top: 17px; +} + +/* Disabled state; + */ +[disabled].noUi-connect, +[disabled] .noUi-connect { + background: #B8B8B8; +} +[disabled].noUi-origin, +[disabled] .noUi-handle { + cursor: not-allowed; +} diff --git a/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.js b/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.js new file mode 100644 index 00000000..67ae7549 --- /dev/null +++ b/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.js @@ -0,0 +1,1629 @@ +/*! nouislider - 8.0.2 - 2015-07-06 13:22:09 */ + +/*jslint browser: true */ +/*jslint white: true */ + +(function (factory) { + + if ( typeof define === 'function' && define.amd ) { + + // AMD. Register as an anonymous module. + define([], factory); + + } else if ( typeof exports === 'object' ) { + + var fs = require('fs'); + + // Node/CommonJS + module.exports = factory(); + module.exports.css = function () { + return fs.readFileSync(__dirname + '/nouislider.min.css', 'utf8'); + }; + + } else { + + // Browser globals + window.noUiSlider = factory(); + } + +}(function( ){ + + 'use strict'; + + + // Removes duplicates from an array. + function unique(array) { + return array.filter(function(a){ + return !this[a] ? this[a] = true : false; + }, {}); + } + + // Round a value to the closest 'to'. + function closest ( value, to ) { + return Math.round(value / to) * to; + } + + // Current position of an element relative to the document. + function offset ( elem ) { + + var rect = elem.getBoundingClientRect(), + doc = elem.ownerDocument, + win = doc.defaultView || doc.parentWindow, + docElem = doc.documentElement, + xOff = win.pageXOffset; + + // getBoundingClientRect contains left scroll in Chrome on Android. + // I haven't found a feature detection that proves this. Worst case + // scenario on mis-match: the 'tap' feature on horizontal sliders breaks. + if ( /webkit.*Chrome.*Mobile/i.test(navigator.userAgent) ) { + xOff = 0; + } + + return { + top: rect.top + win.pageYOffset - docElem.clientTop, + left: rect.left + xOff - docElem.clientLeft + }; + } + + // Checks whether a value is numerical. + function isNumeric ( a ) { + return typeof a === 'number' && !isNaN( a ) && isFinite( a ); + } + + // Rounds a number to 7 supported decimals. + function accurateNumber( number ) { + var p = Math.pow(10, 7); + return Number((Math.round(number*p)/p).toFixed(7)); + } + + // Sets a class and removes it after [duration] ms. + function addClassFor ( element, className, duration ) { + addClass(element, className); + setTimeout(function(){ + removeClass(element, className); + }, duration); + } + + // Limits a value to 0 - 100 + function limit ( a ) { + return Math.max(Math.min(a, 100), 0); + } + + // Wraps a variable as an array, if it isn't one yet. + function asArray ( a ) { + return Array.isArray(a) ? a : [a]; + } + + // Counts decimals + function countDecimals ( numStr ) { + var pieces = numStr.split("."); + return pieces.length > 1 ? pieces[1].length : 0; + } + + // http://youmightnotneedjquery.com/#add_class + function addClass ( el, className ) { + if ( el.classList ) { + el.classList.add(className); + } else { + el.className += ' ' + className; + } + } + + // http://youmightnotneedjquery.com/#remove_class + function removeClass ( el, className ) { + if ( el.classList ) { + el.classList.remove(className); + } else { + el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); + } + } + + // http://youmightnotneedjquery.com/#has_class + function hasClass ( el, className ) { + if ( el.classList ) { + el.classList.contains(className); + } else { + new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); + } + } + + + var + // Determine the events to bind. IE11 implements pointerEvents without + // a prefix, which breaks compatibility with the IE10 implementation. + /** @const */ + actions = window.navigator.pointerEnabled ? { + start: 'pointerdown', + move: 'pointermove', + end: 'pointerup' + } : window.navigator.msPointerEnabled ? { + start: 'MSPointerDown', + move: 'MSPointerMove', + end: 'MSPointerUp' + } : { + start: 'mousedown touchstart', + move: 'mousemove touchmove', + end: 'mouseup touchend' + }, + // Re-usable list of classes; + /** @const */ + Classes = [ +/* 0 */ 'noUi-target' +/* 1 */ ,'noUi-base' +/* 2 */ ,'noUi-origin' +/* 3 */ ,'noUi-handle' +/* 4 */ ,'noUi-horizontal' +/* 5 */ ,'noUi-vertical' +/* 6 */ ,'noUi-background' +/* 7 */ ,'noUi-connect' +/* 8 */ ,'noUi-ltr' +/* 9 */ ,'noUi-rtl' +/* 10 */ ,'noUi-dragable' +/* 11 */ ,'' +/* 12 */ ,'noUi-state-drag' +/* 13 */ ,'' +/* 14 */ ,'noUi-state-tap' +/* 15 */ ,'noUi-active' +/* 16 */ ,'' +/* 17 */ ,'noUi-stacking' + ]; + + +// Value calculation + + // Determine the size of a sub-range in relation to a full range. + function subRangeRatio ( pa, pb ) { + return (100 / (pb - pa)); + } + + // (percentage) How many percent is this value of this range? + function fromPercentage ( range, value ) { + return (value * 100) / ( range[1] - range[0] ); + } + + // (percentage) Where is this value on this range? + function toPercentage ( range, value ) { + return fromPercentage( range, range[0] < 0 ? + value + Math.abs(range[0]) : + value - range[0] ); + } + + // (value) How much is this percentage on this range? + function isPercentage ( range, value ) { + return ((value * ( range[1] - range[0] )) / 100) + range[0]; + } + + +// Range conversion + + function getJ ( value, arr ) { + + var j = 1; + + while ( value >= arr[j] ){ + j += 1; + } + + return j; + } + + // (percentage) Input a value, find where, on a scale of 0-100, it applies. + function toStepping ( xVal, xPct, value ) { + + if ( value >= xVal.slice(-1)[0] ){ + return 100; + } + + var j = getJ( value, xVal ), va, vb, pa, pb; + + va = xVal[j-1]; + vb = xVal[j]; + pa = xPct[j-1]; + pb = xPct[j]; + + return pa + (toPercentage([va, vb], value) / subRangeRatio (pa, pb)); + } + + // (value) Input a percentage, find where it is on the specified range. + function fromStepping ( xVal, xPct, value ) { + + // There is no range group that fits 100 + if ( value >= 100 ){ + return xVal.slice(-1)[0]; + } + + var j = getJ( value, xPct ), va, vb, pa, pb; + + va = xVal[j-1]; + vb = xVal[j]; + pa = xPct[j-1]; + pb = xPct[j]; + + return isPercentage([va, vb], (value - pa) * subRangeRatio (pa, pb)); + } + + // (percentage) Get the step that applies at a certain value. + function getStep ( xPct, xSteps, snap, value ) { + + if ( value === 100 ) { + return value; + } + + var j = getJ( value, xPct ), a, b; + + // If 'snap' is set, steps are used as fixed points on the slider. + if ( snap ) { + + a = xPct[j-1]; + b = xPct[j]; + + // Find the closest position, a or b. + if ((value - a) > ((b-a)/2)){ + return b; + } + + return a; + } + + if ( !xSteps[j-1] ){ + return value; + } + + return xPct[j-1] + closest( + value - xPct[j-1], + xSteps[j-1] + ); + } + + +// Entry parsing + + function handleEntryPoint ( index, value, that ) { + + var percentage; + + // Wrap numerical input in an array. + if ( typeof value === "number" ) { + value = [value]; + } + + // Reject any invalid input, by testing whether value is an array. + if ( Object.prototype.toString.call( value ) !== '[object Array]' ){ + throw new Error("noUiSlider: 'range' contains invalid value."); + } + + // Covert min/max syntax to 0 and 100. + if ( index === 'min' ) { + percentage = 0; + } else if ( index === 'max' ) { + percentage = 100; + } else { + percentage = parseFloat( index ); + } + + // Check for correct input. + if ( !isNumeric( percentage ) || !isNumeric( value[0] ) ) { + throw new Error("noUiSlider: 'range' value isn't numeric."); + } + + // Store values. + that.xPct.push( percentage ); + that.xVal.push( value[0] ); + + // NaN will evaluate to false too, but to keep + // logging clear, set step explicitly. Make sure + // not to override the 'step' setting with false. + if ( !percentage ) { + if ( !isNaN( value[1] ) ) { + that.xSteps[0] = value[1]; + } + } else { + that.xSteps.push( isNaN(value[1]) ? false : value[1] ); + } + } + + function handleStepPoint ( i, n, that ) { + + // Ignore 'false' stepping. + if ( !n ) { + return true; + } + + // Factor to range ratio + that.xSteps[i] = fromPercentage([ + that.xVal[i] + ,that.xVal[i+1] + ], n) / subRangeRatio ( + that.xPct[i], + that.xPct[i+1] ); + } + + +// Interface + + // The interface to Spectrum handles all direction-based + // conversions, so the above values are unaware. + + function Spectrum ( entry, snap, direction, singleStep ) { + + this.xPct = []; + this.xVal = []; + this.xSteps = [ singleStep || false ]; + this.xNumSteps = [ false ]; + + this.snap = snap; + this.direction = direction; + + var index, ordered = [ /* [0, 'min'], [1, '50%'], [2, 'max'] */ ]; + + // Map the object keys to an array. + for ( index in entry ) { + if ( entry.hasOwnProperty(index) ) { + ordered.push([entry[index], index]); + } + } + + // Sort all entries by value (numeric sort). + ordered.sort(function(a, b) { return a[0] - b[0]; }); + + // Convert all entries to subranges. + for ( index = 0; index < ordered.length; index++ ) { + handleEntryPoint(ordered[index][1], ordered[index][0], this); + } + + // Store the actual step values. + // xSteps is sorted in the same order as xPct and xVal. + this.xNumSteps = this.xSteps.slice(0); + + // Convert all numeric steps to the percentage of the subrange they represent. + for ( index = 0; index < this.xNumSteps.length; index++ ) { + handleStepPoint(index, this.xNumSteps[index], this); + } + } + + Spectrum.prototype.getMargin = function ( value ) { + return this.xPct.length === 2 ? fromPercentage(this.xVal, value) : false; + }; + + Spectrum.prototype.toStepping = function ( value ) { + + value = toStepping( this.xVal, this.xPct, value ); + + // Invert the value if this is a right-to-left slider. + if ( this.direction ) { + value = 100 - value; + } + + return value; + }; + + Spectrum.prototype.fromStepping = function ( value ) { + + // Invert the value if this is a right-to-left slider. + if ( this.direction ) { + value = 100 - value; + } + + return accurateNumber(fromStepping( this.xVal, this.xPct, value )); + }; + + Spectrum.prototype.getStep = function ( value ) { + + // Find the proper step for rtl sliders by search in inverse direction. + // Fixes issue #262. + if ( this.direction ) { + value = 100 - value; + } + + value = getStep(this.xPct, this.xSteps, this.snap, value ); + + if ( this.direction ) { + value = 100 - value; + } + + return value; + }; + + Spectrum.prototype.getApplicableStep = function ( value ) { + + // If the value is 100%, return the negative step twice. + var j = getJ(value, this.xPct), offset = value === 100 ? 2 : 1; + return [this.xNumSteps[j-2], this.xVal[j-offset], this.xNumSteps[j-offset]]; + }; + + // Outside testing + Spectrum.prototype.convert = function ( value ) { + return this.getStep(this.toStepping(value)); + }; + +/* Every input option is tested and parsed. This'll prevent + endless validation in internal methods. These tests are + structured with an item for every option available. An + option can be marked as required by setting the 'r' flag. + The testing function is provided with three arguments: + - The provided value for the option; + - A reference to the options object; + - The name for the option; + + The testing function returns false when an error is detected, + or true when everything is OK. It can also modify the option + object, to make sure all values can be correctly looped elsewhere. */ + + var defaultFormatter = { 'to': function( value ){ + return value.toFixed(2); + }, 'from': Number }; + + function testStep ( parsed, entry ) { + + if ( !isNumeric( entry ) ) { + throw new Error("noUiSlider: 'step' is not numeric."); + } + + // The step option can still be used to set stepping + // for linear sliders. Overwritten if set in 'range'. + parsed.singleStep = entry; + } + + function testRange ( parsed, entry ) { + + // Filter incorrect input. + if ( typeof entry !== 'object' || Array.isArray(entry) ) { + throw new Error("noUiSlider: 'range' is not an object."); + } + + // Catch missing start or end. + if ( entry.min === undefined || entry.max === undefined ) { + throw new Error("noUiSlider: Missing 'min' or 'max' in 'range'."); + } + + parsed.spectrum = new Spectrum(entry, parsed.snap, parsed.dir, parsed.singleStep); + } + + function testStart ( parsed, entry ) { + + entry = asArray(entry); + + // Validate input. Values aren't tested, as the public .val method + // will always provide a valid location. + if ( !Array.isArray( entry ) || !entry.length || entry.length > 2 ) { + throw new Error("noUiSlider: 'start' option is incorrect."); + } + + // Store the number of handles. + parsed.handles = entry.length; + + // When the slider is initialized, the .val method will + // be called with the start options. + parsed.start = entry; + } + + function testSnap ( parsed, entry ) { + + // Enforce 100% stepping within subranges. + parsed.snap = entry; + + if ( typeof entry !== 'boolean' ){ + throw new Error("noUiSlider: 'snap' option must be a boolean."); + } + } + + function testAnimate ( parsed, entry ) { + + // Enforce 100% stepping within subranges. + parsed.animate = entry; + + if ( typeof entry !== 'boolean' ){ + throw new Error("noUiSlider: 'animate' option must be a boolean."); + } + } + + function testConnect ( parsed, entry ) { + + if ( entry === 'lower' && parsed.handles === 1 ) { + parsed.connect = 1; + } else if ( entry === 'upper' && parsed.handles === 1 ) { + parsed.connect = 2; + } else if ( entry === true && parsed.handles === 2 ) { + parsed.connect = 3; + } else if ( entry === false ) { + parsed.connect = 0; + } else { + throw new Error("noUiSlider: 'connect' option doesn't match handle count."); + } + } + + function testOrientation ( parsed, entry ) { + + // Set orientation to an a numerical value for easy + // array selection. + switch ( entry ){ + case 'horizontal': + parsed.ort = 0; + break; + case 'vertical': + parsed.ort = 1; + break; + default: + throw new Error("noUiSlider: 'orientation' option is invalid."); + } + } + + function testMargin ( parsed, entry ) { + + if ( !isNumeric(entry) ){ + throw new Error("noUiSlider: 'margin' option must be numeric."); + } + + parsed.margin = parsed.spectrum.getMargin(entry); + + if ( !parsed.margin ) { + throw new Error("noUiSlider: 'margin' option is only supported on linear sliders."); + } + } + + function testLimit ( parsed, entry ) { + + if ( !isNumeric(entry) ){ + throw new Error("noUiSlider: 'limit' option must be numeric."); + } + + parsed.limit = parsed.spectrum.getMargin(entry); + + if ( !parsed.limit ) { + throw new Error("noUiSlider: 'limit' option is only supported on linear sliders."); + } + } + + function testDirection ( parsed, entry ) { + + // Set direction as a numerical value for easy parsing. + // Invert connection for RTL sliders, so that the proper + // handles get the connect/background classes. + switch ( entry ) { + case 'ltr': + parsed.dir = 0; + break; + case 'rtl': + parsed.dir = 1; + parsed.connect = [0,2,1,3][parsed.connect]; + break; + default: + throw new Error("noUiSlider: 'direction' option was not recognized."); + } + } + + function testBehaviour ( parsed, entry ) { + + // Make sure the input is a string. + if ( typeof entry !== 'string' ) { + throw new Error("noUiSlider: 'behaviour' must be a string containing options."); + } + + // Check if the string contains any keywords. + // None are required. + var tap = entry.indexOf('tap') >= 0, + drag = entry.indexOf('drag') >= 0, + fixed = entry.indexOf('fixed') >= 0, + snap = entry.indexOf('snap') >= 0; + + parsed.events = { + tap: tap || snap, + drag: drag, + fixed: fixed, + snap: snap + }; + } + + function testFormat ( parsed, entry ) { + + parsed.format = entry; + + // Any object with a to and from method is supported. + if ( typeof entry.to === 'function' && typeof entry.from === 'function' ) { + return true; + } + + throw new Error( "noUiSlider: 'format' requires 'to' and 'from' methods."); + } + + // Test all developer settings and parse to assumption-safe values. + function testOptions ( options ) { + + var parsed = { + margin: 0, + limit: 0, + animate: true, + format: defaultFormatter + }, tests; + + // Tests are executed in the order they are presented here. + tests = { + 'step': { r: false, t: testStep }, + 'start': { r: true, t: testStart }, + 'connect': { r: true, t: testConnect }, + 'direction': { r: true, t: testDirection }, + 'snap': { r: false, t: testSnap }, + 'animate': { r: false, t: testAnimate }, + 'range': { r: true, t: testRange }, + 'orientation': { r: false, t: testOrientation }, + 'margin': { r: false, t: testMargin }, + 'limit': { r: false, t: testLimit }, + 'behaviour': { r: true, t: testBehaviour }, + 'format': { r: false, t: testFormat } + }; + + var defaults = { + 'connect': false, + 'direction': 'ltr', + 'behaviour': 'tap', + 'orientation': 'horizontal' + }; + + // Set defaults where applicable. + Object.keys(defaults).forEach(function ( name ) { + if ( options[name] === undefined ) { + options[name] = defaults[name]; + } + }); + + // Run all options through a testing mechanism to ensure correct + // input. It should be noted that options might get modified to + // be handled properly. E.g. wrapping integers in arrays. + Object.keys(tests).forEach(function( name ){ + + var test = tests[name]; + + // If the option isn't set, but it is required, throw an error. + if ( options[name] === undefined ) { + + if ( test.r ) { + throw new Error("noUiSlider: '" + name + "' is required."); + } + + return true; + } + + test.t( parsed, options[name] ); + }); + + // Forward pips options + parsed.pips = options.pips; + + // Pre-define the styles. + parsed.style = parsed.ort ? 'top' : 'left'; + + return parsed; + } + + + // Delimit proposed values for handle positions. + function getPositions ( a, b, delimit ) { + + // Add movement to current position. + var c = a + b[0], d = a + b[1]; + + // Only alter the other position on drag, + // not on standard sliding. + if ( delimit ) { + if ( c < 0 ) { + d += Math.abs(c); + } + if ( d > 100 ) { + c -= ( d - 100 ); + } + + // Limit values to 0 and 100. + return [limit(c), limit(d)]; + } + + return [c,d]; + } + + // Provide a clean event with standardized offset values. + function fixEvent ( e ) { + + // Prevent scrolling and panning on touch events, while + // attempting to slide. The tap event also depends on this. + e.preventDefault(); + + // Filter the event to register the type, which can be + // touch, mouse or pointer. Offset changes need to be + // made on an event specific basis. + var touch = e.type.indexOf('touch') === 0, + mouse = e.type.indexOf('mouse') === 0, + pointer = e.type.indexOf('pointer') === 0, + x,y, event = e; + + // IE10 implemented pointer events with a prefix; + if ( e.type.indexOf('MSPointer') === 0 ) { + pointer = true; + } + + if ( touch ) { + // noUiSlider supports one movement at a time, + // so we can select the first 'changedTouch'. + x = e.changedTouches[0].pageX; + y = e.changedTouches[0].pageY; + } + + if ( mouse || pointer ) { + x = e.clientX + window.pageXOffset; + y = e.clientY + window.pageYOffset; + } + + event.points = [x, y]; + event.cursor = mouse || pointer; // Fix #435 + + return event; + } + + // Append a handle to the base. + function addHandle ( direction, index ) { + + var origin = document.createElement('div'), + handle = document.createElement('div'), + additions = [ '-lower', '-upper' ]; + + if ( direction ) { + additions.reverse(); + } + + addClass(handle, Classes[3]); + addClass(handle, Classes[3] + additions[index]); + + addClass(origin, Classes[2]); + origin.appendChild(handle); + + return origin; + } + + // Add the proper connection classes. + function addConnection ( connect, target, handles ) { + + // Apply the required connection classes to the elements + // that need them. Some classes are made up for several + // segments listed in the class list, to allow easy + // renaming and provide a minor compression benefit. + switch ( connect ) { + case 1: addClass(target, Classes[7]); + addClass(handles[0], Classes[6]); + break; + case 3: addClass(handles[1], Classes[6]); + /* falls through */ + case 2: addClass(handles[0], Classes[7]); + /* falls through */ + case 0: addClass(target, Classes[6]); + break; + } + } + + // Add handles to the slider base. + function addHandles ( nrHandles, direction, base ) { + + var index, handles = []; + + // Append handles. + for ( index = 0; index < nrHandles; index += 1 ) { + + // Keep a list of all added handles. + handles.push( base.appendChild(addHandle( direction, index )) ); + } + + return handles; + } + + // Initialize a single slider. + function addSlider ( direction, orientation, target ) { + + // Apply classes and data to the target. + addClass(target, Classes[0]); + addClass(target, Classes[8 + direction]); + addClass(target, Classes[4 + orientation]); + + var div = document.createElement('div'); + addClass(div, Classes[1]); + target.appendChild(div); + return div; + } + + +function closure ( target, options ){ + + // All variables local to 'closure' are prefixed with 'scope_' + var scope_Target = target, + scope_Locations = [-1, -1], + scope_Base, + scope_Handles, + scope_Spectrum = options.spectrum, + scope_Values = [], + scope_Events = {}; + + + function getGroup ( mode, values, stepped ) { + + // Use the range. + if ( mode === 'range' || mode === 'steps' ) { + return scope_Spectrum.xVal; + } + + if ( mode === 'count' ) { + + // Divide 0 - 100 in 'count' parts. + var spread = ( 100 / (values-1) ), v, i = 0; + values = []; + + // List these parts and have them handled as 'positions'. + while ((v=i++*spread) <= 100 ) { + values.push(v); + } + + mode = 'positions'; + } + + if ( mode === 'positions' ) { + + // Map all percentages to on-range values. + return values.map(function( value ){ + return scope_Spectrum.fromStepping( stepped ? scope_Spectrum.getStep( value ) : value ); + }); + } + + if ( mode === 'values' ) { + + // If the value must be stepped, it needs to be converted to a percentage first. + if ( stepped ) { + + return values.map(function( value ){ + + // Convert to percentage, apply step, return to value. + return scope_Spectrum.fromStepping( scope_Spectrum.getStep( scope_Spectrum.toStepping( value ) ) ); + }); + + } + + // Otherwise, we can simply use the values. + return values; + } + } + + function generateSpread ( density, mode, group ) { + + var originalSpectrumDirection = scope_Spectrum.direction, + indexes = {}, + firstInRange = scope_Spectrum.xVal[0], + lastInRange = scope_Spectrum.xVal[scope_Spectrum.xVal.length-1], + ignoreFirst = false, + ignoreLast = false, + prevPct = 0; + + // This function loops the spectrum in an ltr linear fashion, + // while the toStepping method is direction aware. Trick it into + // believing it is ltr. + scope_Spectrum.direction = 0; + + // Create a copy of the group, sort it and filter away all duplicates. + group = unique(group.slice().sort(function(a, b){ return a - b; })); + + // Make sure the range starts with the first element. + if ( group[0] !== firstInRange ) { + group.unshift(firstInRange); + ignoreFirst = true; + } + + // Likewise for the last one. + if ( group[group.length - 1] !== lastInRange ) { + group.push(lastInRange); + ignoreLast = true; + } + + group.forEach(function ( current, index ) { + + // Get the current step and the lower + upper positions. + var step, i, q, + low = current, + high = group[index+1], + newPct, pctDifference, pctPos, type, + steps, realSteps, stepsize; + + // When using 'steps' mode, use the provided steps. + // Otherwise, we'll step on to the next subrange. + if ( mode === 'steps' ) { + step = scope_Spectrum.xNumSteps[ index ]; + } + + // Default to a 'full' step. + if ( !step ) { + step = high-low; + } + + // Low can be 0, so test for false. If high is undefined, + // we are at the last subrange. Index 0 is already handled. + if ( low === false || high === undefined ) { + return; + } + + // Find all steps in the subrange. + for ( i = low; i <= high; i += step ) { + + // Get the percentage value for the current step, + // calculate the size for the subrange. + newPct = scope_Spectrum.toStepping( i ); + pctDifference = newPct - prevPct; + + steps = pctDifference / density; + realSteps = Math.round(steps); + + // This ratio represents the ammount of percentage-space a point indicates. + // For a density 1 the points/percentage = 1. For density 2, that percentage needs to be re-devided. + // Round the percentage offset to an even number, then divide by two + // to spread the offset on both sides of the range. + stepsize = pctDifference/realSteps; + + // Divide all points evenly, adding the correct number to this subrange. + // Run up to <= so that 100% gets a point, event if ignoreLast is set. + for ( q = 1; q <= realSteps; q += 1 ) { + + // The ratio between the rounded value and the actual size might be ~1% off. + // Correct the percentage offset by the number of points + // per subrange. density = 1 will result in 100 points on the + // full range, 2 for 50, 4 for 25, etc. + pctPos = prevPct + ( q * stepsize ); + indexes[pctPos.toFixed(5)] = ['x', 0]; + } + + // Determine the point type. + type = (group.indexOf(i) > -1) ? 1 : ( mode === 'steps' ? 2 : 0 ); + + // Enforce the 'ignoreFirst' option by overwriting the type for 0. + if ( !index && ignoreFirst ) { + type = 0; + } + + if ( !(i === high && ignoreLast)) { + // Mark the 'type' of this point. 0 = plain, 1 = real value, 2 = step value. + indexes[newPct.toFixed(5)] = [i, type]; + } + + // Update the percentage count. + prevPct = newPct; + } + }); + + // Reset the spectrum. + scope_Spectrum.direction = originalSpectrumDirection; + + return indexes; + } + + function addMarking ( spread, filterFunc, formatter ) { + + var style = ['horizontal', 'vertical'][options.ort], + element = document.createElement('div'); + + addClass(element, 'noUi-pips'); + addClass(element, 'noUi-pips-' + style); + + function getSize( type ){ + return [ '-normal', '-large', '-sub' ][type]; + } + + function getTags( offset, source, values ) { + return 'class="' + source + ' ' + + source + '-' + style + ' ' + + source + getSize(values[1]) + + '" style="' + options.style + ': ' + offset + '%"'; + } + + function addSpread ( offset, values ){ + + if ( scope_Spectrum.direction ) { + offset = 100 - offset; + } + + // Apply the filter function, if it is set. + values[1] = (values[1] && filterFunc) ? filterFunc(values[0], values[1]) : values[1]; + + // Add a marker for every point + element.innerHTML += '
'; + + // Values are only appended for points marked '1' or '2'. + if ( values[1] ) { + element.innerHTML += '
' + formatter.to(values[0]) + '
'; + } + } + + // Append all points. + Object.keys(spread).forEach(function(a){ + addSpread(a, spread[a]); + }); + + return element; + } + + function pips ( grid ) { + + var mode = grid.mode, + density = grid.density || 1, + filter = grid.filter || false, + values = grid.values || false, + stepped = grid.stepped || false, + group = getGroup( mode, values, stepped ), + spread = generateSpread( density, mode, group ), + format = grid.format || { + to: Math.round + }; + + return scope_Target.appendChild(addMarking( + spread, + filter, + format + )); + } + + + // Shorthand for base dimensions. + function baseSize ( ) { + return scope_Base['offset' + ['Width', 'Height'][options.ort]]; + } + + // External event handling + function fireEvent ( event, handleNumber ) { + + if ( handleNumber !== undefined ) { + handleNumber = Math.abs(handleNumber - options.dir); + } + + Object.keys(scope_Events).forEach(function( targetEvent ) { + + var eventType = targetEvent.split('.')[0]; + + if ( event === eventType ) { + scope_Events[targetEvent].forEach(function( callback ) { + // .reverse is in place + // Return values as array, so arg_1[arg_2] is always valid. + callback( asArray(valueGet()), handleNumber, inSliderOrder(Array.prototype.slice.call(scope_Values)) ); + }); + } + }); + } + + // Returns the input array, respecting the slider direction configuration. + function inSliderOrder ( values ) { + + // If only one handle is used, return a single value. + if ( values.length === 1 ){ + return values[0]; + } + + if ( options.dir ) { + return values.reverse(); + } + + return values; + } + + + // Handler for attaching events trough a proxy. + function attach ( events, element, callback, data ) { + + // This function can be used to 'filter' events to the slider. + // element is a node, not a nodeList + + var method = function ( e ){ + + if ( scope_Target.hasAttribute('disabled') ) { + return false; + } + + // Stop if an active 'tap' transition is taking place. + if ( hasClass(scope_Target, Classes[14]) ) { + return false; + } + + e = fixEvent(e); + + // Ignore right or middle clicks on start #454 + if ( events === actions.start && e.buttons !== undefined && e.buttons > 1 ) { + return false; + } + + e.calcPoint = e.points[ options.ort ]; + + // Call the event handler with the event [ and additional data ]. + callback ( e, data ); + + }, methods = []; + + // Bind a closure on the target for every event type. + events.split(' ').forEach(function( eventName ){ + element.addEventListener(eventName, method, false); + methods.push([eventName, method]); + }); + + return methods; + } + + // Handle movement on document for handle and range drag. + function move ( event, data ) { + + var handles = data.handles || scope_Handles, positions, state = false, + proposal = ((event.calcPoint - data.start) * 100) / baseSize(), + handleNumber = handles[0] === scope_Handles[0] ? 0 : 1, i; + + // Calculate relative positions for the handles. + positions = getPositions( proposal, data.positions, handles.length > 1); + + state = setHandle ( handles[0], positions[handleNumber], handles.length === 1 ); + + if ( handles.length > 1 ) { + + state = setHandle ( handles[1], positions[handleNumber?0:1], false ) || state; + + if ( state ) { + // fire for both handles + for ( i = 0; i < data.handles.length; i++ ) { + fireEvent('slide', i); + } + } + } else if ( state ) { + // Fire for a single handle + fireEvent('slide', handleNumber); + } + } + + // Unbind move events on document, call callbacks. + function end ( event, data ) { + + // The handle is no longer active, so remove the class. + var active = scope_Base.getElementsByClassName(Classes[15]), + handleNumber = data.handles[0] === scope_Handles[0] ? 0 : 1; + + if ( active.length ) { + removeClass(active[0], Classes[15]); + } + + // Remove cursor styles and text-selection events bound to the body. + if ( event.cursor ) { + document.body.style.cursor = ''; + document.body.removeEventListener('selectstart', document.body.noUiListener); + } + + var d = document.documentElement; + + // Unbind the move and end events, which are added on 'start'. + d.noUiListeners.forEach(function( c ) { + d.removeEventListener(c[0], c[1]); + }); + + // Remove dragging class. + removeClass(scope_Target, Classes[12]); + + // Fire the change and set events. + fireEvent('set', handleNumber); + fireEvent('change', handleNumber); + } + + // Bind move events on document. + function start ( event, data ) { + + var d = document.documentElement; + + // Mark the handle as 'active' so it can be styled. + if ( data.handles.length === 1 ) { + addClass(data.handles[0].children[0], Classes[15]); + + // Support 'disabled' handles + if ( data.handles[0].hasAttribute('disabled') ) { + return false; + } + } + + // A drag should never propagate up to the 'tap' event. + event.stopPropagation(); + + // Attach the move and end events. + var moveEvent = attach(actions.move, d, move, { + start: event.calcPoint, + handles: data.handles, + positions: [ + scope_Locations[0], + scope_Locations[scope_Handles.length - 1] + ] + }), endEvent = attach(actions.end, d, end, { + handles: data.handles + }); + + d.noUiListeners = moveEvent.concat(endEvent); + + // Text selection isn't an issue on touch devices, + // so adding cursor styles can be skipped. + if ( event.cursor ) { + + // Prevent the 'I' cursor and extend the range-drag cursor. + document.body.style.cursor = getComputedStyle(event.target).cursor; + + // Mark the target with a dragging state. + if ( scope_Handles.length > 1 ) { + addClass(scope_Target, Classes[12]); + } + + var f = function(){ + return false; + }; + + document.body.noUiListener = f; + + // Prevent text selection when dragging the handles. + document.body.addEventListener('selectstart', f, false); + } + } + + // Move closest handle to tapped location. + function tap ( event ) { + + var location = event.calcPoint, total = 0, handleNumber, to; + + // The tap event shouldn't propagate up and cause 'edge' to run. + event.stopPropagation(); + + // Add up the handle offsets. + scope_Handles.forEach(function(a){ + total += offset(a)[ options.style ]; + }); + + // Find the handle closest to the tapped position. + handleNumber = ( location < total/2 || scope_Handles.length === 1 ) ? 0 : 1; + + location -= offset(scope_Base)[ options.style ]; + + // Calculate the new position. + to = ( location * 100 ) / baseSize(); + + if ( !options.events.snap ) { + // Flag the slider as it is now in a transitional state. + // Transition takes 300 ms, so re-enable the slider afterwards. + addClassFor( scope_Target, Classes[14], 300 ); + } + + // Support 'disabled' handles + if ( scope_Handles[handleNumber].hasAttribute('disabled') ) { + return false; + } + + // Find the closest handle and calculate the tapped point. + // The set handle to the new position. + setHandle( scope_Handles[handleNumber], to ); + + fireEvent('slide', handleNumber); + fireEvent('set', handleNumber); + fireEvent('change', handleNumber); + + if ( options.events.snap ) { + start(event, { handles: [scope_Handles[total]] }); + } + } + + // Attach events to several slider parts. + function events ( behaviour ) { + + var i, drag; + + // Attach the standard drag event to the handles. + if ( !behaviour.fixed ) { + + for ( i = 0; i < scope_Handles.length; i += 1 ) { + + // These events are only bound to the visual handle + // element, not the 'real' origin element. + attach ( actions.start, scope_Handles[i].children[0], start, { + handles: [ scope_Handles[i] ] + }); + } + } + + // Attach the tap event to the slider base. + if ( behaviour.tap ) { + + attach ( actions.start, scope_Base, tap, { + handles: scope_Handles + }); + } + + // Make the range dragable. + if ( behaviour.drag ){ + + drag = [scope_Base.getElementsByClassName( Classes[7] )[0]]; + addClass(drag[0], Classes[10]); + + // When the range is fixed, the entire range can + // be dragged by the handles. The handle in the first + // origin will propagate the start event upward, + // but it needs to be bound manually on the other. + if ( behaviour.fixed ) { + drag.push(scope_Handles[(drag[0] === scope_Handles[0] ? 1 : 0)].children[0]); + } + + drag.forEach(function( element ) { + attach ( actions.start, element, start, { + handles: scope_Handles + }); + }); + } + } + + + // Test suggested values and apply margin, step. + function setHandle ( handle, to, noLimitOption ) { + + var trigger = handle !== scope_Handles[0] ? 1 : 0, + lowerMargin = scope_Locations[0] + options.margin, + upperMargin = scope_Locations[1] - options.margin, + lowerLimit = scope_Locations[0] + options.limit, + upperLimit = scope_Locations[1] - options.limit; + + // For sliders with multiple handles, + // limit movement to the other handle. + // Apply the margin option by adding it to the handle positions. + if ( scope_Handles.length > 1 ) { + to = trigger ? Math.max( to, lowerMargin ) : Math.min( to, upperMargin ); + } + + // The limit option has the opposite effect, limiting handles to a + // maximum distance from another. Limit must be > 0, as otherwise + // handles would be unmoveable. 'noLimitOption' is set to 'false' + // for the .val() method, except for pass 4/4. + if ( noLimitOption !== false && options.limit && scope_Handles.length > 1 ) { + to = trigger ? Math.min ( to, lowerLimit ) : Math.max( to, upperLimit ); + } + + // Handle the step option. + to = scope_Spectrum.getStep( to ); + + // Limit to 0/100 for .val input, trim anything beyond 7 digits, as + // JavaScript has some issues in its floating point implementation. + to = limit(parseFloat(to.toFixed(7))); + + // Return false if handle can't move. + if ( to === scope_Locations[trigger] ) { + return false; + } + + // Set the handle to the new position. + handle.style[options.style] = to + '%'; + + // Force proper handle stacking + if ( !handle.previousSibling ) { + removeClass(handle, Classes[17]); + if ( to > 50 ) { + addClass(handle, Classes[17]); + } + } + + // Update locations. + scope_Locations[trigger] = to; + + // Convert the value to the slider stepping/range. + scope_Values[trigger] = scope_Spectrum.fromStepping( to ); + + fireEvent('update', trigger); + + return true; + } + + // Loop values from value method and apply them. + function setValues ( count, values ) { + + var i, trigger, to; + + // With the limit option, we'll need another limiting pass. + if ( options.limit ) { + count += 1; + } + + // If there are multiple handles to be set run the setting + // mechanism twice for the first handle, to make sure it + // can be bounced of the second one properly. + for ( i = 0; i < count; i += 1 ) { + + trigger = i%2; + + // Get the current argument from the array. + to = values[trigger]; + + // Setting with null indicates an 'ignore'. + // Inputting 'false' is invalid. + if ( to !== null && to !== false ) { + + // If a formatted number was passed, attemt to decode it. + if ( typeof to === 'number' ) { + to = String(to); + } + + to = options.format.from( to ); + + // Request an update for all links if the value was invalid. + // Do so too if setting the handle fails. + if ( to === false || isNaN(to) || setHandle( scope_Handles[trigger], scope_Spectrum.toStepping( to ), i === (3 - options.dir) ) === false ) { + fireEvent('update', trigger); + } + } + } + } + + // Set the slider value. + function valueSet ( input ) { + + var count, values = asArray( input ), i; + + // The RTL settings is implemented by reversing the front-end, + // internal mechanisms are the same. + if ( options.dir && options.handles > 1 ) { + values.reverse(); + } + + // Animation is optional. + // Make sure the initial values where set before using animated placement. + if ( options.animate && scope_Locations[0] !== -1 ) { + addClassFor( scope_Target, Classes[14], 300 ); + } + + // Determine how often to set the handles. + count = scope_Handles.length > 1 ? 3 : 1; + + if ( values.length === 1 ) { + count = 1; + } + + setValues ( count, values ); + + // Fire the 'set' event for both handles. + for ( i = 0; i < scope_Handles.length; i++ ) { + fireEvent('set', i); + } + } + + // Get the slider value. + function valueGet ( ) { + + var i, retour = []; + + // Get the value from all handles. + for ( i = 0; i < options.handles; i += 1 ){ + retour[i] = options.format.to( scope_Values[i] ); + } + + return inSliderOrder( retour ); + } + + // Removes classes from the root and empties it. + function destroy ( ) { + Classes.forEach(function(cls){ + if ( !cls ) { return; } // Ignore empty classes + removeClass(scope_Target, cls); + }); + scope_Target.innerHTML = ''; + delete scope_Target.noUiSlider; + } + + // Get the current step size for the slider. + function getCurrentStep ( ) { + + // Check all locations, map them to their stepping point. + // Get the step point, then find it in the input list. + var retour = scope_Locations.map(function( location, index ){ + + var step = scope_Spectrum.getApplicableStep( location ), + + // As per #391, the comparison for the decrement step can have some rounding issues. + // Round the value to the precision used in the step. + stepDecimals = countDecimals(String(step[2])), + + // Get the current numeric value + value = scope_Values[index], + + // To move the slider 'one step up', the current step value needs to be added. + // Use null if we are at the maximum slider value. + increment = location === 100 ? null : step[2], + + // Going 'one step down' might put the slider in a different sub-range, so we + // need to switch between the current or the previous step. + prev = Number((value - step[2]).toFixed(stepDecimals)), + + // If the value fits the step, return the current step value. Otherwise, use the + // previous step. Return null if the slider is at its minimum value. + decrement = location === 0 ? null : (prev >= step[1]) ? step[2] : (step[0] || false); + + return [decrement, increment]; + }); + + // Return values in the proper order. + return inSliderOrder( retour ); + } + + // Attach an event to this slider, possibly including a namespace + function bindEvent ( namespacedEvent, callback ) { + scope_Events[namespacedEvent] = scope_Events[namespacedEvent] || []; + scope_Events[namespacedEvent].push(callback); + + // If the event bound is 'update,' fire it immediately for all handles. + if ( namespacedEvent.split('.')[0] === 'update' ) { + scope_Handles.forEach(function(a, index){ + fireEvent('update', index); + }); + } + } + + // Undo attachment of event + function removeEvent ( namespacedEvent ) { + + var event = namespacedEvent.split('.')[0], + namespace = namespacedEvent.substring(event.length); + + Object.keys(scope_Events).forEach(function( bind ){ + + var tEvent = bind.split('.')[0], + tNamespace = bind.substring(tEvent.length); + + if ( (!event || event === tEvent) && (!namespace || namespace === tNamespace) ) { + delete scope_Events[bind]; + } + }); + } + + + // Throw an error if the slider was already initialized. + if ( scope_Target.noUiSlider ) { + throw new Error('Slider was already initialized.'); + } + + + // Create the base element, initialise HTML and set classes. + // Add handles and links. + scope_Base = addSlider( options.dir, options.ort, scope_Target ); + scope_Handles = addHandles( options.handles, options.dir, scope_Base ); + + // Set the connect classes. + addConnection ( options.connect, scope_Target, scope_Handles ); + + // Attach user events. + events( options.events ); + + if ( options.pips ) { + pips(options.pips); + } + + return { + destroy: destroy, + steps: getCurrentStep, + on: bindEvent, + off: removeEvent, + get: valueGet, + set: valueSet + }; + +} + + + // Run the standard initializer + function initialize ( target, originalOptions ) { + + if ( !target.nodeName ) { + throw new Error('noUiSlider.create requires a single element.'); + } + + // Test the options and create the slider environment; + var options = testOptions( originalOptions, target ), + slider = closure( target, options ); + + // Use the public value method to set the start values. + slider.set(options.start); + + target.noUiSlider = slider; + } + + // Use an object instead of a function for future expansibility; + return { + create: initialize + }; + +})); \ No newline at end of file diff --git a/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.pips.css b/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.pips.css new file mode 100644 index 00000000..d1a93971 --- /dev/null +++ b/wqflask/wqflask/static/new/packages/noUiSlider/nouislider.pips.css @@ -0,0 +1,98 @@ + +/* Base; + * + */ +.noUi-pips, +.noUi-pips * { +-moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-pips { + position: absolute; + font: 400 12px Arial; + color: #999; +} + +/* Values; + * + */ +.noUi-value { + width: 40px; + position: absolute; + text-align: center; +} +.noUi-value-sub { + color: #ccc; + font-size: 10px; +} + +/* Markings; + * + */ +.noUi-marker { + position: absolute; + background: #CCC; +} +.noUi-marker-sub { + background: #AAA; +} +.noUi-marker-large { + background: #AAA; +} + +/* Horizontal layout; + * + */ +.noUi-pips-horizontal { + padding: 10px 0; + height: 50px; + top: 100%; + left: 0; + width: 100%; +} +.noUi-value-horizontal { + margin-left: -20px; + padding-top: 20px; +} +.noUi-value-horizontal.noUi-value-sub { + padding-top: 15px; +} + +.noUi-marker-horizontal.noUi-marker { + margin-left: -1px; + width: 2px; + height: 5px; +} +.noUi-marker-horizontal.noUi-marker-sub { + height: 10px; +} +.noUi-marker-horizontal.noUi-marker-large { + height: 15px; +} + +/* Vertical layout; + * + */ +.noUi-pips-vertical { + padding: 0 10px; + height: 100%; + top: 0; + left: 100%; +} +.noUi-value-vertical { + width: 15px; + margin-left: 20px; + margin-top: -5px; +} + +.noUi-marker-vertical.noUi-marker { + width: 5px; + height: 2px; + margin-top: -1px; +} +.noUi-marker-vertical.noUi-marker-sub { + width: 10px; +} +.noUi-marker-vertical.noUi-marker-large { + width: 15px; +} -- cgit v1.2.3