diff --git a/.gitignore b/.gitignore
index 628f195..75a94cb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,7 @@
*.bat
*.sh
*.out.txt
-/dist
+/dist/demo
/build
/node_modules
/bower_components
diff --git a/dist/ng-juxtapose.js b/dist/ng-juxtapose.js
new file mode 100644
index 0000000..1e127c4
--- /dev/null
+++ b/dist/ng-juxtapose.js
@@ -0,0 +1,181 @@
+/**
+ * ng-juxtapose - v1.0.1 - 2015-09-06
+ * http://github.com/tinesoft/ng-juxtapose
+ *
+ * Copyright (c) 2015 Tine Kondo
+ * Licensed MIT
+ */
+(function ( window, angular, undefined ) {
+
+angular.module('ngJuxtapose', [])
+ .provider('juxtaposeConfig', function(){
+
+ //the default options
+ var defaultConfig = {
+ startingPosition: '50%',
+ showLabels : true,
+ showCredits: true,
+ animate : true,
+ vertical : false
+ };
+
+ var config = angular.extend({}, defaultConfig);
+
+ return {
+ setStartingPosition : function(value){
+ config.startingPosition = value;
+ },
+ setShowLabels : function(value){
+ config.showLabels = value;
+ },
+ setShowCredits : function(value){
+ config.showCredits = value;
+ },
+ setAnimate : function(value){
+ config.animate = value;
+ },
+ setVertical : function(value){
+ config.vertical = value;
+ },
+ $get: function(){
+ return {
+ startingPosition: '50%',
+ showLabels : true,
+ showCredits: true,
+ animate : true,
+ vertical : false
+ };
+ }
+ };
+ })
+ .controller('JuxtaposeController', ['$scope', '$attrs', '$parse', '$window', 'juxtaposeConfig', function($scope, $attrs, $parse, $window, juxtaposeConfig){
+
+ var self = this;
+
+ if(!$window.juxtapose) {
+ console.error("Cannot find 'juxtapose'. Make sure you've included the JuxtaposeJS library before this directive");
+ return;
+ }
+
+ // Configuration attributes
+ angular.forEach(['startingPosition', 'showLabels', 'showCredits', 'animate', 'vertical'], function( key, index ) {
+ $scope[key] = angular.isDefined($attrs[key]) ? (index < 1 ? $parse($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : juxtaposeConfig[key];
+ });
+
+ var selector = '#' + $attrs.id;
+
+ // Watchable configuration attributes
+ angular.forEach(['startingPosition', 'showLabels', 'showCredits', 'animate', 'vertical'], function( key ) {
+ if ( $attrs[key] ) {
+ $scope.$parent.$watch($parse($attrs[key]), function(value, oldValue) {
+ if(value !== oldValue){
+ $scope[key] = value;
+ self.updateSlider();
+ }
+ });
+ }
+ });
+
+ //Watchable directive attributes
+ $scope.$watchCollection(
+ '[beforeImageUrl, beforeImageLabel, beforeImageCredit, beforeImageAlt, afterImageUrl, afterImageLabel, afterImageCredit, afterImageAlt]',
+ function (newValues) {
+ var beforeImageUrl = newValues[0], afterImageUrl = newValues[4];
+ if(beforeImageUrl && afterImageUrl){
+ self.updateSlider();
+ }
+ }
+ );
+
+ //Clean up
+ $scope.$on('$destroy', function() {
+ self.$element = null;
+ self.slider = null;
+ });
+
+ this.init = function(element){
+ self.$element = element;
+ self.slider = null;
+ };
+
+ this.updateSlider = function(){
+
+ var selector = '#' + $attrs.id;
+
+ var images = [
+ {
+ src: $scope.beforeImageUrl,
+ label: $scope.beforeImageLabel,
+ credit: $scope.beforeImageCredit
+ },
+ {
+ src: $scope.afterImageUrl,
+ label: $scope.afterImageLabel,
+ credit: $scope.afterImageCredit
+ }
+ ];
+
+ var options = {
+ animate: $scope.animate,
+ showLabels: $scope.showLabels,
+ showCredits: $scope.showCredits,
+ mode: $scope.vertical ? 'vertical' : 'horizontal',
+ startingPosition: $scope.startingPosition,
+ callback : $scope.callback
+ };
+ self.$element.empty();//remove previous slider if any
+ self.slider = new juxtapose.JXSlider(selector, images, options);
+
+ if($attrs.beforeImageAlt || $attrs.afterImageAlt){
+ var imgElements = self.$element.find('img');
+
+ var children = self.$element.children();
+ var $jxSlider = self.$element.children().eq(0);
+ var $jxImageLeft = $jxSlider.children().eq(1);
+ var $jxImageRight = $jxSlider.children().eq(2);
+
+ angular.element($jxImageLeft.eq(0)[0]).attr('alt', $scope.beforeImageAlt);
+ angular.element($jxImageRight.eq(0)[0]).attr('alt', $scope.afterImageAlt);
+ }
+ };
+
+ this.getElement = function(){
+ return self.$element;
+ };
+
+ this.getSlider = function(){
+ return self.slider;
+ };
+
+ }])
+ .directive('juxtapose', function () {
+ var counter = 0;
+ var ID_ATTR = 'juxtapose';
+ return {
+ restrict: 'EA',
+ scope: {
+ beforeImageUrl : '=',
+ beforeImageLabel : '=?',
+ beforeImageCredit : '=?',
+ beforeImageAlt : '=?',
+
+ afterImageUrl : '=',
+ afterImageLabel : '=?',
+ afterImageCredit : '=?',
+ afterImageAlt : '=?',
+
+ callback : '&?'
+ },
+ template : '',
+ replace: true,
+ controller: 'JuxtaposeController',
+ link: function (scope, element, attrs, juxtaposeCtrl) {
+
+ // generate an ID
+ attrs.$set('id', ID_ATTR + '-' + counter++);
+
+ juxtaposeCtrl.init(element);
+ }
+ };
+ });
+})( window, window.angular );
diff --git a/dist/ng-juxtapose.min.js b/dist/ng-juxtapose.min.js
new file mode 100644
index 0000000..cccc2d2
--- /dev/null
+++ b/dist/ng-juxtapose.min.js
@@ -0,0 +1,10 @@
+/**
+ * ng-juxtapose - v1.0.1 - 2015-09-06
+ * http://github.com/tinesoft/ng-juxtapose
+ *
+ * Copyright (c) 2015 Tine Kondo
+ * Licensed MIT
+ */
+
+!function(a,b,c){b.module("ngJuxtapose",[]).provider("juxtaposeConfig",function(){var a={startingPosition:"50%",showLabels:!0,showCredits:!0,animate:!0,vertical:!1},c=b.extend({},a);return{setStartingPosition:function(a){c.startingPosition=a},setShowLabels:function(a){c.showLabels=a},setShowCredits:function(a){c.showCredits=a},setAnimate:function(a){c.animate=a},setVertical:function(a){c.vertical=a},$get:function(){return{startingPosition:"50%",showLabels:!0,showCredits:!0,animate:!0,vertical:!1}}}}).controller("JuxtaposeController",["$scope","$attrs","$parse","$window","juxtaposeConfig",function(a,c,d,e,f){var g=this;if(!e.juxtapose)return void console.error("Cannot find 'juxtapose'. Make sure you've included the JuxtaposeJS library before this directive");b.forEach(["startingPosition","showLabels","showCredits","animate","vertical"],function(e,g){a[e]=b.isDefined(c[e])?1>g?d(c[e])(a.$parent):a.$parent.$eval(c[e]):f[e]});"#"+c.id;b.forEach(["startingPosition","showLabels","showCredits","animate","vertical"],function(b){c[b]&&a.$parent.$watch(d(c[b]),function(c,d){c!==d&&(a[b]=c,g.updateSlider())})}),a.$watchCollection("[beforeImageUrl, beforeImageLabel, beforeImageCredit, beforeImageAlt, afterImageUrl, afterImageLabel, afterImageCredit, afterImageAlt]",function(a){var b=a[0],c=a[4];b&&c&&g.updateSlider()}),a.$on("$destroy",function(){g.$element=null,g.slider=null}),this.init=function(a){g.$element=a,g.slider=null},this.updateSlider=function(){var d="#"+c.id,e=[{src:a.beforeImageUrl,label:a.beforeImageLabel,credit:a.beforeImageCredit},{src:a.afterImageUrl,label:a.afterImageLabel,credit:a.afterImageCredit}],f={animate:a.animate,showLabels:a.showLabels,showCredits:a.showCredits,mode:a.vertical?"vertical":"horizontal",startingPosition:a.startingPosition,callback:a.callback};if(g.$element.empty(),g.slider=new juxtapose.JXSlider(d,e,f),c.beforeImageAlt||c.afterImageAlt){var h=(g.$element.find("img"),g.$element.children(),g.$element.children().eq(0)),i=h.children().eq(1),j=h.children().eq(2);b.element(i.eq(0)[0]).attr("alt",a.beforeImageAlt),b.element(j.eq(0)[0]).attr("alt",a.afterImageAlt)}},this.getElement=function(){return g.$element},this.getSlider=function(){return g.slider}}]).directive("juxtapose",function(){var a=0,b="juxtapose";return{restrict:"EA",scope:{beforeImageUrl:"=",beforeImageLabel:"=?",beforeImageCredit:"=?",beforeImageAlt:"=?",afterImageUrl:"=",afterImageLabel:"=?",afterImageCredit:"=?",afterImageAlt:"=?",callback:"&?"},template:'',replace:!0,controller:"JuxtaposeController",link:function(c,d,e,f){e.$set("id",b+"-"+a++),f.init(d)}}})}(window,window.angular);
+//# sourceMappingURL=ng-juxtapose.min.js.map
\ No newline at end of file
diff --git a/dist/ng-juxtapose.min.js.map b/dist/ng-juxtapose.min.js.map
new file mode 100644
index 0000000..ef122b4
--- /dev/null
+++ b/dist/ng-juxtapose.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"ng-juxtapose.min.js","sources":["ng-juxtapose.js"],"names":["window","angular","undefined","module","provider","defaultConfig","startingPosition","showLabels","showCredits","animate","vertical","config","extend","setStartingPosition","value","setShowLabels","setShowCredits","setAnimate","setVertical","$get","controller","$scope","$attrs","$parse","$window","juxtaposeConfig","self","this","juxtapose","console","error","forEach","key","index","isDefined","$parent","$eval","id","$watch","oldValue","updateSlider","$watchCollection","newValues","beforeImageUrl","afterImageUrl","$on","$element","slider","init","element","selector","images","src","label","beforeImageLabel","credit","beforeImageCredit","afterImageLabel","afterImageCredit","options","mode","callback","empty","JXSlider","beforeImageAlt","afterImageAlt","$jxSlider","find","children","eq","$jxImageLeft","$jxImageRight","attr","getElement","getSlider","directive","counter","ID_ATTR","restrict","scope","template","replace","link","attrs","juxtaposeCtrl","$set"],"mappings":"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"}
\ No newline at end of file