Streams/streams
Streams/streams
1
0
Fork 0
mirror of https://codeberg.org/streams/streams.git synced 2024-09-19 15:55:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace jslider with jRange

Browse source
This commit is contained in:
Stefan Parviainen 2015-01-05 18:30:12 +01:00
parent 7791d28a5d
commit 128b0008ee
17 changed files with 2148 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
include/widgets.php
View file

@ -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'),

2
library/jRange/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
*.codekit

21
library/jRange/LICENSE Normal file
View file

@ -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.

5
library/jRange/README.md Normal file
View file

@ -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/)

245
library/jRange/demo/index.html Normal file
View file

@ -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>

289
library/jRange/demo/main.css Normal file
View file

@ -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;
}

296
library/jRange/demo/main.less Normal file
View file

@ -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;
}
}

425
library/jRange/demo/normalize.css vendored Normal file
View file

@ -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;
}

193
library/jRange/demo/prism/prism.css Normal file
View file

@ -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;
}

8
library/jRange/demo/prism/prism.js Normal file
View file

@ -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}}});
;

1
library/jRange/jquery.range-min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

168
library/jRange/jquery.range.css Normal file
View file

@ -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;
}

297
library/jRange/jquery.range.js Normal file
View file

@ -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);

192
library/jRange/jquery.range.less Normal file
View file

@ -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;
}
}
}

4
view/php/theme_init.php
View file

@ -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');

2
view/tpl/contact_slider.tpl
View file

@ -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>

4
view/tpl/main_slider.tpl
View file

@ -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];