updated documentation for slidebox and remove data- prefixes from att…

…ributes
pennyfx · Nov 15, 2012 · 3946203 · 3946203
1 parent 022fe12
commit 3946203
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/slidebox/demo/demo.html b/slidebox/demo/demo.html
@@ -25,24 +25,18 @@
 
 <body>
 
-<div id="tags" class="max-width">
+
 
 	<dl>
-
-		<dt>Slide Box</dt>
 		<dd id="slidebox">
-			<p class="description">
-				A container that allows animated transitions between content panes. Slide Box supports horizontal and vertical transitions.
-			</p>
-
 			<nav class="actions">				
 				<button data-action-type="slidePrevious"><- Previous Slide</button>
 				<button data-action-type="slideNext">Next Slide -></button>
 				<button data-action-type="slideTo">Slide To 3</button>
 				<button data-action-type="slideOrientation">Toggle orientation</button>
 			</nav>
 
-			<x-slidebox id="slidebox_demo" data-orientation='x'>
+			<x-slidebox id="slidebox_demo" orientation="x">
 				<x-slides>
 					<x-slide><img src="birnimal-calendar.png" /></x-slide>
 					<x-slide><img src="birnimal-graph.png" /></x-slide>
@@ -53,7 +47,7 @@
 
 		</dd>
 	</dl>
-</div>
+
 
 
 </body>
@@ -86,7 +80,7 @@
 					demo.slideTo(2);
 					break;
 				case 'slideOrientation':
-					demo['data-orientation'] = demo.getAttribute('data-orientation') == 'x' ? 'y' : 'x';
+					demo.orientation = demo.orientation == 'x' ? 'y' : 'x';
 					break;
 
 			}

diff --git a/slidebox/slidebox.js b/slidebox/slidebox.js
@@ -10,15 +10,15 @@
 			var slides = xtag.toArray(el.firstElementChild.children);
 			slides.forEach(function(slide){ slide.removeAttribute('selected'); });
 			slides[index || 0].setAttribute('selected', null);
-			el.firstElementChild.style[transform] = 'translate'+ (el.getAttribute('data-orientation') || 'x') + '(' + (index || 0) * (-100 / slides.length) + '%)';
+			el.firstElementChild.style[transform] = 'translate'+ (el.getAttribute('orientation') || 'x') + '(' + (index || 0) * (-100 / slides.length) + '%)';
 		},
 		init = function(toSelected){
 			var slides = this.firstElementChild;
 			if (!slides || !slides.children.length || slides.tagName.toLowerCase() != 'x-slides') return;
 
 			var	children = xtag.toArray(slides.children),
 				size = 100 / (children.length || 1),
-				orient = this.getAttribute('data-orientation') || 'x',
+				orient = this.getAttribute('orientation') || 'x',
 				style = orient == 'x' ? ['width', 'height'] : ['height', 'width'];
 
 			xtag.skipTransition(slides, function(){
@@ -45,11 +45,16 @@
 			}
 		},
 		setters: {
-			'data-orientation': function(value){
-				this.setAttribute('data-orientation', value.toLowerCase());
+			'orientation': function(value){
+				this.setAttribute('orientation', value.toLowerCase());
 				init.call(this, true);
 			},
 		},
+		getters:{
+			'orientation': function(){
+				return this.getAttribute('orientation');
+			}
+		},
 		methods: {
 			slideTo: function(index){
 				slide(this, index);

diff --git a/slidebox/xtag.json b/slidebox/xtag.json
@@ -13,5 +13,22 @@
 		"opera": 12,
 		"android": 2.1,
 		"ios": 4
+	}, 
+	"documentation":{
+		"attributes":{
+			"orientation":"Slide axis.  'x' or 'y'"
+		},
+		"setters":{
+			"orientation": "Sets the slide axis."
+		},
+		"methods":{
+			"slideTo":"Slides to a specific element index.",
+			"slideNext": "Slides to next element.",
+			"slidePrevious": "Slides to the previous element."
+		}, 
+		"events":{
+			"slideend":"Fires at the end of each slide transition."
+		}
+
 	}
 }