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