1 // ========================================================================== 2 // Project: SproutCore - JavaScript Application Framework 3 // Copyright: ©2012 Michael Krotscheck and contributors. 4 // License: Licened under MIT license (see license.js) 5 // ========================================================================== 6 7 /** 8 * Renders and updates the DOM representation of a media slider. 9 * 10 * Parameters ------------------------- Requires the following parameters: - 11 * `value` -- a value from 0 to 1. - `frame` -- containing the frame in which 12 * the slider is being drawn. 13 */ 14 15 SC.BaseTheme.mediaSliderRenderDelegate = SC.RenderDelegate.create({ 16 17 className: 'sc-media-slider-view', 18 19 render: function(dataSource, context) { 20 this.addSizeClassName(dataSource, context); 21 22 var blankImage = SC.BLANK_IMAGE_URL; 23 var valueMax = dataSource.get('maximum'); 24 var valueMin = dataSource.get('minimum'); 25 var valueNow = dataSource.get('ariaValue'); 26 27 // addressing accessibility 28 context.setAttr({ 29 'aria-valuemax': valueMax, 30 'aria-valuemin': valueMin, 31 'aria-valuenow': valueNow, 32 'aria-orientation': 'horizontal' 33 }); 34 if(valueMin !== 0 || valueMax !== 100) { 35 context.setAttr('aria-valuetext', valueNow); 36 } 37 38 context = context.begin('span').addClass('track'); 39 this.includeSlices(dataSource, context, SC.THREE_SLICE); 40 context.push('<span class="sc-loaded-ranges"></span>'); 41 context.push('<img src="' + blankImage + '" class="sc-handle" style="left: ' + dataSource.get('value') + '%" />' + '</span>'); 42 43 context = context.end(); 44 45 dataSource.get('renderState')._cachedHandle = null; 46 }, 47 48 update: function(dataSource, jquery) { 49 this.updateSizeClassName(dataSource, jquery); 50 51 var valueMax = dataSource.get('maximum'); 52 var valueMin = dataSource.get('minimum'); 53 var valueNow = dataSource.get('ariaValue'); 54 55 // addressing accessibility 56 jquery.attr({ 57 'aria-valuemax': valueMax, 58 'aria-valuemin': valueMin, 59 'aria-valuenow': valueNow, 60 'aria-orientation': 'horizontal' 61 }); 62 if(valueMin !== 0 || valueMax !== 100) { 63 jquery.attr('aria-valuetext', valueNow); 64 } 65 66 if(dataSource.didChangeFor('sliderRenderDelegate', 'value')) { 67 var handle = dataSource.get('renderState')._cachedHandle; 68 if(!handle) { 69 handle = dataSource.get('renderState')._cachedHandle = jquery.find('.sc-handle'); 70 } 71 72 var value = dataSource.get('value'); 73 handle.css('left', value + "%"); 74 } 75 } 76 77 }); 78