Skip to content

Commit

Permalink
fix ariatemplates#713 Slider widgets improvement (touch library)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marclaval
marclaval committed Sep 13, 2013
1 parent 9939281 commit 07578f8
Show file tree
Hide file tree
Showing 11 changed files with 210 additions and 77 deletions.
20 changes: 15 additions & 5 deletions src/aria/touch/widgets/DoubleSlider.js
View file
Expand Up @@ -26,7 +26,7 @@ Aria.classDefinition({
$statics : {
INVALID_CONFIGURATION : "Invalid configuration for the slider!"
},
$dependencies : ["aria.touch.widgets.SliderCfgBeans", "aria.utils.Dom", "aria.utils.Type", "aria.utils.Mouse"],
$dependencies : ["aria.touch.widgets.SliderCfgBeans", "aria.utils.Dom", "aria.utils.Type", "aria.utils.Mouse", "aria.utils.Html"],
/**
* Slider Constructor.
* @param {aria.touch.widgets.SliderCfgBeans:DoubleSliderCfg} cfg slider configuration
Expand Down Expand Up @@ -238,11 +238,21 @@ Aria.classDefinition({
this.initWidget = Aria.empty;
return out.write(this.INVALID_CONFIGURATION);
}

var cfg = this._cfg;
if (typeof cfg.attributes == 'undefined') {
cfg.attributes = {};
}
if (typeof cfg.attributes.classList == 'undefined') {
cfg.attributes.classList = [];
}
cfg.attributes.classList.push("touchLibDoubleSlider");

out.write([
// Div containing the widget
'<div class="touchLibSlider" style="width:', this._cfg.width, 'px;">',
'<div ', aria.utils.Html.buildAttributeList(cfg.attributes), '" style="width:', this._cfg.width, 'px;">',
// Rail, thumbs move over here
'<span class="touchContainer" style="width:', this._cfg.width, 'px;" id="', this._domId, '">',
'<span class="touchContainer" style="width:', cfg.width, 'px;" id="', this._domId, '">',
// Two thumbs
'<span id="', this._secondDomId, '" class="sliderButton secondPoint" style="left:0px;"></span>',
'<span id="', this._firstDomId, '" class="sliderButton firstPoint" style="left:0px;"></span>',
Expand Down Expand Up @@ -326,8 +336,8 @@ Aria.classDefinition({
* @protected
*/
_updateHighlight : function () {
var left = this._savedX1 + this._firstWidth;
var widthHighlight = this._savedX2 - left;
var left = this._savedX1 + this._firstWidth / 2;
var widthHighlight = this._savedX2 + (this._secondWidth / 2) - left;
this._hightlight.style.left = left + "px";
this._hightlight.style.width = widthHighlight + "px";
},
Expand Down
14 changes: 7 additions & 7 deletions src/aria/touch/widgets/DoubleSliderCSS.tpl.css
View file
Expand Up @@ -19,22 +19,22 @@

{macro main()}

div.touchLibSlider {
div.touchLibDoubleSlider {
background: none repeat scroll 0 0 #EFF9FF;
border: 2px solid #999999;
border-radius: 1.5em;
height: 17px;
}
div.touchLibSlider span {
div.touchLibDoubleSlider span {
position: absolute;
}
div.touchLibSlider span.sliderButton {
div.touchLibDoubleSlider span.sliderButton {
background: none repeat scroll 0 0 #ffffff;
border: 2px solid #4776A7;
border-radius: 32px 32px 32px 32px;
width: 14px;
}
div.touchLibSlider span.firstPoint {
div.touchLibDoubleSlider span.firstPoint {
border: 2px solid #4776A7;
background-color:#4776A7;
border-radius: 1.5em 2px 2px 1.5em;
Expand All @@ -43,7 +43,7 @@ div.touchLibSlider span.firstPoint {
z-index: 3;
margin: 0;
}
div.touchLibSlider span.secondPoint {
div.touchLibDoubleSlider span.secondPoint {
border: 2px solid #4776A7;
background-color: #4776A7;
border-radius: 2px 1.5em 1.5em 2px;
Expand All @@ -52,12 +52,12 @@ div.touchLibSlider span.secondPoint {
z-index: 3;
margin: 0;
}
div.touchLibSlider span.touchContainer {
div.touchLibDoubleSlider span.touchContainer {
z-index: 2;
height: 28px;
margin: -6px 0 0 0;
}
div.touchLibSlider span.sliderHighLight {
div.touchLibDoubleSlider span.sliderHighLight {
z-index: 1;
height: 17px;
width: 0px;
Expand Down
76 changes: 66 additions & 10 deletions src/aria/touch/widgets/Slider.js
View file
Expand Up @@ -24,7 +24,7 @@ Aria.classDefinition({
INVALID_CONFIGURATION : "Invalid configuration for the slider!"
},
// The dependency on aria.touch.Tap is needed to be able to register on tap events
$dependencies : ["aria.touch.widgets.SliderCfgBeans", "aria.utils.Dom", "aria.touch.Tap"],
$dependencies : ["aria.touch.widgets.SliderCfgBeans", "aria.utils.Dom", "aria.touch.Tap", "aria.utils.Html"],
/**
* Slider Constructor.
* @param {aria.touch.widgets.SliderCfgBeans:SliderCfg} cfg slider configuration
Expand Down Expand Up @@ -53,6 +53,12 @@ Aria.classDefinition({
* @protected
*/
this._domId = cfg.id ? context.$getId(cfg.id) : this._createDynamicId();
/**
* Id generated for the highlight element.
* @type String
* @protected
*/
this._highlightDomId = this._domId + "_highlight";
/**
* Id generated for the slider container element.
* @type String
Expand Down Expand Up @@ -85,6 +91,20 @@ Aria.classDefinition({
*/
this._switchThreshold = cfg.switchThreshold != null ? Math.min(1, Math.max(0, cfg.switchThreshold)) : 0.5;

/**
* Label for the on side of the switch.
* @type String
* @protected
*/
this._onLabel = cfg.onLabel || "ON";

/**
* Label for the off side of the switch.
* @type String
* @protected
*/
this._offLabel = cfg.offLabel || "OFF";

/**
* Reference to the on state DOM element of the slider.
* @type HTMLElement
Expand All @@ -104,6 +124,12 @@ Aria.classDefinition({
* @protected
*/
this._slider = null;
/**
* Reference to the highlight DOM element of the slider.
* @type HTMLElement
* @protected
*/
this._hightlight = null;
/**
* Reference to the Container DOM element of the slider.
* @type HTMLElement
Expand Down Expand Up @@ -152,7 +178,7 @@ Aria.classDefinition({
*/
this._delegateId = null;

var binding = this._cfg.bindValue ? this._cfg.bindValue : null;
var binding = this._cfg.bind ? this._cfg.bind.value : null;
this._binding = binding;
if (binding) {
this._bindingCallback = {
Expand All @@ -175,7 +201,7 @@ Aria.classDefinition({
}

if (this._bindingCallback) {
var binding = this._cfg.bindValue;
var binding = this._binding;
aria.utils.Json.removeListener(binding.inside, binding.to, this._bindingCallback, false);
this._bindingCallback = null;
}
Expand All @@ -185,6 +211,7 @@ Aria.classDefinition({
this._draggable = null;
}
this._slider = null;
this._hightlight = null;
this._sliderContainer = null;
this._onContainer = null;
this._offContainer = null;
Expand Down Expand Up @@ -229,10 +256,18 @@ Aria.classDefinition({
});
delegateMarkup = aria.utils.Delegate.getMarkup(this._delegateId);
}


if (typeof cfg.attributes == 'undefined') {
cfg.attributes = {};
}
if (typeof cfg.attributes.classList == 'undefined') {
cfg.attributes.classList = [];
}
cfg.attributes.classList.push("touchLibSlider");

out.write([
// Div containing the widget
'<div class="touchLibSlider" style="width:', this._cfg.width, 'px;" ', delegateMarkup, '>',
'<div ', aria.utils.Html.buildAttributeList(cfg.attributes), '" style="width:', this._cfg.width, 'px;" ', delegateMarkup, '>',
// Rail, thumbs move over here
'<span class="touchContainer" style="width:', this._cfg.width, 'px;" id="', this._parentDomId,
'">',
Expand All @@ -242,10 +277,15 @@ Aria.classDefinition({
out.write([
// For ON state Markup
'<div style="left:0px;width:', this._cfg.width, 'px;" class="touchLibSwitchOn" id="',
this._onSwitchId, '">ON</div>',
this._onSwitchId, '">', this._onLabel, '</div>',
// For OFF state Markup
'<div style="left:0px;width:0px;" class="touchLibSwitchOff" id="', this._offSwitchId,
'">OFF</div>'].join(""));
'">', this._offLabel,'</div>'].join(""));
}
else {
out.write([
'<span class="sliderHighLight" id="', this._highlightDomId, '"></span>'
].join(""));
}
out.write('</span></div>');
},
Expand All @@ -260,6 +300,7 @@ Aria.classDefinition({
var domUtils = aria.utils.Dom;

this._slider = domUtils.getElementById(this._domId);
this._highlight = domUtils.getElementById(this._highlightDomId);
this._sliderContainer = domUtils.getElementById(this._parentDomId);
this._sliderDimension = aria.utils.Dom.getGeometry(this._sliderContainer);
this._sliderWidth = parseInt(domUtils.getStyle(this._slider, "width"), 10);
Expand Down Expand Up @@ -425,6 +466,10 @@ Aria.classDefinition({
if (this._isSwitch) {
this._switchDisplay();
}
else {
this._updateHighlight();
}

},

/**
Expand Down Expand Up @@ -512,8 +557,19 @@ Aria.classDefinition({
if (this._isSwitch) {
this._switchDisplay();
}
else {
this._updateHighlight();
}
}
},

/**
* Update the width of the highlight between the left side and the thumb.
* @protected
*/
_updateHighlight : function() {
this._highlight.style.width = (this._savedX + this._sliderWidth / 2) + "px";
},

/**
* Handle delegated events
Expand All @@ -527,13 +583,13 @@ Aria.classDefinition({
return true;
}

if (cfg.tapToToggle && cfg.toggleSwitch) {
if ((cfg.tapToToggle || cfg.tapToMove) && cfg.toggleSwitch) {
// With this configuration, on tap we want to toggle the value
this._value = this._value >= this._switchThreshold ? 0 : 1;
} else if (cfg.tapToMove) {
this._savedX = evt.detail.currentX - this._sliderDimension.x;
this._savedX = evt.detail.currentX - this._sliderDimension.x - this._sliderWidth / 2;
this._savedX = (this._savedX > this._railWidth) ? this._railWidth : this._savedX;
this._value = Math.max(this._savedX / this._railWidth, 0) >= this._switchThreshold ? 1 : 0;
this._value = Math.max(this._savedX / this._railWidth, 0);
}
this._storeValue();
this._setLeftPosition();
Expand Down
8 changes: 8 additions & 0 deletions src/aria/touch/widgets/SliderCSS.tpl.css
View file
Expand Up @@ -68,6 +68,14 @@
height: 14px;
z-index: 2;
}

div.touchLibSlider span.sliderHighLight {
z-index: 1;
height: 17px;
width: 0px;
background-color: #E3E3E3;
border-radius: 32px 0 0 32px;
}

{/macro}

Expand Down
48 changes: 32 additions & 16 deletions src/aria/touch/widgets/SliderCfgBeans.js
View file
Expand Up @@ -53,22 +53,38 @@ Aria.beanDefinitions({
$description : "When using the widget as switch, this is the value above which all value are converted to 1",
$default : 0.5
},
bindValue : {
$type : "json:Object",
$description : "Binding for the value of the slider.",
$properties : {
inside : {
$type : "json:ObjectRef",
$description : "Reference to the object that holds the property to bind to.",
$mandatory : true
},
to : {
$type : "json:String",
$description : "Name of the JSON property to bind to.",
$mandatory : true
}
}
}
onLabel : {
$type : "json:String",
$description : "On label for switch mode",
$default : "ON"
},
offLabel : {
$type : "json:String",
$description : "Off label for switch mode",
$default : "OFF"
},
bind : {
$type : "json:Object",
$description : "Automatic bindings for the widget properties",
$properties : {
value : {
$type : "json:Object",
$description : "Binding for the widget's value",
$properties : {
inside : {
$type : "json:ObjectRef",
$description : "Reference to the object that holds the property to bind to.",
$mandatory : true
},
to : {
$type : "json:String",
$description : "Name of the property to bind to.",
$mandatory : true
}
}
}
}
}
}
},
"DoubleSliderCfg" : {
Expand Down
14 changes: 2 additions & 12 deletions test/aria/touch/TouchTestSuite.js
View file
Expand Up @@ -22,18 +22,8 @@ Aria.classDefinition({
$constructor : function () {
this.$TestSuite.constructor.call(this);
this.addTests("test.aria.touch.gestures.GesturesTestSuite");
this.addTests("test.aria.touch.widgets.WidgetsTestSuite");
this.addTests("test.aria.touch.EventTest");
this.addTests("test.aria.touch.widgets.DoubleSlider");
this.addTests("test.aria.touch.widgets.DoubleSliderError");
this.addTests("test.aria.touch.widgets.DoubleSliderSetValue");
this.addTests("test.aria.touch.widgets.DoubleSliderChange");
this.addTests("test.aria.touch.widgets.SingleSliderValue");
this.addTests("test.aria.touch.widgets.SingleSliderDrag");
this.addTests("test.aria.touch.widgets.SliderSwitch");
this.addTests("test.aria.touch.widgets.SliderSwitchDrag");
this.addTests("test.aria.touch.widgets.ButtonTouch");
this.addTests("test.aria.touch.widgets.dialog.closeOnClick.DialogTestCase");
this.addTests("test.aria.touch.widgets.dialog.events.DialogEventsTestCase");
this.addTests("test.aria.touch.widgets.dialog.events.DialogAnimationsTestCase");

}
});

0 comments on commit 07578f8

Please sign in to comment.