Skip to content
Browse files

gallery-2011.11.30-20-58 edurbin gallery-slider-tick-base

  • Loading branch information...
1 parent fe43263 commit 1442729082d25085593575de50594c3322cb1766 YUI Builder committed Nov 30, 2011
View
29 src/gallery-slider-tick-base/build.properties
@@ -0,0 +1,29 @@
+# Slider Tick Base Build Properties
+
+# As long as the 'builder' project is cloned to the default folder
+# next to the 'yui3-gallery' project folder, the 'builddir' property does not
+# need to be changed
+#
+# If the 'builder' project is checked out to an alternate location, this
+# property should be updated to point to the checkout location.
+builddir=../../../builder/componentbuild
+
+# The name of the component. E.g. event, attribute, widget
+component=gallery-slider-tick-base
+
+# The list of files which should be concatenated to create the component
+# NOTE: For a css component. (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead.
+# component.jsfiles=my.custom.module.js, my.custom.moduleHelperClass.js, my.custom.moduleSubComponentClass.js
+component.jsfiles=gallery-slider-tick-base.js
+
+# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3.
+component.requires=node, slider-base, graphics
+
+# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3.
+#component.supersedes=another.custom.module
+
+# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3.
+component.optional=
+# If your module has a skin file, set this flag to "true"
+component.skinnable=false
+#component.skinnable=true
View
7 src/gallery-slider-tick-base/build.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="Slider Tick Base" default="local">
+ <description>Slider Base that allows tickpoints to be drawn along the axis</description>
+ <property file="build.properties" />
+ <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
View
62 src/gallery-slider-tick-base/js/gallery-slider-tick-base.js
@@ -0,0 +1,62 @@
+//Create a new slider base that supports rendering positioned tick marks along the rail
+
+ // Create a new Y.ImageChart class that extends Y.CartesianChart.
+ var VALUES = 'values';
+ Y.SliderTickBase = Y.Base.create('gallery-slider-tick-base', Y.SliderBase, [
+
+ ], {
+ addTickMarks: function() {
+ var values = this.get( VALUES );
+ if(values) {
+ var rail = this.rail; //rail node
+
+ var thumbSize = this.thumb.getStyle( this._key.dim );
+ thumbSize = parseFloat( thumbSize ) || 15;
+
+ if(this.graphic == null) {
+ this.graphic = new Y.Graphic({render: rail});
+ }
+ this.graphic.removeAllShapes();
+
+
+ //draw a tick at every position
+ for(var i = 0; i<values.length; i++) {
+ var currentValue = values[i];
+ var currentPos = this._valueToOffset(currentValue) + (thumbSize / 2);
+ this._drawTickMark(currentPos, '#CDCDCD');
+ }
+
+ }
+ },
+
+ _drawTickMark: function(currentPos, tickColor) {
+ var tickHeight = 3;
+ var topTickOffset = 2;
+ var bottomTickOffset = 15;
+
+ var topTickMark = this.graphic.addShape({
+ type: 'rect',
+ width: 1 ,
+ height: tickHeight,
+ x: currentPos,
+ y: topTickOffset
+ });
+ topTickMark.set('stroke', { color: tickColor, weight: 1, opacity: 0.5 });
+ topTickMark.set('fill', { color: tickColor, opacity: 0.5 });
+
+ var bottomTickMark = this.graphic.addShape({
+ type: 'rect',
+ width: 1 ,
+ height: tickHeight,
+ x: currentPos,
+ y: bottomTickOffset
+ });
+ bottomTickMark.set('stroke', { color: tickColor, weight: 1, opacity: 0.5 });
+ bottomTickMark.set('fill', { color: tickColor, opacity: 0.5 });
+ }
+ }, {
+ ATTRS: {
+ // Define widget attributes here (optional).
+ }
+ // Define static properties and methods here (optional).
+ });
View
63 src/gallery-slider-tick-base/js/gallery-slider-tick-base.js~
@@ -0,0 +1,63 @@
+//Create a new slider base that supports rendering positioned tick marks along the rail
+YUI.add('gallery-slider-tick-base', function (Y) {
+ // Create a new Y.ImageChart class that extends Y.CartesianChart.
+ var VALUES = 'values';
+ Y.SliderTickBase = Y.Base.create('gallery-slider-tick-base', Y.SliderBase, [
+
+ ], {
+ addTickMarks: function() {
+ var values = this.get( VALUES );
+ if(values) {
+ var rail = this.rail; //rail node
+
+ var thumbSize = this.thumb.getStyle( this._key.dim );
+ thumbSize = parseFloat( thumbSize ) || 15;
+
+ if(this.graphic == null) {
+ this.graphic = new Y.Graphic({render: rail});
+ }
+ this.graphic.removeAllShapes();
+
+
+ //draw a tick at every position
+ for(var i = 0; i<values.length; i++) {
+ var currentValue = values[i];
+ var currentPos = this._valueToOffset(currentValue) + (thumbSize / 2);
+ this._drawTickMark(currentPos, '#CDCDCD');
+ }
+
+ }
+ },
+
+ _drawTickMark: function(currentPos, tickColor) {
+ var tickHeight = 3;
+ var topTickOffset = 2;
+ var bottomTickOffset = 15;
+
+ var topTickMark = this.graphic.addShape({
+ type: 'rect',
+ width: 1 ,
+ height: tickHeight,
+ x: currentPos,
+ y: topTickOffset
+ });
+ topTickMark.set('stroke', { color: tickColor, weight: 1, opacity: 0.5 });
+ topTickMark.set('fill', { color: tickColor, opacity: 0.5 });
+
+ var bottomTickMark = this.graphic.addShape({
+ type: 'rect',
+ width: 1 ,
+ height: tickHeight,
+ x: currentPos,
+ y: bottomTickOffset
+ });
+ bottomTickMark.set('stroke', { color: tickColor, weight: 1, opacity: 0.5 });
+ bottomTickMark.set('fill', { color: tickColor, opacity: 0.5 });
+ }
+ }, {
+ ATTRS: {
+ // Define widget attributes here (optional).
+ }
+ // Define static properties and methods here (optional).
+ });
+}, '@VERSION@', {requires: ['slider-base', 'graphics', 'node']});

0 comments on commit 1442729

Please sign in to comment.
Something went wrong with that request. Please try again.