diff --git a/angular-panorama.js b/angular-panorama.js index 0983c2e..34a497d 100644 --- a/angular-panorama.js +++ b/angular-panorama.js @@ -1,38 +1,30 @@ /** * Angular Panorama - Mimic Windows Phone's Panorama UI control. - * @version v0.1.5 - 2014-03-18 + * @version v0.2.0 - 2014-03-18 * @link http://cnjsstong2.github.com/angular-panorama * @author Tong Shen * @license MIT License, http://www.opensource.org/licenses/MIT */ -/*global angular */ - -/* -Angular touch panorama with CSS GPU accel and slide buffering/cycling -http://github.com/cnjsstong2/angular-panorama - -*/ - angular.module('angular-panorama', ['ngTouch']); angular.module('angular-panorama') - .directive('ngPanorama', ['$swipe', '$document', '$window', function ($swipe, $document, $window) { + .directive('ngPanorama', ['$swipe', function ($swipe) { return { restrict: 'A', scope: { pages: "=ngPanorama", - curIndex: "=ngPanoramaIndex", - backgroundImage: "=ngPanoramaBackgroundImage", + i: "=ngPanoramaIndex", + bg: "=ngPanoramaBackgroundImage", reset: "=ngPanoramaReset" }, link: function (scope, el, attr) { - scope.$watch('backgroundImage', function (newValue) { + scope.$watch('bg', function (newValue) { if (newValue) { el.css('background-image', 'url(' + newValue + ')'); } }); - scope.$watch('curIndex', function (newValue) { + scope.$watch('i', function (newValue) { setOffset(getOffsetByIndex(newValue)); }); scope.$watch('reset', function (newValue) { @@ -44,8 +36,8 @@ angular.module('angular-panorama') el.addClass('ng-panorama-container'); var ul = el.find('ul'); ul.addClass('ng-panorama-slides'); - if (!scope.curIndex) { - scope.curIndex = 0; + if (!scope.i) { + scope.i = 0; } function getOffsetByIndex(index) { var offset = 0; @@ -84,15 +76,14 @@ angular.module('angular-panorama') $swipe.bind(el, { start: function (coords) { startCoords = coords; - startOffset = getOffsetByIndex(scope.curIndex); + startOffset = getOffsetByIndex(scope.i); ul.css(cruiseOff); -// ul.css('transition','none'); }, move: function (coords) { setOffset(startOffset + coords.x - startCoords.x); }, end: function (coords) { - var targetIndex = scope.curIndex; + var targetIndex = scope.i; var threshold = el.prop('offsetWidth') * 0.1; var delta = coords.x - startCoords.x; if (delta > threshold && targetIndex > 0) { @@ -101,16 +92,16 @@ angular.module('angular-panorama') targetIndex++; } scope.$apply(function () { - scope.curIndex = targetIndex; + scope.i = targetIndex; }); ul.css(cruiseOn); - setOffset(getOffsetByIndex(scope.curIndex)); + setOffset(getOffsetByIndex(scope.i)); }, cancel: function (coords) { ul.css(cruiseOn); - setOffset(getOffsetByIndex(scope.curIndex)); + setOffset(getOffsetByIndex(scope.i)); } - }) + }); } - } + }; }]); \ No newline at end of file diff --git a/angular-panorama.min.js b/angular-panorama.min.js index 748e607..a6d0256 100644 --- a/angular-panorama.min.js +++ b/angular-panorama.min.js @@ -1,8 +1,8 @@ /** * Angular Panorama - Mimic Windows Phone's Panorama UI control. - * @version v0.1.5 - 2014-03-18 + * @version v0.2.0 - 2014-03-18 * @link http://cnjsstong2.github.com/angular-panorama * @author Tong Shen * @license MIT License, http://www.opensource.org/licenses/MIT */ -angular.module("angular-panorama",["ngTouch"]),angular.module("angular-panorama").directive("ngPanorama",["$swipe","$document","$window",function(a){return{restrict:"A",scope:{pages:"=ngPanorama",curIndex:"=ngPanoramaIndex",backgroundImage:"=ngPanoramaBackgroundImage",reset:"=ngPanoramaReset"},link:function(b,c){function d(a){for(var d=0,e=c.prop("offsetWidth"),f=0;a>f;f++)d-=(b.pages[f].width||100)*e/100;if(a>0){var g=(100-b.pages[a].width)/2*e/100;d+=g,a==b.pages.length-1&&(d+=g)}return parseInt(d,10)}function e(a){f.css({"-webkit-transform":"translate3d("+a+"px, 0, 0)",transform:"translate3d("+a+"px, 0, 0)"})}b.$watch("backgroundImage",function(a){a&&c.css("background-image","url("+a+")")}),b.$watch("curIndex",function(a){e(d(a))}),b.$watch("reset",function(){f.css(j),e(0),f.css(i)}),c.addClass("ng-panorama-container");var f=c.find("ul");f.addClass("ng-panorama-slides"),b.curIndex||(b.curIndex=0);var g,h,i={transition:"all 0.2s ease","-webkit-transition":"all 0.2s ease"},j={transition:"none","-webkit-transition":"none"};a.bind(c,{start:function(a){g=a,h=d(b.curIndex),f.css(j)},move:function(a){e(h+a.x-g.x)},end:function(a){var h=b.curIndex,j=.1*c.prop("offsetWidth"),k=a.x-g.x;k>j&&h>0?h--:-j>k&&hf;f++)d-=(b.pages[f].width||100)*e/100;if(a>0){var g=(100-b.pages[a].width)/2*e/100;d+=g,a==b.pages.length-1&&(d+=g)}return parseInt(d,10)}function e(a){f.css({"-webkit-transform":"translate3d("+a+"px, 0, 0)",transform:"translate3d("+a+"px, 0, 0)"})}b.$watch("bg",function(a){a&&c.css("background-image","url("+a+")")}),b.$watch("i",function(a){e(d(a))}),b.$watch("reset",function(){f.css(j),e(0),f.css(i)}),c.addClass("ng-panorama-container");var f=c.find("ul");f.addClass("ng-panorama-slides"),b.i||(b.i=0);var g,h,i={transition:"all 0.2s ease","-webkit-transition":"all 0.2s ease"},j={transition:"none","-webkit-transition":"none"};a.bind(c,{start:function(a){g=a,h=d(b.i),f.css(j)},move:function(a){e(h+a.x-g.x)},end:function(a){var h=b.i,j=.1*c.prop("offsetWidth"),k=a.x-g.x;k>j&&h>0?h--:-j>k&&h", "repository": { diff --git a/src/angular-panorama.js b/src/angular-panorama.js index 3667a3f..f81d601 100644 --- a/src/angular-panorama.js +++ b/src/angular-panorama.js @@ -1,9 +1 @@ -/*global angular */ - -/* -Angular touch panorama with CSS GPU accel and slide buffering/cycling -http://github.com/cnjsstong2/angular-panorama - -*/ - angular.module('angular-panorama', ['ngTouch']); diff --git a/src/directives/ng-panorama.js b/src/directives/ng-panorama.js index 95cbefb..644d1c8 100644 --- a/src/directives/ng-panorama.js +++ b/src/directives/ng-panorama.js @@ -1,21 +1,21 @@ angular.module('angular-panorama') - .directive('ngPanorama', ['$swipe', '$document', '$window', function ($swipe, $document, $window) { + .directive('ngPanorama', ['$swipe', function ($swipe) { return { restrict: 'A', scope: { pages: "=ngPanorama", - curIndex: "=ngPanoramaIndex", - backgroundImage: "=ngPanoramaBackgroundImage", + i: "=ngPanoramaIndex", + bg: "=ngPanoramaBackgroundImage", reset: "=ngPanoramaReset" }, link: function (scope, el, attr) { - scope.$watch('backgroundImage', function (newValue) { + scope.$watch('bg', function (newValue) { if (newValue) { el.css('background-image', 'url(' + newValue + ')'); } }); - scope.$watch('curIndex', function (newValue) { + scope.$watch('i', function (newValue) { setOffset(getOffsetByIndex(newValue)); }); scope.$watch('reset', function (newValue) { @@ -27,8 +27,8 @@ angular.module('angular-panorama') el.addClass('ng-panorama-container'); var ul = el.find('ul'); ul.addClass('ng-panorama-slides'); - if (!scope.curIndex) { - scope.curIndex = 0; + if (!scope.i) { + scope.i = 0; } function getOffsetByIndex(index) { var offset = 0; @@ -67,15 +67,14 @@ angular.module('angular-panorama') $swipe.bind(el, { start: function (coords) { startCoords = coords; - startOffset = getOffsetByIndex(scope.curIndex); + startOffset = getOffsetByIndex(scope.i); ul.css(cruiseOff); -// ul.css('transition','none'); }, move: function (coords) { setOffset(startOffset + coords.x - startCoords.x); }, end: function (coords) { - var targetIndex = scope.curIndex; + var targetIndex = scope.i; var threshold = el.prop('offsetWidth') * 0.1; var delta = coords.x - startCoords.x; if (delta > threshold && targetIndex > 0) { @@ -84,16 +83,16 @@ angular.module('angular-panorama') targetIndex++; } scope.$apply(function () { - scope.curIndex = targetIndex; + scope.i = targetIndex; }); ul.css(cruiseOn); - setOffset(getOffsetByIndex(scope.curIndex)); + setOffset(getOffsetByIndex(scope.i)); }, cancel: function (coords) { ul.css(cruiseOn); - setOffset(getOffsetByIndex(scope.curIndex)); + setOffset(getOffsetByIndex(scope.i)); } - }) + }); } - } + }; }]); \ No newline at end of file