Replace jslider with jRange

author: Stefan Parviainen <saparvia@caterva.eu> 2015-01-05 18:30:12 +0100
committer: Stefan Parviainen <saparvia@caterva.eu> 2015-01-05 18:30:12 +0100
commit: 128b0008eef797050cf5146fb1dd69505c4439d4 (patch)
tree: 65d6b6214ee48322bd5a5c84e0ac9bcde09ff13a
parent: 7791d28a5d24193a01ce004988ba6767f45835ba (diff)
download: volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.gz
volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.bz2
volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.zip
17 files changed, 2148 insertions, 6 deletions
diff --git a/include/widgets.php b/include/widgets.php
index bb9890add..18778ed36 100644
--- a/include/widgets.php
+++ b/include/widgets.php
@@ -421,7 +421,7 @@ function widget_affinity($arr) {
 	if(feature_enabled(local_user(),'affinity')) {
 		$tpl = get_markup_template('main_slider.tpl');
 		$x = replace_macros($tpl,array(
-			'$val' => $cmin . ';' . $cmax,
+			'$val' => $cmin . ',' . $cmax,
 			'$refresh' => t('Refresh'),
 			'$me' => t('Me'),
 			'$intimate' => t('Best Friends'),
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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>jRange : jQuery Range Selector</title>
+	<link rel="stylesheet" href="normalize.css">
+	<link rel="stylesheet" href="main.css">
+	<link rel="stylesheet" href="prism/prism.css">
+	<link rel="stylesheet" href="../jquery.range.css">
+	<link href='http://fonts.googleapis.com/css?family=Raleway:100,300' rel='stylesheet' type='text/css'>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+</head>
+<body>
+    <section class="pane header">
+        <div class="header">
+            <h1>jRange</h1>
+            <h2>jQuery Plugin to create Range Selector</h2>
+        </div>
+        <footer>
+            <div class="left">
+                <a href="http://twitter.com/share" class="twitter-share-button" data-url="https://github.com/nitinhayaran/jRange" data-text="jRange - jQuery plugin for Range Selector" data-count="none" data-via="nitinhayaran">Tweet</a>
+                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+                <iframe src="http://ghbtns.com/github-btn.html?user=nitinhayaran&amp;repo=jRange&amp;type=watch&amp;count=false&amp;size=small"
+                  allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
+            </div>
+            <div class="right">
+                <a href="https://twitter.com/nitinhayaran" class="twitter-follow-button" data-show-count="false">Follow @nitinhayaran</a>
+                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+                <iframe src="http://ghbtns.com/github-btn.html?user=nitinhayaran&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="153" height="20"></iframe>
+            </div>
+        </footer>
+    </section>
+    <section class="body demo">
+        <div class="container">
+            <h2>See it in Action</h2>
+            <h3>Play around with the demo</h3>
+            <div class="demo-container clearfix">
+            	<div class="demo-section">
+            		<div class="demo-code">
+            			<pre><code class="language-javascript">$('.single-slider').jRange({
+    from: 0,
+    to: 100,
+    step: 1,
+    scale: [0,50,100],
+    format: '%s',
+    width: 300,
+    showLabels: true
+});</code></pre>
+            		</div>
+            		<div class="demo-output">
+            			<input class="single-slider" type="hidden" value="25"/>
+            		</div>
+            	</div>
+            	<div class="demo-section">
+            		<div class="demo-code">
+            			<pre><code class="language-javascript">$('.range-slider').jRange({
+    from: 0,
+    to: 100,
+    step: 1,
+    scale: [0,25,50,75,100],
+    format: '%s',
+    width: 300,
+    showLabels: true,
+    isRange : true
+});</code></pre>
+            		</div>
+            		<div class="demo-output">
+            			<input class="range-slider" type="hidden" value="25,75"/>
+            		</div>
+            	</div>
+
+
+            </div>
+            <div class="text-container">
+                <h2>How to Use</h2>
+                <h3>Lets see some code</h3>
+                <p>To get started you'll have to include <code>jquery.range.js</code> and <code>jquery.range.css</code> files in your html file.</p>
+                <pre><code class="language-css">&lt;link rel="stylesheet" href="jquery.range.css"&gt;
+&lt;script src="jquery.range.js"&gt;&lt;/script&gt;</code></pre>
+				<p>Later just add an hidden input, where ever you want this slider to be shown.</p>
+				<pre><code class="language-css">&lt;input type="hidden" class="slider-input" value="23" /&gt;</code></pre>
+				<p>After this you'll have to intialize this plugin for that input, as shown in the example above</p>
+
+                <h2>Options</h2>
+                <h3>See configuration options</h3>
+                <p>Options can also be set programatically, by passing an options hash to the jRange method.
+                <table class="plugin-options" width='900'>
+                    <tr>
+                        <th>Option</th>
+                        <th width="200">Override</th>
+                        <th>Type</th>
+                        <th>Details</th>
+                    </tr>
+                    <tr>
+                        <td>from</td>
+                        <td>Mandatory</td>
+                        <td>Integer</td>
+                        <td>Lower bound of slider</td>
+                    </tr>
+                    <tr>
+                        <td>to</td>
+                        <td>Mandatory</td>
+                        <td>Integer</td>
+                        <td>Upper bound of slider</td>
+                    </tr>
+                    <tr>
+                        <td>step</td>
+                        <td>Optional</td>
+                        <td>Integer</td>
+                        <td>
+                        	<code>Default : 1</code>
+                        	<p>amount of increment on each step</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>scale</td>
+                        <td>Optional</td>
+                        <td>Array</td>
+                        <td>
+                        	<p>Array containing label which are shown below the slider. By default its [from, to].</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>showLabels</td>
+                        <td>Optional</td>
+                        <td>Boolean</td>
+                        <td>
+                        	<p>False, if you'd like to hide label which are shown on top of slider.</p>
+                        	<code>Default : true</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>showScale</td>
+                        <td>Optional</td>
+                        <td>Boolean</td>
+                        <td>
+                            <p>False, if you'd like to hide scale which are shown below the slider.</p>
+                            <code>Default : true</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>format</td>
+                        <td>Optional</td>
+                        <td>String / Function</td>
+                        <td>
+                        	<p>this is used to show label on the pointer</p>
+                        	<code>Default : "%s"</code>
+                        	<p><code>String</code> : %s is replaced by its value, e.g., "%s days", "%s goats"</p>
+                        	<p>
+                                <code>Function</code> : format(value, pointer)
+                                <br>
+                                <code>return</code> : string label for a given value and pointer. <br>
+                                <code>pointer</code> could be 'low'/'high' if <code>isRange</code> is true, else undefined
+                            </p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>width</td>
+                        <td>Optional</td>
+                        <td>Integer</td>
+                        <td>
+                        	<code>Default : 300</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>theme</td>
+                        <td>Optional</td>
+                        <td>String</td>
+                        <td>
+                        	<code>Default : "theme-green"</code>
+                            <p>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 <code>jquery.range.less</code></p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>isRange</td>
+                        <td>Optional</td>
+                        <td>Boolean</td>
+                        <td>
+                            <code>Default : false</code>
+                            <p>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"</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>onstatechange</td>
+                        <td>Optional</td>
+                        <td>Function</td>
+                        <td>
+                           <p>This function is called whenever the value is changed by user. This same value is also automatically set for the provided Hidden Input.</p>
+                           <p>For single slider value is without comma, however for a range selector value is comma-seperated.</p>
+                        </td>
+                    </tr>
+                </table>
+
+                <div class="footer">
+                    <a href="https://github.com/nitinhayaran/jRange" class="large-github">Get it from Github</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="footer">
+        <div class="text-container clearfix">
+            <div class="left">
+                <p>
+                    <a href="https://twitter.com/nitinhayaran" class="twitter-follow-button" data-show-count="false">Follow @nitinhayaran</a>
+                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+                </p>
+                <p><iframe src="http://ghbtns.com/github-btn.html?user=nitinhayaran&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="153" height="20"></iframe></p>
+            </div>
+            <div class="right">
+                <p><a href="https://github.com/nitinhayaran/jRange">jRange</a> is authored and maintained by <a href="https://github.com/nitinhayaran/">@nitinhayaran</a></p>
+                <p>
+                    Released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT
+                      License</a>
+                  </p>
+            </div>
+        </div>
+    </section>
+    <script src="prism/prism.js"></script>
+
+    <script src="../jquery.range.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $('.single-slider').jRange({
+                from: 0,
+                to: 100,
+                step: 1,
+                scale: [0,25,50,75,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
+            });
+        });
+    </script>
+</body>
+</html>
+\ 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,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){var s=t.tokenize(e,r);return n.stringify(t.util.encode(s),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>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+"</"+s.tag+">"};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:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/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(/&amp;/,"&"))});;
+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:/<style[\w\W]*?>[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/<style[\w\W]*?>|<\/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:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/<script[\w\W]*?>|<\/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:'<div class="slider-container">			<div class="back-bar">                <div class="selected-bar"></div>                <div class="pointer low"></div><div class="pointer-label">123456</div>                <div class="pointer high"></div><div class="pointer-label">456789</div>                <div class="clickable-dummy"></div>            </div>            <div class="scale"></div>		</div>',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)<Math.abs(parseInt(this.pointers.last().css("left"),10)-i+this.pointers.first().width()/2)?this.pointers.first():this.pointers.last();this.setPosition(s,i,!0,!0)}},onChange:function(t,i,s,o){var e,n;i.isSingle()?(e=0,n=i.domNode.width()):(e=s.hasClass("high")?i.lowPointer.position().left+i.lowPointer.width()/2:0,n=s.hasClass("low")?i.highPointer.position().left+i.highPointer.width()/2:i.domNode.width());var h=Math.min(Math.max(o,e),n);i.setPosition(s,h,!0)},setPosition:function(t,i,s,o){var e,n=this.lowPointer.position().left,h=this.highPointer.position().left,a=this.highPointer.width()/2;s||(i=this.prcToPx(i)),t[0]===this.highPointer[0]?h=Math.round(i-a):n=Math.round(i-a),t[o?"animate":"css"]({left:Math.round(i-a)}),e=this.isSingle()?0:n+a,this.bar[o?"animate":"css"]({width:Math.round(h+a-e),left:e}),this.showPointerValue(t,i,o)},setValue:function(t){var i=t.toString().split(",");this.options.value=t;var s=this.valuesToPrc(2===i.length?i:[0,i[0]]);this.isSingle()?this.setPosition(this.highPointer,s[1]):(this.setPosition(this.lowPointer,s[0]),this.setPosition(this.highPointer,s[1]))},renderScale:function(){for(var t=this.options.scale||[this.options.from,this.options.to],i=Math.round(100/(t.length-1)*10)/10,s="",o=0;o<t.length;o++)s+='<span style="left: '+o*i+'%">'+("|"!=t[o]?"<ins>"+t[o]+"</ins>":"")+"</span>";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 : '<div class="slider-container">\
+			<div class="back-bar">\
+                <div class="selected-bar"></div>\
+                <div class="pointer low"></div><div class="pointer-label">123456</div>\
+                <div class="pointer high"></div><div class="pointer-label">456789</div>\
+                <div class="clickable-dummy"></div>\
+            </div>\
+            <div class="scale"></div>\
+		</div>',
+		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 += '<span style="left: ' + i * prc + '%">' + (s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '') + '</span>';
+			}
+			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;
+        }
+    }
+}
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index 9a545470f..5987835ac 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -5,7 +5,7 @@ require_once('include/plugin.php');
 head_add_css('library/fancybox/jquery.fancybox-1.3.4.css');
 head_add_css('library/tiptip/tipTip.css');
 head_add_css('library/jgrowl/jquery.jgrowl.css');
-head_add_css('library/jslider/css/jslider.css');
+head_add_css('library/jRange/jquery.range.css');
 head_add_css('library/colorbox/colorbox.css');
 
 head_add_css('view/css/conversation.css');
@@ -39,7 +39,7 @@ head_add_js('acl.js');
 head_add_js('webtoolkit.base64.js');
 head_add_js('main.js');
 head_add_js('crypto.js');
-head_add_js('library/jslider/bin/jquery.slider.min.js');
+head_add_js('library/jRange/jquery.range.js');
 head_add_js('docready.js');
 head_add_js('library/colorbox/jquery.colorbox-min.js');
 head_add_js('library/bootstrap-tagsinput/bootstrap-tagsinput.js');
diff --git a/view/tpl/contact_slider.tpl b/view/tpl/contact_slider.tpl
index 93d0cc625..09a79edd8 100755
--- a/view/tpl/contact_slider.tpl
+++ b/view/tpl/contact_slider.tpl
@@ -1,4 +1,4 @@
 <div id="contact-slider" class="slider" style="height: 32px; position: relative; left: 5%; width: 90%;"><input id="contact-range" type="text" name="fake-closeness" value="{{$val}}" /></div>
 <script>
-	$("#contact-range").slider({ from: {{$min|default:'0'}}, to: 99, step: 1, scale: ['{{$me}}', '|', '{{$intimate}}', '|', '{{$friends}}', '|', '{{$oldfriends}}', '|', '{{$acquaintances}}', '|', '{{$world}}' ], onstatechange: function(v) { $("#contact-closeness-mirror").val(v); }  });
+	$("#contact-range").jRange({ from: {{$min|default:'0'}}, to: 99, step: 1, scale: ['{{$me}}', '|', '{{$intimate}}', '|', '{{$friends}}', '|', '{{$oldfriends}}', '|', '{{$acquaintances}}', '|', '{{$world}}' ], width:'100%', showLabels: false, onstatechange: function(v) { $("#contact-closeness-mirror").val(v); }  });
 </script>
diff --git a/view/tpl/main_slider.tpl b/view/tpl/main_slider.tpl
index fbc290df1..c8f3d2e06 100755
--- a/view/tpl/main_slider.tpl
+++ b/view/tpl/main_slider.tpl
@@ -2,8 +2,8 @@
 <script>
 	var old_cmin = 0;
 	var old_cmax = 99;
-	$("#main-range").slider({ from: 0, to: 99, step: 1, scale: ['{{$me}}', '|', '{{$intimate}}', '|', '{{$friends}}', '|', '{{$oldfriends}}', '|', '{{$acquaintances}}', '|', '{{$world}}' ], onstatechange: function(v) { 
-		var carr = v.split(";");
+	$("#main-range").jRange({ isRange: true, from: 0, to: 99, step: 1, scale: ['{{$me}}', '|', '{{$intimate}}', '|', '{{$friends}}', '|', '{{$oldfriends}}', '|', '{{$acquaintances}}', '|', '{{$world}}' ], width:'100%', showLabels: false,  onstatechange: function(v) { 
+		var carr = v.split(",");
 		if(carr[0] != bParam_cmin) {
 			old_cmin = bParam_cmin;
 	 		bParam_cmin = carr[0];
author	Stefan Parviainen <saparvia@caterva.eu>	2015-01-05 18:30:12 +0100
committer	Stefan Parviainen <saparvia@caterva.eu>	2015-01-05 18:30:12 +0100
commit	128b0008eef797050cf5146fb1dd69505c4439d4 (patch)
tree	65d6b6214ee48322bd5a5c84e0ac9bcde09ff13a
parent	7791d28a5d24193a01ce004988ba6767f45835ba (diff)
download	volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.gz volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.bz2 volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.zip