Lines Matching defs:Dial
20 * series of intermediate states based on the position of the Dial's handle.
24 * @class Dial
29 function Dial(config) {
30 Dial.superclass.constructor.apply(this, arguments);
33 // Y.Dial static properties
45 Dial.NAME = "dial";
56 Dial.ATTRS = {
96 * Dial sets the pixel dimension of the handle equal to handleDiameter * diameter.
110 * Dial sets the pixel dimension of the marker equal to markerDiameter * diameter.
124 * Dial sets the pixel dimension of the centerButton equal to centerButtonDiameter * diameter.
137 * initial value of the Dial
200 * Dial is simply providing a default value for the attribute.
237 return Y.ClassNameManager.getClassName(Dial.NAME, str);
240 /** array of static constants used to identify the classname applied to the Dial DOM objects
247 Dial.CSS_CLASSES = {
266 /* Static constants used to define the markup templates used to create Dial DOM elements */
270 * template that will contain the Dial's label.
278 Dial.LABEL_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.label + '"><span id="" class="' + Dial.CSS_CLASSES.labelString + '">{label}</span><span class="' + Dial.CSS_CLASSES.valueString + '"></span></div>';
282 * template that will contain the Dial's background ring.
289 Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '"><div class="' + Dial.CSS_CLASSES.northMark + '"></div></div>';
292 * template that will contain the Dial's current angle marker.
299 Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' ' + Dial.CSS_CLASSES.hidden + '"></div>';
302 * template that will contain the Dial's center button.
306 * @default <div class="[...-centerButton]"><div class="[...-resetString]">' + Y.substitute('{resetStr}', Dial.ATTRS.strings.value) + '</div></div>
309 Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + '"><div class="' + Dial.CSS_CLASSES.resetString + ' ' + Dial.CSS_CLASSES.hidden + '">{resetStr}</div></div>';
312 * template that will contain the Dial's handle.
319 Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handle + '" aria-labelledby="" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}">';
322 Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + ' ' + Dial.CSS_CLASSES.ringVml + '">'+
323 '<div class="' + Dial.CSS_CLASSES.northMark + '"></div>'+
327 Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.markerVml + ' ' + Dial.CSS_CLASSES.hidden + '">'+
333 Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + ' ' + Dial.CSS_CLASSES.centerButtonVml + '">'+
338 '<div class="' + Dial.CSS_CLASSES.resetString + ' ' + Dial.CSS_CLASSES.hidden + '">{resetStr}</div>'+
341 Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handleVml + '" aria-labelledby="" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}">'+
349 /* Dial extends the base Widget class */
350 Y.extend(Dial, Widget, {
353 * creates the DOM structure for the Dial.
420 this._resetString.removeClass(Dial.CSS_CLASSES.hidden);
430 this._resetString.addClass(Dial.CSS_CLASSES.hidden);
435 * binds Dial interaction to the configured value model.
479 * Sets _timesWrapped based on Dial value
480 * to net integer revolutions the user dragged the handle around the Dial
483 * @param val {Number} current value of the Dial
495 * gets the angle of the line from the center of the Dial to the center of the handle
554 * handles the user dragging the handle around the Dial, gets the angle,
556 * Sets the new value of the Dial
632 * then the Dial value is set at the end of this method
758 * handles the user starting to drag the handle around the Dial
765 this._markerNode.removeClass(Dial.CSS_CLASSES.hidden);
791 this._markerNode.addClass(Dial.CSS_CLASSES.hidden);
801 * returns the XY of the fixed position, handleDistance, from the center of the Dial (resting position).
842 this._markerNode.addClass(Dial.CSS_CLASSES.hidden);
843 this._resetString.addClass(Dial.CSS_CLASSES.hidden);
895 * renders the DOM object for the Dial's label
902 label = contentBox.one("." + Dial.CSS_CLASSES.label);
904 label = Node.create(Y.substitute(Dial.LABEL_TEMPLATE, this.get('strings')));
908 this._valueStringNode = this._labelNode.one("." + Dial.CSS_CLASSES.valueString);
912 * renders the DOM object for the Dial's background ring
919 ring = contentBox.one("." + Dial.CSS_CLASSES.ring);
921 ring = contentBox.appendChild(Dial.RING_TEMPLATE);
928 * renders the DOM object for the Dial's background marker which
936 marker = contentBox.one("." + Dial.CSS_CLASSES.marker);
938 marker = contentBox.one('.' + Dial.CSS_CLASSES.ring).appendChild(Dial.MARKER_TEMPLATE);
944 * renders the DOM object for the Dial's center
951 centerButton = contentBox.one("." + Dial.CSS_CLASSES.centerButton);
953 centerButton = Node.create(Y.substitute(Dial.CENTER_BUTTON_TEMPLATE, this.get('strings')));
954 contentBox.one('.' + Dial.CSS_CLASSES.ring).append(centerButton);
957 this._resetString = this._centerButtonNode.one('.' + Dial.CSS_CLASSES.resetString);
961 * renders the DOM object for the Dial's user draggable handle
967 var labelId = Dial.CSS_CLASSES.label + Y.guid(), //get this unique id once then use for handle and label for ARIA
969 handle = contentBox.one("." + Dial.CSS_CLASSES.handle);
971 handle = Node.create(Y.substitute(Dial.HANDLE_TEMPLATE, this.get('strings')));
973 this._labelNode.one('.' + Dial.CSS_CLASSES.labelString).setAttribute('id', labelId); // When handle gets focus, screen reader will include label text when reading the value.
974 contentBox.one('.' + Dial.CSS_CLASSES.ring).append(handle);
989 this.get("contentBox").one("." + Dial.CSS_CLASSES.labelString).setContent(str);
1001 this.get("contentBox").one("." + Dial.CSS_CLASSES.resetString).setContent(str);
1007 * sets the tooltip HTML string in the Dial's handle
1019 * sets the Dial's value in response to key events.
1053 * sets the Dial's value in response to left or right key events
1072 * sets the Dial's value in response to left or right key events when a meta (mac command/apple) key is also pressed
1091 * increments Dial value by a minor increment
1100 // Dial's value needs a number. -0 makes it a number, but removes trailing zeros.
1107 * decrements Dial value by a minor increment
1119 * increments Dial value by a major increment
1131 * decrements Dial value by a major increment
1143 * sets Dial value to dial's max attr
1153 * sets Dial value to dial's min attr
1163 * resets Dial value to the orignal initial value.
1173 this._resetString.addClass(Dial.CSS_CLASSES.hidden); //[#2530441]
1178 * returns the handle angle associated with the current value of the Dial.
1182 * @param newVal {Number} the current value of the Dial
1183 * @return {Number} the angle associated with the current Dial value
1193 * returns the value of the Dial calculated from the current handle angle
1196 * @param angle {Number} the current angle of the Dial's handle
1197 * @return {Number} the current Dial value corresponding to the handle position
1213 * calls the method to update the UI whenever the Dial value changes
1227 * @param val {Number} a raw value to set to the Dial
1236 * Updates the UI display value of the Dial to reflect
1241 * @param val {Number} value of the Dial
1246 if(this._handleNode.hasClass(Dial.CSS_CLASSES.dragging) === false){
1256 this._markerNode.addClass(Dial.CSS_CLASSES.markerMaxMin);
1260 this._markerNode.removeClass(Dial.CSS_CLASSES.hidden);
1265 this._markerNode.removeClass(Dial.CSS_CLASSES.markerMaxMin);
1266 if(this._handleNode.hasClass(Dial.CSS_CLASSES.dragging) === false){ // if not max || min, and not dragging handle, hide the marker
1267 this._markerNode.addClass(Dial.CSS_CLASSES.hidden);
1277 * @param val {Number} value of the Dial
1286 Y.Dial = Dial;