| 1 | /* |
|---|
| 2 | * jQuery UI Slider Access |
|---|
| 3 | * By: Trent Richardson [http://trentrichardson.com] |
|---|
| 4 | * Version 0.3 |
|---|
| 5 | * Last Modified: 10/20/2012 |
|---|
| 6 | * |
|---|
| 7 | * Copyright 2011 Trent Richardson |
|---|
| 8 | * Dual licensed under the MIT and GPL licenses. |
|---|
| 9 | * http://trentrichardson.com/Impromptu/GPL-LICENSE.txt |
|---|
| 10 | * http://trentrichardson.com/Impromptu/MIT-LICENSE.txt |
|---|
| 11 | * |
|---|
| 12 | */ |
|---|
| 13 | (function($){ |
|---|
| 14 | |
|---|
| 15 | $.fn.extend({ |
|---|
| 16 | sliderAccess: function(options){ |
|---|
| 17 | options = options || {}; |
|---|
| 18 | options.touchonly = options.touchonly !== undefined? options.touchonly : true; // by default only show it if touch device |
|---|
| 19 | |
|---|
| 20 | if(options.touchonly === true && !("ontouchend" in document)) |
|---|
| 21 | return $(this); |
|---|
| 22 | |
|---|
| 23 | return $(this).each(function(i,obj){ |
|---|
| 24 | var $t = $(this), |
|---|
| 25 | o = $.extend({},{ |
|---|
| 26 | where: 'after', |
|---|
| 27 | step: $t.slider('option','step'), |
|---|
| 28 | upIcon: 'ui-icon-plus', |
|---|
| 29 | downIcon: 'ui-icon-minus', |
|---|
| 30 | text: false, |
|---|
| 31 | upText: '+', |
|---|
| 32 | downText: '-', |
|---|
| 33 | buttonset: true, |
|---|
| 34 | buttonsetTag: 'span', |
|---|
| 35 | isRTL: false |
|---|
| 36 | }, options), |
|---|
| 37 | $buttons = $('<'+ o.buttonsetTag +' class="ui-slider-access">'+ |
|---|
| 38 | '<button data-icon="'+ o.downIcon +'" data-step="'+ (o.isRTL? o.step : o.step*-1) +'">'+ o.downText +'</button>'+ |
|---|
| 39 | '<button data-icon="'+ o.upIcon +'" data-step="'+ (o.isRTL? o.step*-1 : o.step) +'">'+ o.upText +'</button>'+ |
|---|
| 40 | '</'+ o.buttonsetTag +'>'); |
|---|
| 41 | |
|---|
| 42 | $buttons.children('button').each(function(j, jobj){ |
|---|
| 43 | var $jt = $(this); |
|---|
| 44 | $jt.button({ |
|---|
| 45 | text: o.text, |
|---|
| 46 | icons: { primary: $jt.data('icon') } |
|---|
| 47 | }) |
|---|
| 48 | .click(function(e){ |
|---|
| 49 | var step = $jt.data('step'), |
|---|
| 50 | curr = $t.slider('value'), |
|---|
| 51 | newval = curr += step*1, |
|---|
| 52 | minval = $t.slider('option','min'), |
|---|
| 53 | maxval = $t.slider('option','max'), |
|---|
| 54 | slidee = $t.slider("option", "slide") || function(){}, |
|---|
| 55 | stope = $t.slider("option", "stop") || function(){}; |
|---|
| 56 | |
|---|
| 57 | e.preventDefault(); |
|---|
| 58 | |
|---|
| 59 | if(newval < minval || newval > maxval) |
|---|
| 60 | return; |
|---|
| 61 | |
|---|
| 62 | $t.slider('value', newval); |
|---|
| 63 | |
|---|
| 64 | slidee.call($t, null, { value: newval }); |
|---|
| 65 | stope.call($t, null, { value: newval }); |
|---|
| 66 | }); |
|---|
| 67 | }); |
|---|
| 68 | |
|---|
| 69 | // before or after |
|---|
| 70 | $t[o.where]($buttons); |
|---|
| 71 | |
|---|
| 72 | if(o.buttonset){ |
|---|
| 73 | $buttons.removeClass('ui-corner-right').removeClass('ui-corner-left').buttonset(); |
|---|
| 74 | $buttons.eq(0).addClass('ui-corner-left'); |
|---|
| 75 | $buttons.eq(1).addClass('ui-corner-right'); |
|---|
| 76 | } |
|---|
| 77 | |
|---|
| 78 | // adjust the width so we don't break the original layout |
|---|
| 79 | var bOuterWidth = $buttons.css({ |
|---|
| 80 | marginLeft: ((o.where == 'after' && !o.isRTL) || (o.where == 'before' && o.isRTL)? 10:0), |
|---|
| 81 | marginRight: ((o.where == 'before' && !o.isRTL) || (o.where == 'after' && o.isRTL)? 10:0) |
|---|
| 82 | }).outerWidth(true) + 5; |
|---|
| 83 | var tOuterWidth = $t.outerWidth(true); |
|---|
| 84 | $t.css('display','inline-block').width(tOuterWidth-bOuterWidth); |
|---|
| 85 | }); |
|---|
| 86 | } |
|---|
| 87 | }); |
|---|
| 88 | |
|---|
| 89 | })(jQuery); |
|---|
