Skip to content
Permalink
Browse files

Added a wrapper for the slider polyfill

Allows enhancing dynamically created sliders in the same way as other polyfills
  • Loading branch information...
LaurentGoderre committed May 2, 2014
1 parent df90cba commit 51bafb08f355f21d05ccaceaeb74ca107b099679
@@ -356,6 +356,7 @@ Modernizr.load([
test: Modernizr.inputtypes.range,
nope: [
"plyfll!slider.min.js",
"plyfll!slider_wrapper.min.js",
"plyfll!slider.min.css"
],
callback: function( url ) {
@@ -7,12 +7,23 @@

var currentValueString = document.documentElement.lang === "fr" ?
"Valeur actuelle :" :
"Current Value:";
"Current Value:",
$document = wb.doc,
$slider;

wb.doc.on( "change", "#html5shim-1, #html5shim-2", function( event ) {
$document.on( "change", "#html5shim-1, #html5shim-2", function( event ) {
document
.getElementById( event.target.id + "-out" )
.innerHTML = "(" + currentValueString + " " + this.value + ")";
});

$document.one( "timerpoke.wb", function() {
$slider = $( "<input name='html5shim-3' id='html5shim-3' type='range' value='50'/>" );
$slider.appendTo( "#slider-prg" ).trigger( "wb-init.wb-slider" );
setTimeout( function() {
$slider.get( 0 ).value = 85;
$slider.trigger( "wb-update.wb-slider" );
}, 2000);
});

})( jQuery, document, wb );
@@ -38,4 +38,21 @@
<h3>Coding</h3>
<pre><code>&lt;input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Range: 20 to 50 in steps of 10" value="20" /&gt;</code></pre>
</section>
<section>
<h3>Range: Programmatically created <span id="html5shim-3-out"></span></h3>
<p id="slider-prg"></p>
</section>
<section>
<h3>Coding</h3>
<pre><code>&lt;p id="slider-prg"&gt;&lt;/p&gt;
&lt;script&gt;
$slider = $( "&lt;input name='html5shim-3' id='html5shim-3' type='range' value='50'/&gt;" );
$slider.appendTo( "#slider-prg" ).trigger( "wb-init.wb-slider" );
setTimeout( function() {
$slider.get( 0 ).value = 85;
$slider.trigger( "wb-update.wb-slider" );
}, 2000);
&lt;/script&gt;
</code></pre>
</section>
</div>
@@ -38,4 +38,21 @@
<h3>Code</h3>
<pre><code>&lt;input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Étendue&#160;: 20 à 50 avec les augmentations de 10" value="20" /&gt;</code></pre>
</section>
<section>
<h3>Étendue&#160;: Créée programmaticalement <span id="html5shim-3-out"></span></h3>
<p id="slider-prg"></p>
</section>
<section>
<h3>Code</h3>
<pre><code>&lt;p id="slider-prg"&gt;&lt;/p&gt;
&lt;script&gt;
$slider = $( "&lt;input name='html5shim-3' id='html5shim-3' type='range' value='50'/&gt;" );
$slider.appendTo( "#slider-prg" ).trigger( "wb-init.wb-slider" );
setTimeout( function() {
$slider.get( 0 ).value = 85;
$slider.trigger( "wb-update.wb-slider" );
}, 2000);
&lt;/script&gt;
</code></pre>
</section>
</div>
@@ -0,0 +1,35 @@
/**
* @title WET-BOEW slider polyfill wrapper
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
* @author @LaurentGoderre
*/
(function( $, window, wb ) {
"use strict";

/*
* Variable and function definitions.
* These are global to the polyfill - meaning that they will be initialized once per page.
*/
var polyfillName = "wb-slider",
selector = "input",
initEvent = "wb-init." + polyfillName,
updateEvent = "wb-update." + polyfillName;

// Bind the init and update event of the plugin
wb.doc.on( initEvent + " " + updateEvent, selector, function( event ) {
var eventTarget = event.target;

if ( event.currentTarget === eventTarget ) {
switch ( event.type ) {
case "wb-init":
window.fdSlider.createSlider( {
inp: eventTarget
});
break;
case "wb-update":
window.fdSlider.updateSlider( eventTarget.id );
}
}
});

})( jQuery, window, wb );

0 comments on commit 51bafb0

Please sign in to comment.
You can’t perform that action at this time.