From 7791d28a5d24193a01ce004988ba6767f45835ba Mon Sep 17 00:00:00 2001 From: Stefan Parviainen Date: Mon, 5 Jan 2015 17:10:08 +0100 Subject: Replace divgrow with more modern readmore.js --- library/readmore.js/README.md | 171 +++++++++++++++++++++ library/readmore.js/readmore.js | 319 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 490 insertions(+) create mode 100644 library/readmore.js/README.md create mode 100644 library/readmore.js/readmore.js (limited to 'library') diff --git a/library/readmore.js/README.md b/library/readmore.js/README.md new file mode 100644 index 000000000..0116fbe8b --- /dev/null +++ b/library/readmore.js/README.md @@ -0,0 +1,171 @@ +# Readmore.js + +A smooth, responsive jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links. + +The markup Readmore.js requires is so simple, you can probably use it with your existing HTML—there's no need for complicated sets of `div`'s or hardcoded classes, just call `.readmore()` on the element containing your block of text and Readmore.js takes care of the rest. Readmore.js plays well in a responsive environment, too. + +Readmore.js is tested with—and supported on—all versions of jQuery greater than 1.9.1. All the "good" browsers are supported, as well as IE10+; IE8 & 9 _should_ work, but are not supported and the experience will not be ideal. + + +## Install + +Install Readmore.js with Bower: + +``` +$ bower install readmore +``` + +Then include it in your HTML: + +```html + +``` + + +## Use + +```javascript +$('article').readmore(); +``` + +It's that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements. + +```javascript +$('article').readmore({ + speed: 75, + lessLink: 'Read less' +}); +``` + +### The options: + +* `speed: 100` in milliseconds +* `collapsedHeight: 200` in pixels +* `heightMargin: 16` in pixels, avoids collapsing blocks that are only slightly larger than `collapsedHeight` +* `moreLink: 'Read more'` +* `lessLink: 'Close'` +* `embedCSS: true` insert required CSS dynamically, set this to `false` if you include the necessary CSS in a stylesheet +* `blockCSS: 'display: block; width: 100%;'` sets the styling of the blocks, ignored if `embedCSS` is `false` +* `startOpen: false` do not immediately truncate, start in the fully opened position +* `beforeToggle: function() {}` called after a more or less link is clicked, but *before* the block is collapsed or expanded +* `afterToggle: function() {}` called *after* the block is collapsed or expanded + +If the element has a `max-height` CSS property, Readmore.js will use that value rather than the value of the `collapsedHeight` option. + +### The callbacks: + +The callback functions, `beforeToggle` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `expanded`. + +* `trigger`: the "Read more" or "Close" element that was clicked +* `element`: the block that is being collapsed or expanded +* `expanded`: Boolean; `true` means the block is expanded + +#### Callback example: + +Here's an example of how you could use the `afterToggle` callback to scroll back to the top of a block when the "Close" link is clicked. + +```javascript +$('article').readmore({ + afterToggle: function(trigger, element, expanded) { + if(! expanded) { // The "Close" link was clicked + $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } ); + } + } +}); +``` + +### Removing Readmore: + +You can remove the Readmore.js functionality like so: + +```javascript +$('article').readmore('destroy'); +``` + +Or, you can be more surgical by specifying a particular element: + +```javascript +$('article:first').readmore('destroy'); +``` + +### Toggling blocks programmatically: + +You can toggle a block from code: + +```javascript +$('article:nth-of-type(3)').readmore('toggle'); +``` + + +## CSS: + +Readmore.js is designed to use CSS for as much functionality as possible: collapsed height can be set in CSS with the `max-height` property; "collapsing" is achieved by setting `overflow: hidden` on the containing block and changing the `height` property; and, finally, the expanding/collapsing animation is done with CSS3 transitions. + +By default, Readmore.js inserts the following CSS, in addition to some transition-related rules: + +```css +selector + [data-readmore-toggle], selector[data-readmore] { + display: block; + width: 100%; +} +``` + +_`selector` would be the element you invoked `readmore()` on, e.g.: `$('selector').readmore()`_ + +You can override the base rules when you set up Readmore.js like so: + +```javascript +$('article').readmore({blockCSS: 'display: inline-block; width: 50%;'}); +``` + +If you want to include the necessary styling in your site's stylesheet, you can disable the dynamic embedding by setting `embedCSS` to `false`: + +```javascript +$('article').readmore({embedCSS: false}); +``` + +### Media queries and other CSS tricks: + +If you wanted to set a `maxHeight` based on lines, you could do so in CSS with something like: + +```css +body { + font: 16px/1.5 sans-serif; +} + +/* Show only 4 lines in smaller screens */ +article { + max-height: 6em; /* (4 * 1.5 = 6) */ +} +``` + +Then, with a media query you could change the number of lines shown, like so: + +```css +/* Show 8 lines on larger screens */ +@media screen and (min-width: 640px) { + article { + max-height: 12em; + } +} +``` + + +## Contributing + +Pull requests are always welcome, but not all suggested features will get merged. Feel free to contact me if you have an idea for a feature. + +Pull requests should include the minified script and this readme and the demo HTML should be updated with descriptions of your new feature. + +You'll need NPM: + +``` +$ npm install +``` + +Which will install the necessary development dependencies. Then, to build the minified script: + +``` +$ gulp compress +``` + diff --git a/library/readmore.js/readmore.js b/library/readmore.js/readmore.js new file mode 100644 index 000000000..81cfb3cea --- /dev/null +++ b/library/readmore.js/readmore.js @@ -0,0 +1,319 @@ +/*! + * @preserve + * + * Readmore.js jQuery plugin + * Author: @jed_foster + * Project home: http://jedfoster.github.io/Readmore.js + * Licensed under the MIT license + * + * Debounce function from http://davidwalsh.name/javascript-debounce-function + */ + +/* global jQuery */ + +(function($) { + 'use strict'; + + var readmore = 'readmore', + defaults = { + speed: 100, + collapsedHeight: 200, + heightMargin: 16, + moreLink: 'Read More', + lessLink: 'Close', + embedCSS: true, + blockCSS: 'display: block; width: 100%;', + startOpen: false, + + // callbacks + beforeToggle: function(){}, + afterToggle: function(){} + }, + cssEmbedded = {}, + uniqueIdCounter = 0; + + function debounce(func, wait, immediate) { + var timeout; + + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + if (! immediate) { + func.apply(context, args); + } + }; + var callNow = immediate && !timeout; + + clearTimeout(timeout); + timeout = setTimeout(later, wait); + + if (callNow) { + func.apply(context, args); + } + }; + } + + function uniqueId(prefix) { + var id = ++uniqueIdCounter; + + return String(prefix == null ? 'rmjs-' : prefix) + id; + } + + function setBoxHeights(element) { + var el = element.clone().css({ + height: 'auto', + width: element.width(), + maxHeight: 'none', + overflow: 'hidden' + }).insertAfter(element), + expandedHeight = el.outerHeight(), + cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10), + defaultHeight = element.data('defaultHeight'); + + el.remove(); + + var collapsedHeight = element.data('collapsedHeight') || defaultHeight; + + if (!cssMaxHeight) { + collapsedHeight = defaultHeight; + } + else if (cssMaxHeight > collapsedHeight) { + collapsedHeight = cssMaxHeight; + } + + // Store our measurements. + element.data({ + expandedHeight: expandedHeight, + maxHeight: cssMaxHeight, + collapsedHeight: collapsedHeight + }) + // and disable any `max-height` property set in CSS + .css({ + maxHeight: 'none' + }); + } + + var resizeBoxes = debounce(function() { + $('[data-readmore]').each(function() { + var current = $(this), + isExpanded = (current.attr('aria-expanded') === 'true'); + + setBoxHeights(current); + + current.css({ + height: current.data( (isExpanded ? 'expandedHeight' : 'collapsedHeight') ) + }); + }); + }, 100); + + function embedCSS(options) { + if (! cssEmbedded[options.selector]) { + var styles = ' '; + + if (options.embedCSS && options.blockCSS !== '') { + styles += options.selector + ' + [data-readmore-toggle], ' + + options.selector + '[data-readmore]{' + + options.blockCSS + + '}'; + } + + // Include the transition CSS even if embedCSS is false + styles += options.selector + '[data-readmore]{' + + 'transition: height ' + options.speed + 'ms;' + + 'overflow: hidden;' + + '}'; + + (function(d, u) { + var css = d.createElement('style'); + css.type = 'text/css'; + + if (css.styleSheet) { + css.styleSheet.cssText = u; + } + else { + css.appendChild(d.createTextNode(u)); + } + + d.getElementsByTagName('head')[0].appendChild(css); + }(document, styles)); + + cssEmbedded[options.selector] = true; + } + } + + function Readmore(element, options) { + var $this = this; + + this.element = element; + + this.options = $.extend({}, defaults, options); + + $(this.element).data({ + defaultHeight: this.options.collapsedHeight, + heightMargin: this.options.heightMargin + }); + + embedCSS(this.options); + + this._defaults = defaults; + this._name = readmore; + + window.addEventListener('load', function() { + $this.init(); + }); + } + + + Readmore.prototype = { + init: function() { + var $this = this; + + $(this.element).each(function() { + var current = $(this); + + setBoxHeights(current); + + var collapsedHeight = current.data('collapsedHeight'), + heightMargin = current.data('heightMargin'); + + if (current.outerHeight(true) <= collapsedHeight + heightMargin) { + // The block is shorter than the limit, so there's no need to truncate it. + return true; + } + else { + var id = current.attr('id') || uniqueId(), + useLink = $this.options.startOpen ? $this.options.lessLink : $this.options.moreLink; + + current.attr({ + 'data-readmore': '', + 'aria-expanded': false, + 'id': id + }); + + current.after($(useLink) + .on('click', function(event) { $this.toggle(this, current[0], event); }) + .attr({ + 'data-readmore-toggle': '', + 'aria-controls': id + })); + + if (! $this.options.startOpen) { + current.css({ + height: collapsedHeight + }); + } + } + }); + + window.addEventListener('resize', function() { + resizeBoxes(); + }); + }, + + toggle: function(trigger, element, event) { + if (event) { + event.preventDefault(); + } + + if (! trigger) { + trigger = $('[aria-controls="' + this.element.id + '"]')[0]; + } + + if (! element) { + element = this.element; + } + + var $this = this, + $element = $(element), + newHeight = '', + newLink = '', + expanded = false, + collapsedHeight = $element.data('collapsedHeight'); + + if ($element.height() <= collapsedHeight) { + newHeight = $element.data('expandedHeight') + 'px'; + newLink = 'lessLink'; + expanded = true; + } + else { + newHeight = collapsedHeight; + newLink = 'moreLink'; + } + + // Fire beforeToggle callback + // Since we determined the new "expanded" state above we're now out of sync + // with our true current state, so we need to flip the value of `expanded` + $this.options.beforeToggle(trigger, element, ! expanded); + + $element.css({'height': newHeight}); + + // Fire afterToggle callback + $element.on('transitionend', function() { + $this.options.afterToggle(trigger, element, expanded); + + $(this).attr({ + 'aria-expanded': expanded + }).off('transitionend'); + }); + + $(trigger).replaceWith($($this.options[newLink]) + .on('click', function(event) { $this.toggle(this, element, event); }) + .attr({ + 'data-readmore-toggle': '', + 'aria-controls': $element.attr('id') + })); + }, + + destroy: function() { + $(this.element).each(function() { + var current = $(this); + + current.attr({ + 'data-readmore': null, + 'aria-expanded': null + }) + .css({ + maxHeight: '', + height: '' + }) + .next('[data-readmore-toggle]') + .remove(); + + current.removeData(); + }); + } + }; + + + $.fn.readmore = function(options) { + var args = arguments, + selector = this.selector; + + options = options || {}; + + if (typeof options === 'object') { + return this.each(function() { + if ($.data(this, 'plugin_' + readmore)) { + var instance = $.data(this, 'plugin_' + readmore); + instance.destroy.apply(instance); + } + + options.selector = selector; + + $.data(this, 'plugin_' + readmore, new Readmore(this, options)); + }); + } + else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { + return this.each(function () { + var instance = $.data(this, 'plugin_' + readmore); + if (instance instanceof Readmore && typeof instance[options] === 'function') { + instance[options].apply(instance, Array.prototype.slice.call(args, 1)); + } + }); + } + }; + +})(jQuery); + + -- cgit v1.2.3 From 128b0008eef797050cf5146fb1dd69505c4439d4 Mon Sep 17 00:00:00 2001 From: Stefan Parviainen Date: Mon, 5 Jan 2015 18:30:12 +0100 Subject: Replace jslider with jRange --- library/jRange/.gitignore | 2 + library/jRange/LICENSE | 21 ++ library/jRange/README.md | 5 + library/jRange/demo/index.html | 245 +++++++++++++++++++++ library/jRange/demo/main.css | 289 ++++++++++++++++++++++++ library/jRange/demo/main.less | 296 +++++++++++++++++++++++++ library/jRange/demo/normalize.css | 425 ++++++++++++++++++++++++++++++++++++ library/jRange/demo/prism/prism.css | 193 ++++++++++++++++ library/jRange/demo/prism/prism.js | 8 + library/jRange/jquery.range-min.js | 1 + library/jRange/jquery.range.css | 168 ++++++++++++++ library/jRange/jquery.range.js | 297 +++++++++++++++++++++++++ library/jRange/jquery.range.less | 192 ++++++++++++++++ 13 files changed, 2142 insertions(+) create mode 100644 library/jRange/.gitignore create mode 100644 library/jRange/LICENSE create mode 100644 library/jRange/README.md create mode 100644 library/jRange/demo/index.html create mode 100644 library/jRange/demo/main.css create mode 100644 library/jRange/demo/main.less create mode 100644 library/jRange/demo/normalize.css create mode 100644 library/jRange/demo/prism/prism.css create mode 100644 library/jRange/demo/prism/prism.js create mode 100644 library/jRange/jquery.range-min.js create mode 100644 library/jRange/jquery.range.css create mode 100644 library/jRange/jquery.range.js create mode 100644 library/jRange/jquery.range.less (limited to 'library') diff --git a/library/jRange/.gitignore b/library/jRange/.gitignore new file mode 100644 index 000000000..089ae868a --- /dev/null +++ b/library/jRange/.gitignore @@ -0,0 +1,2 @@ + +*.codekit diff --git a/library/jRange/LICENSE b/library/jRange/LICENSE new file mode 100644 index 000000000..8f47b9a63 --- /dev/null +++ b/library/jRange/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Nitin Hayaran + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/library/jRange/README.md b/library/jRange/README.md new file mode 100644 index 000000000..5cbfe6aa8 --- /dev/null +++ b/library/jRange/README.md @@ -0,0 +1,5 @@ +## jQuery plugin to create Range Selector + +![jRange Preview](http://i.imgur.com/da8uZwx.png) + +[Demo and Documentation](http://nitinhayaran.github.io/jRange/demo/) \ No newline at end of file diff --git a/library/jRange/demo/index.html b/library/jRange/demo/index.html new file mode 100644 index 000000000..ac443f11f --- /dev/null +++ b/library/jRange/demo/index.html @@ -0,0 +1,245 @@ + + + + + jRange : jQuery Range Selector + + + + + + + + +
+
+

jRange

+

jQuery Plugin to create Range Selector

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

See it in Action

+

Play around with the demo

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

How to Use

+

Lets see some code

+

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

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

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

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

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

+ +

Options

+

See configuration options

+

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

amount of increment on each step

+
scaleOptionalArray +

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

+
showLabelsOptionalBoolean +

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

+ Default : true +
showScaleOptionalBoolean +

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

+ Default : true +
formatOptionalString / Function +

this is used to show label on the pointer

+ Default : "%s" +

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

+

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

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

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

+
isRangeOptionalBoolean + Default : false +

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

+
onstatechangeOptionalFunction +

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

+

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

+
+ +

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