// ========================================================================== // Project: SproutCore
- JavaScript Application Framework // Copyright: ©2012 Michael Krotscheck and contributors. // License: Licened under MIT license (see license.js) // ==========================================================================
/**
* Renders and updates the DOM representation of a media slider. * * Parameters ------------------------- Requires the following parameters: - * `value` -- a value from 0 to 1. - `frame` -- containing the frame in which * the slider is being drawn. */
SC
.BaseTheme.mediaSliderRenderDelegate = SC
.RenderDelegate.create({
className: 'sc-media-slider-view', render: function(dataSource, context) { this.addSizeClassName(dataSource, context); var blankImage = SC.BLANK_IMAGE_URL; var valueMax = dataSource.get('maximum'); var valueMin = dataSource.get('minimum'); var valueNow = dataSource.get('ariaValue'); // addressing accessibility context.setAttr({ 'aria-valuemax': valueMax, 'aria-valuemin': valueMin, 'aria-valuenow': valueNow, 'aria-orientation': 'horizontal' }); if(valueMin !== 0 || valueMax !== 100) { context.setAttr('aria-valuetext', valueNow); } context = context.begin('span').addClass('track'); this.includeSlices(dataSource, context, SC.THREE_SLICE); context.push('<span class="sc-loaded-ranges"></span>'); context.push('<img src="' + blankImage + '" class="sc-handle" style="left: ' + dataSource.get('value') + '%" />' + '</span>'); context = context.end(); dataSource.get('renderState')._cachedHandle = null; }, update: function(dataSource, jquery) { this.updateSizeClassName(dataSource, jquery); var valueMax = dataSource.get('maximum'); var valueMin = dataSource.get('minimum'); var valueNow = dataSource.get('ariaValue'); // addressing accessibility jquery.attr({ 'aria-valuemax': valueMax, 'aria-valuemin': valueMin, 'aria-valuenow': valueNow, 'aria-orientation': 'horizontal' }); if(valueMin !== 0 || valueMax !== 100) { jquery.attr('aria-valuetext', valueNow); } if(dataSource.didChangeFor('sliderRenderDelegate', 'value')) { var handle = dataSource.get('renderState')._cachedHandle; if(!handle) { handle = dataSource.get('renderState')._cachedHandle = jquery.find('.sc-handle'); } var value = dataSource.get('value'); handle.css('left', value + "%"); } }
});