From 39462036f2078d96cdcf3fa67d53f85e92f449da Mon Sep 17 00:00:00 2001 From: Arron Schaar Date: Thu, 15 Nov 2012 11:44:53 -0800 Subject: [PATCH] updated documentation for slidebox and remove data- prefixes from attributes --- slidebox/demo/demo.html | 14 ++++---------- slidebox/slidebox.js | 13 +++++++++---- slidebox/xtag.json | 17 +++++++++++++++++ 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/slidebox/demo/demo.html b/slidebox/demo/demo.html index cee5282..2504328 100644 --- a/slidebox/demo/demo.html +++ b/slidebox/demo/demo.html @@ -25,16 +25,10 @@ -
+
- -
Slide Box
-

- A container that allows animated transitions between content panes. Slide Box supports horizontal and vertical transitions. -

- - + @@ -53,7 +47,7 @@
-
+ @@ -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 index dd4808a..521db1a 100644 --- a/slidebox/slidebox.js +++ b/slidebox/slidebox.js @@ -10,7 +10,7 @@ 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; @@ -18,7 +18,7 @@ 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 index d4c8251..5beae44 100644 --- 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." + } + } } \ No newline at end of file