From 128b0008eef797050cf5146fb1dd69505c4439d4 Mon Sep 17 00:00:00 2001 From: Stefan Parviainen Date: Mon, 5 Jan 2015 18:30:12 +0100 Subject: Replace jslider with jRange --- library/jRange/.gitignore | 2 + library/jRange/LICENSE | 21 ++ library/jRange/README.md | 5 + library/jRange/demo/index.html | 245 +++++++++++++++++++++ library/jRange/demo/main.css | 289 ++++++++++++++++++++++++ library/jRange/demo/main.less | 296 +++++++++++++++++++++++++ library/jRange/demo/normalize.css | 425 ++++++++++++++++++++++++++++++++++++ library/jRange/demo/prism/prism.css | 193 ++++++++++++++++ library/jRange/demo/prism/prism.js | 8 + library/jRange/jquery.range-min.js | 1 + library/jRange/jquery.range.css | 168 ++++++++++++++ library/jRange/jquery.range.js | 297 +++++++++++++++++++++++++ library/jRange/jquery.range.less | 192 ++++++++++++++++ 13 files changed, 2142 insertions(+) create mode 100644 library/jRange/.gitignore create mode 100644 library/jRange/LICENSE create mode 100644 library/jRange/README.md create mode 100644 library/jRange/demo/index.html create mode 100644 library/jRange/demo/main.css create mode 100644 library/jRange/demo/main.less create mode 100644 library/jRange/demo/normalize.css create mode 100644 library/jRange/demo/prism/prism.css create mode 100644 library/jRange/demo/prism/prism.js create mode 100644 library/jRange/jquery.range-min.js create mode 100644 library/jRange/jquery.range.css create mode 100644 library/jRange/jquery.range.js create mode 100644 library/jRange/jquery.range.less (limited to 'library/jRange') diff --git a/library/jRange/.gitignore b/library/jRange/.gitignore new file mode 100644 index 000000000..089ae868a --- /dev/null +++ b/library/jRange/.gitignore @@ -0,0 +1,2 @@ + +*.codekit diff --git a/library/jRange/LICENSE b/library/jRange/LICENSE new file mode 100644 index 000000000..8f47b9a63 --- /dev/null +++ b/library/jRange/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Nitin Hayaran + +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. \ No newline at end of file diff --git a/library/jRange/README.md b/library/jRange/README.md new file mode 100644 index 000000000..5cbfe6aa8 --- /dev/null +++ b/library/jRange/README.md @@ -0,0 +1,5 @@ +## jQuery plugin to create Range Selector + +![jRange Preview](http://i.imgur.com/da8uZwx.png) + +[Demo and Documentation](http://nitinhayaran.github.io/jRange/demo/) \ No newline at end of file diff --git a/library/jRange/demo/index.html b/library/jRange/demo/index.html new file mode 100644 index 000000000..ac443f11f --- /dev/null +++ b/library/jRange/demo/index.html @@ -0,0 +1,245 @@ + + + + + jRange : jQuery Range Selector + + + + + + + + +
+
+

jRange

+

jQuery Plugin to create Range Selector

+
+
+
+ + + +
+
+ + + +
+
+
+
+
+

See it in Action

+

Play around with the demo

+
+
+
+ 
$('.single-slider').jRange({
+    from: 0,
+    to: 100,
+    step: 1,
+    scale: [0,50,100],
+    format: '%s',
+    width: 300,
+    showLabels: true
+});
+
+
+ +
+
+
+
+ 
$('.range-slider').jRange({
+    from: 0,
+    to: 100,
+    step: 1,
+    scale: [0,25,50,75,100],
+    format: '%s',
+    width: 300,
+    showLabels: true,
+    isRange : true
+});
+
+
+ +
+
+ + +
+
+

How to Use

+

Lets see some code

+

To get started you'll have to include jquery.range.js and jquery.range.css files in your html file.

+ 
<link rel="stylesheet" href="jquery.range.css">
+<script src="jquery.range.js"></script>
+

Later just add an hidden input, where ever you want this slider to be shown.

+ 
<input type="hidden" class="slider-input" value="23" />
+

After this you'll have to intialize this plugin for that input, as shown in the example above

+ +

Options

+

See configuration options

+

Options can also be set programatically, by passing an options hash to the jRange method. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionOverrideTypeDetails
fromMandatoryIntegerLower bound of slider
toMandatoryIntegerUpper bound of slider
stepOptionalInteger + Default : 1 +

amount of increment on each step

+
scaleOptionalArray +

Array containing label which are shown below the slider. By default its [from, to].

+
showLabelsOptionalBoolean +

False, if you'd like to hide label which are shown on top of slider.

+ Default : true +
showScaleOptionalBoolean +

False, if you'd like to hide scale which are shown below the slider.

+ Default : true +
formatOptionalString / Function +

this is used to show label on the pointer

+ Default : "%s" +

String : %s is replaced by its value, e.g., "%s days", "%s goats"

+

+ Function : format(value, pointer) +
+ return : string label for a given value and pointer.
+ pointer could be 'low'/'high' if isRange is true, else undefined +

+
widthOptionalInteger + Default : 300 +
themeOptionalString + Default : "theme-green" +

This is the css class name added to the container. Available themes are "theme-blue", "theme-green". You can also add more themes, just like in jquery.range.less

+
isRangeOptionalBoolean + Default : false +

True if this is a range selector. If its a range the value of hidden input will be set comma-seperated, e.g., "25,75"

+
onstatechangeOptionalFunction +

This function is called whenever the value is changed by user. This same value is also automatically set for the provided Hidden Input.

+

For single slider value is without comma, however for a range selector value is comma-seperated.

+
+ +

+ Get it from Github +
+
+
+
+
+
+
+

+ + +

+

+
+
+

jRange is authored and maintained by @nitinhayaran

+

+ Released under the MIT + License +

+
+
+
+ + + + + + \ No newline at end of file diff --git a/library/jRange/demo/main.css b/library/jRange/demo/main.css new file mode 100644 index 000000000..1e29a98af --- /dev/null +++ b/library/jRange/demo/main.css @@ -0,0 +1,289 @@ +html, +body { + height: 100%; + width: 100%; +} +body { + font-family: Helvetica Neue, Helvetica, Arial sans-serif; + font-size: 16px; + line-height: 1.6; + color: #434343; +} +a { + text-decoration: none; +} +pre code { + line-height: 1.5; +} +.container { + width: 1130px; + padding: 0 20px; + margin: 0px auto; +} +.text-container { + width: 900px; + position: relative; + margin: 0px auto; +} +.clearfix:after { + content: " "; + /* Older browser do not support empty content */ + visibility: hidden; + display: block; + height: 0; + clear: both; +} +.pane { + position: relative; + width: 100%; + height: 50%; + min-height: 450px; +} +.body { + position: relative; +} +section.header { + background-color: #606c88; + background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); + /* Chrome 10+, Saf5.1+ */ + background: -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); + /* FF3.6+ */ + background: -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); + /* IE10 */ + background: -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); + /* Opera 11.10+ */ + background: linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); + /* W3C */ +} +section.header footer { + position: absolute; + width: 100%; + bottom: 0; + padding: 10px 30px; + box-sizing: border-box; +} +.left { + float: left; + text-align: left; +} +.right { + float: right; + text-align: right; +} +div.header { + color: #fff; + width: 600px; + text-align: center; + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 5px; +} +div.header h1, +div.header h2 { + font-family: 'Raleway' sans-serif; + font-weight: 100; + line-height: 1; + margin: 0; +} +div.header h1 { + font-size: 72px; + margin-bottom: 25px; +} +section.demo h2, +section.demo h3 { + font-family: 'Raleway' sans-serif; + font-weight: 300; + line-height: 1; + margin: 0; + text-align: center; +} +section.demo h2 { + font-size: 48px; + margin-top: 1em; +} +section.demo h3 { + font-size: 28px; + margin: 0.8em 0 1em; +} +section.demo .demo-container { + margin: 40px 0 80px; +} +section.demo .demo-section { + margin: 20px 0; + clear: both; +} +section.demo .demo-section .demo-code { + width: 50%; + float: left; +} +section.demo .demo-section .demo-output { + margin-left: 50%; + padding: 50px 0; +} +section.demo .demo-section .slider-container { + margin: 0 auto; +} +section.demo .text-container h2 { + margin-top: 3em; +} +section.demo .form-vertical { + width: 200px; + float: left; +} +section.demo .image-container { + margin-left: 200px; + padding: 1px; + border: 1px solid #eee; +} +section.demo .form-group { + margin-bottom: 20px; +} +section.demo label { + color: #999; + font-size: 13px; + display: block; +} +section.demo input { + width: 150px; + margin-top: 3px; + border: 1px solid #999; + border-width: 0 0 1px 0; + padding: 3px 0 3px; + transition: 0.3s all; +} +section.demo input:focus, +section.demo input:active { + outline: none; + border-color: #2fc7ff; + box-shadow: 0 1px 3px -3px #2fc7ff; + color: #000; +} +section.demo button { + position: relative; + overflow: visible; + display: inline-block; + padding: 0.3em 1em; + border: 1px solid #d4d4d4; + margin: 0; + text-decoration: none; + text-align: center; + text-shadow: 1px 1px 0 #fff; + font-size: 12px; + color: #333; + white-space: nowrap; + cursor: pointer; + outline: none; + background-color: #ececec; + background-image: linear-gradient(#f4f4f4, #ececec); + background-clip: padding-box; + border-radius: 0.2em; + zoom: 1; + transition: background-image 0.3s; +} +section.demo button:hover, +section.demo button:active { + border-color: #3072b3; + border-bottom-color: #2a65a0; + text-decoration: none; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); + color: #fff; + background-color: #3c8dde; + background-image: linear-gradient(#599bdc, #3072b3); +} +section.demo p { + font-family: 'Raleway' sans-serif; + margin: 1em auto; +} +section.demo .footer { + margin-top: 80px; + text-align: center; +} +section.demo .large-github { + display: inline-block; + border: 1px solid #21b0ff; + font-weight: 400; + font-family: 'Raleway' sans-serif; + text-shadow: none; + background-color: #fff; + background-image: none; + padding: 8px 25px; + color: #21b0ff; + font-size: 18px; + border-radius: 25px; +} +section.demo .large-github:hover, +section.demo .large-github:active { + background-color: #21b0ff; + color: #fff; + background-image: none; + text-shadow: none; +} +.two-coloumn em { + font-weight: normal; + text-decoration: none; + font-style: normal; + display: inline-block; + width: 85px; +} +.plugin-options { + font-size: 14px; + margin-bottom: 40px; + width: 900px; + font-weight: 200; +} +.plugin-options td, +.plugin-options th { + padding: 8px ; + text-align: left; + vertical-align: top; +} +.plugin-options td:first-child, +.plugin-options th:first-child { + font-weight: bold; +} +.plugin-options td:nth-child(2), +.plugin-options td:nth-child(3) { + font-size: 13px; + color: #999; +} +.plugin-options td p { + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + margin: 4px 0; +} +.plugin-options td p:first-child { + margin-top: 0; +} +.plugin-options th { + background-color: #358ccb; + color: #fff; +} +.plugin-options tr:nth-child(2n + 1) td { + background-color: #f5f5f5; +} +.plugin-options small { + display: block; +} +.plugin-options ul { + list-style: none; + padding: 0; +} +.plugin-options ul ul { + list-style: circle inside; +} +section.footer { + margin-top: 80px; + padding: 30px; + text-align: center; + background-color: #333; + color: #999; + font-weight: 300; + font-size: 13px; +} +section.footer p { + margin: 5px 0; +} +section.footer a { + color: #fff; +} diff --git a/library/jRange/demo/main.less b/library/jRange/demo/main.less new file mode 100644 index 000000000..e9ee232a1 --- /dev/null +++ b/library/jRange/demo/main.less @@ -0,0 +1,296 @@ +@font-family: 'Raleway' sans-serif; +html, body{ + height: 100%; + width: 100%; +} +body{ + font-family: Helvetica Neue, Helvetica, Arial sans-serif; + font-size: 16px; + line-height: 1.6; + color: #434343; +} +a{ + text-decoration: none; +} +pre code{ + line-height: 1.5; +} +.container{ + width: 1130px; + padding: 0 20px; + margin: 0px auto; +} +.text-container{ + width: 900px; + position: relative; + margin: 0px auto; +} +.clearfix:after { + content: " "; /* Older browser do not support empty content */ + visibility: hidden; + display: block; + height: 0; + clear: both; +} +.pane{ + position: relative; + width: 100%; + height: 50%; + min-height: 450px; +} +.body{ + position: relative; +} +section.header{ + background-color: #606c88; + + background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Chrome 10+, Saf5.1+ */ + background: -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* FF3.6+ */ + background: -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* IE10 */ + background: -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Opera 11.10+ */ + background: linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* W3C */ + + // background-image: radial-gradient(50% 102%, #3cb3db 48%, #2e6c9a 100%); + footer{ + position: absolute; + width: 100%; + bottom: 0; + padding: 10px 30px; + box-sizing: border-box; + } +} +.left{ + float: left; + text-align: left; +} +.right{ + float: right; + text-align: right; +} +div.header{ + color: #fff; + width: 600px; + text-align: center; + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + // background-color: #333; + border-radius: 5px; + h1, h2{ + font-family: @font-family; + font-weight: 100; + line-height: 1; + margin: 0; + } + h1{ + font-size: 72px; + margin-bottom: 25px; + } +} +section.demo{ + h2, h3{ + font-family: @font-family; + font-weight: 300; + line-height: 1; + margin: 0; + text-align: center; + } + h2{ + font-size: 48px; + margin-top: 1em; + } + h3{ + font-size: 28px; + margin: 0.8em 0 1em; + } + .demo-container{ + margin: 40px 0 80px; + } + .demo-section{ + margin: 20px 0; + clear: both; + .demo-code{ + width: 50%; + float: left; + } + .demo-output{ + margin-left: 50%; + padding: 50px 0; + } + .slider-container{ + margin: 0 auto; + } + } + .text-container{ + h2{ + margin-top: 3em; + } + } + .form-vertical{ + width: 200px; + float: left; + } + .image-container{ + margin-left: 200px; + padding: 1px; + border: 1px solid #eee; + // background-color: #333; + } + .form-group{ + margin-bottom: 20px; + } + label{ + color: #999; + font-size: 13px; + display: block; + } + input{ + width: 150px; + margin-top: 3px; + // border-radius: 2px; + border: 1px solid #999; + border-width: 0 0 1px 0; + padding: 3px 0 3px; + transition: 0.3s all; + // color: #999; + &:focus, &:active{ + outline: none; + border-color: #2fc7ff; + box-shadow: 0 1px 3px -3px #2fc7ff; + color: #000; + } + } + button{ + position: relative; + overflow: visible; + display: inline-block; + padding: 0.3em 1em; + border: 1px solid #d4d4d4; + margin: 0; + text-decoration: none; + text-align: center; + text-shadow: 1px 1px 0 #fff; + font-size: 12px; + color: #333; + white-space: nowrap; + cursor: pointer; + outline: none; + background-color: #ececec; + background-image: linear-gradient(#f4f4f4, #ececec); + background-clip: padding-box; + border-radius: 0.2em; + zoom: 1; + transition: background-image 0.3s; + &:hover, &:active{ + border-color: #3072b3; + border-bottom-color: #2a65a0; + text-decoration: none; + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); + color: #fff; + background-color: #3c8dde; + background-image: linear-gradient(#599bdc, #3072b3); + } + } + p{ + font-family: @font-family; + margin: 1em auto; + } + .footer{ + margin-top: 80px; + text-align: center; + } + .large-github{ + display: inline-block; + border: 1px solid #21b0ff; + font-weight: 400; + font-family: @font-family; + text-shadow: none; + background-color: #fff; + background-image: none; + padding: 8px 25px; + color: #21b0ff; + font-size: 18px; + border-radius: 25px; + &:hover, &:active{ + background-color: #21b0ff; + color: #fff; + background-image: none; + text-shadow: none; + } + } +} +.two-coloumn{ + em{ + font-weight: normal; + text-decoration: none; + font-style: normal; + display: inline-block; + width: 85px; + } +} +.plugin-options{ + font-size: 14px; + margin-bottom: 40px; + width: 900px; + font-weight: 200; + td, th{ + padding: 8px ; + text-align: left; + vertical-align: top; + &:first-child{ + font-weight: bold; + } + } + td{ + &:nth-child(2), &:nth-child(3){ + font-size: 13px; + color: #999; + } + p{ + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + margin: 4px 0; + &:first-child{ + margin-top: 0; + } + } + } + th{ + background-color: #358ccb; + color: #fff; + } + tr{ + &:nth-child(2n + 1){ + td{ + background-color: #f5f5f5; + } + } + } + small{ + display: block; + // white-space: nowrap; + } + ul{ + list-style: none; + padding: 0; + ul{ + list-style: circle inside; + // padding-left: 25px; + } + } +} +section.footer{ + margin-top: 80px; + padding: 30px; + text-align: center; + background-color: #333; + color: #999; + font-weight: 300; + font-size: 13px; + p{ + margin: 5px 0; + } + a{ + color: #fff; + } +} \ No newline at end of file diff --git a/library/jRange/demo/normalize.css b/library/jRange/demo/normalize.css new file mode 100644 index 000000000..08f895079 --- /dev/null +++ b/library/jRange/demo/normalize.css @@ -0,0 +1,425 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/library/jRange/demo/prism/prism.css b/library/jRange/demo/prism/prism.css new file mode 100644 index 000000000..afc94b354 --- /dev/null +++ b/library/jRange/demo/prism/prism.css @@ -0,0 +1,193 @@ +/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript */ +/** + * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics); + * @author Tim Shedor + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + position:relative; + padding: 1em; + margin: .5em 0; + -webkit-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; + -moz-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; + box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; + border-left: 10px solid #358ccb; + background-color: #fdfdfd; + background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); + background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); + background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); + background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); + background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); + background-size: 3em 3em; + background-origin:content-box; + overflow:visible; + max-height:30em; +} + +code[class*="language"] { + max-height:29em; + display:block; + overflow:scroll; +} + +/* Margin bottom to accomodate shadow */ +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background-color:#fdfdfd; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-bottom: 1em; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + position:relative; + padding: .2em; + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + -ms-border-radius: 0.3em; + -o-border-radius: 0.3em; + border-radius: 0.3em; + color: #c92c2c; + border: 1px solid rgba(0, 0, 0, 0.1); +} + +pre[class*="language-"]:before, +pre[class*="language-"]:after { + content: ''; + z-index: -2; + display:block; + position: absolute; + bottom: 0.75em; + left: 0.18em; + width: 40%; + height: 20%; + -webkit-box-shadow: 0px 13px 8px #979797; + -moz-box-shadow: 0px 13px 8px #979797; + box-shadow: 0px 13px 8px #979797; + -webkit-transform: rotate(-2deg); + -moz-transform: rotate(-2deg); + -ms-transform: rotate(-2deg); + -o-transform: rotate(-2deg); + transform: rotate(-2deg); +} + +:not(pre) > code[class*="language-"]:after, +pre[class*="language-"]:after { + right: 0.75em; + left: auto; + -webkit-transform: rotate(2deg); + -moz-transform: rotate(2deg); + -ms-transform: rotate(2deg); + -o-transform: rotate(2deg); + transform: rotate(2deg); +} + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #7D8B99; +} + +.token.punctuation { + color: #5F6364; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.function-name, +.token.constant, +.token.symbol { + color: #c92c2c; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.function, +.token.builtin { + color: #2f9c0a; +} + +.token.operator, +.token.entity, +.token.url, +.token.variable { + color: #a67f59; + background: rgba(255, 255, 255, 0.5); +} + +.token.atrule, +.token.attr-value, +.token.keyword, +.token.class-name { + color: #1990b8; +} + +.token.regex, +.token.important { + color: #e90; +} +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: rgba(255, 255, 255, 0.5); +} + +.token.important { + font-weight: normal; +} + +.token.entity { + cursor: help; +} + +.namespace { + opacity: .7; +} + +@media screen and (max-width:767px){ + pre[class*="language-"]:before, + pre[class*="language-"]:after { + bottom:14px; + -webkit-box-shadow:none; + -moz-box-shadow:none; + box-shadow:none; + } + +} + +/* Plugin styles */ +.token.tab:not(:empty):before, +.token.cr:before, +.token.lf:before { + color: #e0d7d1; +} + diff --git a/library/jRange/demo/prism/prism.js b/library/jRange/demo/prism/prism.js new file mode 100644 index 000000000..dace66766 --- /dev/null +++ b/library/jRange/demo/prism/prism.js @@ -0,0 +1,8 @@ +/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript */ +var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);; +Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; +Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; +Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});; +Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; +Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}); +; diff --git a/library/jRange/jquery.range-min.js b/library/jRange/jquery.range-min.js new file mode 100644 index 000000000..8aa6e7ecb --- /dev/null +++ b/library/jRange/jquery.range-min.js @@ -0,0 +1 @@ +!function($,t,i,s){"use strict";var o=function(){return this.init.apply(this,arguments)};o.prototype={defaults:{onstatechange:function(){},isRange:!1,showLabels:!0,showScale:!0,step:1,format:"%s",theme:"theme-green",width:300},template:'
123456
456789
',init:function(t,i){this.options=$.extend({},this.defaults,i),this.inputNode=$(t),this.options.value=this.inputNode.val()||(this.options.isRange?this.options.from+","+this.options.from:this.options.from),this.domNode=$(this.template),this.domNode.addClass(this.options.theme),this.inputNode.after(this.domNode),this.domNode.on("change",this.onChange),this.pointers=$(".pointer",this.domNode),this.lowPointer=this.pointers.first(),this.highPointer=this.pointers.last(),this.labels=$(".pointer-label",this.domNode),this.lowLabel=this.labels.first(),this.highLabel=this.labels.last(),this.scale=$(".scale",this.domNode),this.bar=$(".selected-bar",this.domNode),this.clickableBar=this.domNode.find(".clickable-dummy"),this.interval=this.options.to-this.options.from,this.render()},render:function(){return 0!==this.inputNode.width()||this.options.width?(this.domNode.width(this.options.width||this.inputNode.width()),this.inputNode.hide(),this.isSingle()&&(this.lowPointer.hide(),this.lowLabel.hide()),this.options.showLabels||this.labels.hide(),this.attachEvents(),this.options.showScale&&this.renderScale(),void this.setValue(this.options.value)):void console.log("jRange : no width found, returning")},isSingle:function(){return"number"==typeof this.options.value?!0:-1!==this.options.value.indexOf(",")||this.options.isRange?!1:!0},attachEvents:function(){this.clickableBar.click($.proxy(this.barClicked,this)),this.pointers.mousedown($.proxy(this.onDragStart,this)),this.pointers.bind("dragstart",function(t){t.preventDefault()})},onDragStart:function(t){if(1===t.which){t.stopPropagation(),t.preventDefault();var s=$(t.target);s.addClass("focused"),this[(s.hasClass("low")?"low":"high")+"Label"].addClass("focused"),$(i).on("mousemove.slider",$.proxy(this.onDrag,this,s)),$(i).on("mouseup.slider",$.proxy(this.onDragEnd,this))}},onDrag:function(t,i){i.stopPropagation(),i.preventDefault();var s=i.clientX-this.domNode.offset().left;this.domNode.trigger("change",[this,t,s])},onDragEnd:function(){this.pointers.removeClass("focused"),this.labels.removeClass("focused"),$(i).off(".slider"),$(i).off(".slider")},barClicked:function(t){var i=t.pageX-this.clickableBar.offset().left;if(this.isSingle())this.setPosition(this.pointers.last(),i,!0,!0);else{var s=Math.abs(parseInt(this.pointers.first().css("left"),10)-i+this.pointers.first().width()/2)'+("|"!=t[o]?""+t[o]+"":"")+"";this.scale.html(s),$("ins",this.scale).each(function(){$(this).css({marginLeft:-$(this).outerWidth()/2})})},getBarWidth:function(){var t=this.options.value.split(",");return t.length>1?parseInt(t[1],10)-parseInt(t[0],10):parseInt(t[0],10)},showPointerValue:function(t,i,o){var e=$(".pointer-label",this.domNode)[t.hasClass("low")?"first":"last"](),n,h=this.positionToValue(i);if($.isFunction(this.options.format)){var a=this.isSingle()?s:t.hasClass("low")?"low":"high";n=this.options.format(h,a)}else n=this.options.format.replace("%s",h);var r=e.html(n).width(),l=i-r/2;l=Math.min(Math.max(l,0),this.options.width-r),e[o?"animate":"css"]({left:l}),this.setInputValue(t,h)},valuesToPrc:function(t){var i=100*(t[0]-this.options.from)/this.interval,s=100*(t[1]-this.options.from)/this.interval;return[i,s]},prcToPx:function(t){return this.domNode.width()*t/100},positionToValue:function(t){var i=t/this.domNode.width()*this.interval;return i+=this.options.from,Math.round(i/this.options.step)*this.options.step},setInputValue:function(t,i){if(this.isSingle())this.options.value=i.toString();else{var s=this.options.value.split(",");this.options.value=t.hasClass("low")?i+","+s[1]:s[0]+","+i}this.inputNode.val()!==this.options.value&&(this.inputNode.val(this.options.value),this.options.onstatechange.call(this,this.options.value))},getValue:function(){return this.options.value}};var e="jRange";$.fn[e]=function(t){var i=arguments,s;return this.each(function(){var n=$(this),h=$.data(this,"plugin_"+e),a="object"==typeof t&&t;h||n.data("plugin_"+e,h=new o(this,a)),"string"==typeof t&&(s=h[t].apply(h,Array.prototype.slice.call(i,1)))}),s||this}}(jQuery,window,document); \ No newline at end of file diff --git a/library/jRange/jquery.range.css b/library/jRange/jquery.range.css new file mode 100644 index 000000000..27375c846 --- /dev/null +++ b/library/jRange/jquery.range.css @@ -0,0 +1,168 @@ +.slider-container { + width: 300px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.slider-container .back-bar { + height: 10px; + position: relative; +} +.slider-container .back-bar .selected-bar { + position: absolute; + height: 100%; +} +.slider-container .back-bar .pointer { + position: absolute; + width: 10px; + height: 10px; + background-color: red; + cursor: move; + opacity: 1; + z-index: 2; +} +.slider-container .back-bar .pointer-label { + position: absolute; + top: -17px; + font-size: 8px; + background: white; + white-space: nowrap; + line-height: 1; +} +.slider-container .back-bar .focused { + z-index: 10; +} +.slider-container .clickable-dummy { + cursor: pointer; + position: absolute; + width: 100%; + height: 100%; + z-index: 1; +} +.slider-container .scale { + top: 2px; + position: relative; +} +.slider-container .scale span { + position: absolute; + height: 5px; + border-left: 1px solid #999; + font-size: 0; +} +.slider-container .scale ins { + font-size: 9px; + text-decoration: none; + position: absolute; + left: 0; + top: 5px; + color: #999; + line-height: 1; +} +.theme-green .back-bar { + height: 5px; + border-radius: 2px; + background-color: #eeeeee; + background-color: #e7e7e7; + background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); + background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); + background-image: -o-linear-gradient(top, #eeeeee, #dddddd); + background-image: linear-gradient(to bottom, #eeeeee, #dddddd); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); +} +.theme-green .back-bar .selected-bar { + border-radius: 2px; + background-color: #a1fad0; + background-image: -moz-linear-gradient(top, #bdfade, #76fabc); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc)); + background-image: -webkit-linear-gradient(top, #bdfade, #76fabc); + background-image: -o-linear-gradient(top, #bdfade, #76fabc); + background-image: linear-gradient(to bottom, #bdfade, #76fabc); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0); +} +.theme-green .back-bar .pointer { + width: 14px; + height: 14px; + top: -5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 10px; + border: 1px solid #AAA; + background-color: #e7e7e7; + background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); + background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); + background-image: -o-linear-gradient(top, #eeeeee, #dddddd); + background-image: linear-gradient(to bottom, #eeeeee, #dddddd); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); + cursor: col-resize; +} +.theme-green .back-bar .pointer-label { + color: #999; +} +.theme-green .back-bar .focused { + color: #333; +} +.theme-green .scale span { + border-left: 1px solid #e5e5e5; +} +.theme-green .scale ins { + color: #999; +} +.theme-blue .back-bar { + height: 5px; + border-radius: 2px; + background-color: #eeeeee; + background-color: #e7e7e7; + background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); + background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); + background-image: -o-linear-gradient(top, #eeeeee, #dddddd); + background-image: linear-gradient(to bottom, #eeeeee, #dddddd); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); +} +.theme-blue .back-bar .selected-bar { + border-radius: 2px; + background-color: #92c1f9; + background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9)); + background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9); + background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9); + background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0); +} +.theme-blue .back-bar .pointer { + width: 14px; + height: 14px; + top: -5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 10px; + border: 1px solid #AAA; + background-color: #e7e7e7; + background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd)); + background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); + background-image: -o-linear-gradient(top, #eeeeee, #dddddd); + background-image: linear-gradient(to bottom, #eeeeee, #dddddd); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0); + cursor: col-resize; +} +.theme-blue .back-bar .pointer-label { + color: #999; +} +.theme-blue .back-bar .focused { + color: #333; +} +.theme-blue .scale span { + border-left: 1px solid #e5e5e5; +} +.theme-blue .scale ins { + color: #999; +} diff --git a/library/jRange/jquery.range.js b/library/jRange/jquery.range.js new file mode 100644 index 000000000..978b3e7ba --- /dev/null +++ b/library/jRange/jquery.range.js @@ -0,0 +1,297 @@ +/*jshint multistr:true, curly: false */ +/*global jQuery:false, define: false */ +/** + * jRange - Awesome range control + * + * Written by + * ---------- + * Nitin Hayaran (nitinhayaran@gmail.com) + * + * Licensed under the MIT (MIT-LICENSE.txt). + * + * @author Nitin Hayaran + * @version 0.1-RELEASE + * + * Dependencies + * ------------ + * jQuery (http://jquery.com) + * + **/ + ; + (function($, window, document, undefined) { + 'use strict'; + + var jRange = function(){ + return this.init.apply(this, arguments); + }; + jRange.prototype = { + defaults : { + onstatechange : function(){}, + isRange : false, + showLabels : true, + showScale : true, + step : 1, + format: '%s', + theme : 'theme-green', + width : 300 + }, + template : '
\ +
\ +
\ +
123456
\ +
456789
\ +
\ +
\ +
\ +
', + init : function(node, options){ + this.options = $.extend({}, this.defaults, options); + this.inputNode = $(node); + this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from+','+this.options.from : this.options.from); + this.domNode = $(this.template); + this.domNode.addClass(this.options.theme); + this.inputNode.after(this.domNode); + this.domNode.on('change', this.onChange); + this.pointers = $('.pointer', this.domNode); + this.lowPointer = this.pointers.first(); + this.highPointer = this.pointers.last(); + this.labels = $('.pointer-label', this.domNode); + this.lowLabel = this.labels.first(); + this.highLabel = this.labels.last(); + this.scale = $('.scale', this.domNode); + this.bar = $('.selected-bar', this.domNode); + this.clickableBar = this.domNode.find('.clickable-dummy'); + this.interval = this.options.to - this.options.from; + this.render(); + }, + render: function(){ + // Check if inputNode is visible, and have some width, so that we can set slider width accordingly. + if( this.inputNode.width() === 0 && !this.options.width ){ + console.log('jRange : no width found, returning'); + return; + }else{ + this.domNode.width( this.options.width || this.inputNode.width() ); + this.inputNode.hide(); + } + + if(this.isSingle()){ + this.lowPointer.hide(); + this.lowLabel.hide(); + } + if(!this.options.showLabels){ + this.labels.hide(); + } + this.attachEvents(); + if(this.options.showScale){ + this.renderScale(); + } + this.setValue(this.options.value); + }, + isSingle: function(){ + if(typeof(this.options.value) === 'number'){ + return true; + } + return (this.options.value.indexOf(',') !== -1 || this.options.isRange) ? + false : true; + }, + attachEvents: function(){ + this.clickableBar.click($.proxy(this.barClicked, this)); + this.pointers.mousedown($.proxy(this.onDragStart, this)); + this.pointers.bind('dragstart', function(event) { event.preventDefault(); }); + }, + onDragStart: function(e){ + if(e.which !== 1){return;} + e.stopPropagation(); e.preventDefault(); + var pointer = $(e.target); + pointer.addClass('focused'); + this[(pointer.hasClass('low')?'low':'high') + 'Label'].addClass('focused'); + $(document).on('mousemove.slider', $.proxy(this.onDrag, this, pointer)); + $(document).on('mouseup.slider', $.proxy(this.onDragEnd, this)); + }, + onDrag: function(pointer, e){ + e.stopPropagation(); e.preventDefault(); + var position = e.clientX - this.domNode.offset().left; + this.domNode.trigger('change', [this, pointer, position]); + }, + onDragEnd: function(){ + this.pointers.removeClass('focused'); + this.labels.removeClass('focused'); + $(document).off('.slider'); + $(document).off('.slider'); + }, + barClicked: function(e){ + var x = e.pageX - this.clickableBar.offset().left; + if(this.isSingle()) + this.setPosition(this.pointers.last(), x, true, true); + else{ + var pointer = Math.abs(parseInt(this.pointers.first().css('left'), 10) - x + this.pointers.first().width() / 2) < Math.abs(parseInt(this.pointers.last().css('left'), 10) - x + this.pointers.first().width() / 2) ? + this.pointers.first() : this.pointers.last(); + this.setPosition(pointer, x, true, true); + } + }, + onChange: function(e, self, pointer, position){ + var min, max; + if(self.isSingle()){ + min = 0; + max = self.domNode.width(); + }else{ + min = pointer.hasClass('high')? self.lowPointer.position().left + self.lowPointer.width() / 2 : 0; + max = pointer.hasClass('low') ? self.highPointer.position().left + self.highPointer.width() / 2 : self.domNode.width(); + } + var value = Math.min(Math.max(position, min), max); + self.setPosition(pointer, value, true); + }, + setPosition: function(pointer, position, isPx, animate){ + var leftPos, + lowPos = this.lowPointer.position().left, + highPos = this.highPointer.position().left, + circleWidth = this.highPointer.width() / 2; + if(!isPx){ + position = this.prcToPx(position); + } + if(pointer[0] === this.highPointer[0]){ + highPos = Math.round(position - circleWidth); + }else{ + lowPos = Math.round(position - circleWidth); + } + pointer[animate?'animate':'css']({'left': Math.round(position - circleWidth)}); + if(this.isSingle()){ + leftPos = 0; + }else{ + leftPos = lowPos + circleWidth; + } + this.bar[animate?'animate':'css']({ + 'width' : Math.round(highPos + circleWidth - leftPos), + 'left' : leftPos + }); + this.showPointerValue(pointer, position, animate); + }, + // will be called from outside + setValue: function(value){ + var values = value.toString().split(','); + this.options.value = value; + var prc = this.valuesToPrc( values.length === 2 ? values : [0, values[0]] ); + if(this.isSingle()){ + this.setPosition(this.highPointer, prc[1]); + }else{ + this.setPosition(this.lowPointer, prc[0]); + this.setPosition(this.highPointer, prc[1]); + } + }, + renderScale: function(){ + var s = this.options.scale || [this.options.from, this.options.to]; + var prc = Math.round((100 / (s.length - 1)) * 10) / 10; + var str = ''; + for(var i = 0; i < s.length ; i++ ){ + str += '' + (s[i] != '|' ? '' + s[i] + '' : '') + ''; + } + this.scale.html(str); + + $('ins', this.scale).each(function () { + $(this).css({ + marginLeft: -$(this).outerWidth() / 2 + }); + }); + }, + getBarWidth: function(){ + var values = this.options.value.split(','); + if(values.length > 1){ + return parseInt(values[1], 10) - parseInt(values[0], 10); + }else{ + return parseInt(values[0], 10); + } + }, + showPointerValue: function(pointer, position, animate){ + var label = $('.pointer-label', this.domNode)[pointer.hasClass('low')?'first':'last'](); + var text; + var value = this.positionToValue(position); + if($.isFunction(this.options.format)){ + var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low':'high'); + text = this.options.format(value, type); + }else{ + text = this.options.format.replace('%s', value); + } + + var width = label.html(text).width(), + left = position - width / 2; + left = Math.min(Math.max(left, 0), this.options.width - width); + label[animate?'animate':'css']({left: left}); + this.setInputValue(pointer, value); + }, + valuesToPrc: function(values){ + var lowPrc = ( ( values[0] - this.options.from ) * 100 / this.interval ), + highPrc = ( ( values[1] - this.options.from ) * 100 / this.interval ); + return [lowPrc, highPrc]; + }, + prcToPx: function(prc){ + return (this.domNode.width() * prc) / 100; + }, + positionToValue: function(pos){ + var value = (pos / this.domNode.width()) * this.interval; + value = value + this.options.from; + return Math.round(value / this.options.step) * this.options.step; + }, + setInputValue: function(pointer, v){ + // if(!isChanged) return; + if(this.isSingle()){ + this.options.value = v.toString(); + }else{ + var values = this.options.value.split(','); + if(pointer.hasClass('low')){ + this.options.value = v + ',' + values[1]; + }else{ + this.options.value = values[0] + ',' + v; + } + } + if( this.inputNode.val() !== this.options.value ){ + this.inputNode.val(this.options.value); + this.options.onstatechange.call(this, this.options.value); + } + }, + getValue: function(){ + return this.options.value; + } + }; + + /*$.jRange = function (node, options) { + var jNode = $(node); + if(!jNode.data('jrange')){ + jNode.data('jrange', new jRange(node, options)); + } + return jNode.data('jrange'); + }; + + $.fn.jRange = function (options) { + return this.each(function(){ + $.jRange(this, options); + }); + };*/ + + var pluginName = 'jRange'; + // A really lightweight plugin wrapper around the constructor, + // preventing against multiple instantiations + $.fn[pluginName] = function(option) { + var args = arguments, + result; + + this.each(function() { + var $this = $(this), + data = $.data(this, 'plugin_' + pluginName), + options = typeof option === 'object' && option; + if (!data) { + $this.data('plugin_' + pluginName, (data = new jRange(this, options))); + } + // if first argument is a string, call silimarly named function + // this gives flexibility to call functions of the plugin e.g. + // - $('.dial').plugin('destroy'); + // - $('.dial').plugin('render', $('.new-child')); + if (typeof option === 'string') { + result = data[option].apply(data, Array.prototype.slice.call(args, 1)); + } + }); + + // To enable plugin returns values + return result || this; + }; + +})(jQuery, window, document); \ No newline at end of file diff --git a/library/jRange/jquery.range.less b/library/jRange/jquery.range.less new file mode 100644 index 000000000..979ed2e1a --- /dev/null +++ b/library/jRange/jquery.range.less @@ -0,0 +1,192 @@ +#gradient { + .horizontal(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down + } + .vertical(@startColor: #555, @endColor: #333) { + background-color: mix(@startColor, @endColor, 60%); + background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down + } + .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 + } + .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { + background-color: mix(@midColor, @endColor, 80%); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); + background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); + background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback + } + .radial(@innerColor: #555, @outerColor: #333) { + background-color: @outerColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); + background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); + background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); + background-image: -o-radial-gradient(circle, @innerColor, @outerColor); + background-repeat: no-repeat; + } + .striped(@color: #555, @angle: 45deg) { + background-color: @color; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + } +} + +.slider-container { + width: 300px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + .back-bar { + height: 10px; + position: relative; + .selected-bar { + position: absolute; + height: 100%; + } + .pointer { + position: absolute; + width: 10px; + height: 10px; + background-color: red; + cursor: move; + opacity: 1; + z-index: 2; + } + .pointer-label { + position: absolute; + top: -17px; + font-size: 8px; + background: white; + white-space: nowrap; + line-height: 1; + } + .focused { + z-index: 10; + } + } + .clickable-dummy { + cursor: pointer; + position: absolute; + width: 100%; + height: 100%; + z-index: 1; + } + .scale { + top: 2px; + position: relative; + span { + position: absolute; + height: 5px; + border-left: 1px solid #999; + font-size: 0; + } + ins { + font-size: 9px; + text-decoration: none; + position: absolute; + left: 0; + top: 5px; + color: #999; + line-height: 1; + } + } +} +.theme-green { + .back-bar { + height: 5px; + border-radius: 2px; + background-color: #eeeeee; + #gradient > .vertical(#eeeeee, #dddddd); + .selected-bar { + border-radius: 2px; + #gradient > .vertical(#bdfade, #76fabc); + } + .pointer { + width: 14px; + height: 14px; + top: -5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 10px; + border: 1px solid #AAA; + #gradient > .vertical(#eeeeee, #dddddd); + cursor: col-resize; + } + .pointer-label { + color: #999; + } + .focused { + color: #333; + } + } + .scale { + span { + border-left: 1px solid #e5e5e5; + } + ins { + color: #999; + } + } +} + +.theme-blue { + .back-bar { + height: 5px; + border-radius: 2px; + background-color: #eeeeee; + #gradient > .vertical(#eeeeee, #dddddd); + .selected-bar { + border-radius: 2px; + #gradient > .vertical(#b1d1f9, #64a8f9); + } + .pointer { + width: 14px; + height: 14px; + top: -5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 10px; + border: 1px solid #AAA; + #gradient > .vertical(#eeeeee, #dddddd); + cursor: col-resize; + } + .pointer-label { + color: #999; + } + .focused { + color: #333; + } + } + .scale { + span { + border-left: 1px solid #e5e5e5; + } + ins { + color: #999; + } + } +} -- cgit v1.2.3