diff options
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 /library/jRange/demo | |
parent | 7791d28a5d24193a01ce004988ba6767f45835ba (diff) | |
download | volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.gz volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.bz2 volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.zip |
Replace jslider with jRange
Diffstat (limited to 'library/jRange/demo')
-rw-r--r-- | library/jRange/demo/index.html | 245 | ||||
-rw-r--r-- | library/jRange/demo/main.css | 289 | ||||
-rw-r--r-- | library/jRange/demo/main.less | 296 | ||||
-rw-r--r-- | library/jRange/demo/normalize.css | 425 | ||||
-rw-r--r-- | library/jRange/demo/prism/prism.css | 193 | ||||
-rw-r--r-- | library/jRange/demo/prism/prism.js | 8 |
6 files changed, 1456 insertions, 0 deletions
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&repo=jRange&type=watch&count=false&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&type=follow&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"><link rel="stylesheet" href="jquery.range.css"> +<script src="jquery.range.js"></script></code></pre> + <p>Later just add an hidden input, where ever you want this slider to be shown.</p> + <pre><code class="language-css"><input type="hidden" class="slider-input" value="23" /></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&type=follow&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,"&").replace(/</g,"<").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(/&/,"&"))});; +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}}}); +; |