Merge pull request #11 from appirio-tech/image-viewer

Add Image Slide Viewer & Image Viewer Header

Author: samsep

dist/example.js

@@ -90,6 +90,16 @@
       controller: 'DateInputExampleController as vm',
       templateUrl: 'views/date-input.example.html'
     };
+    states['image-viewer'] = {
+      url: '/image-viewer',
+      controller: 'ImageViewerExampleController as vm',
+      templateUrl: 'views/image-viewer.example.html'
+    };
+    states['image-viewer-header'] = {
+      url: '/image-viewer-header',
+      controller: 'ImageViewerHeaderExampleController as vm',
+      templateUrl: 'views/image-viewer-header.example.html'
+    };
     states['dropdown'] = {
       url: '/dropdown',
       controller: 'DropdownExampleController as vm',
@@ -260,11 +270,83 @@ $templateCache.put("views/fitted-width.example.html","<h1>Fitted Width</h1><ul c
 $templateCache.put("views/flush-height.example.html","<div flush-height=flush-height style=background-color:grey>Flush Height</div>");
 $templateCache.put("views/focus-on-click.example.html","<button type=button focus-on-click=focus-on-click class=focus-on-click>should have red border when focused</button>");
 $templateCache.put("views/full-height.example.html","<div full-height=full-height style=background-color:grey>Full Height</div>");
+$templateCache.put("views/image-viewer-header.example.html","<image-viewer-header avatar={{vm.avatar}} handle={{vm.handle}} title={{vm.title}} toggle-comments=vm.toggleComments() comments-allowed=comments-allowed download-allowed=download-allowed></image-viewer-header>");
+$templateCache.put("views/image-viewer.example.html","<modal show=true background-click-close=background-click-close><image-viewer-header></image-viewer-header><image-slide-viewer files=vm.files starting-file=vm.startingFile show-notifications=vm.showNotifications></image-slide-viewer></modal>");
 $templateCache.put("views/loader.example.html","<loader></loader>");
 $templateCache.put("views/lock-height.example.html","<input type=text ng-model=vm.height><div style=\"height: {{ vm.height }}; background-color:green; overflow: hidden; padding:50px\" class=\"flex column\"><div lock-height=no-height style=\"background-color:grey; overflow:auto; font-size:36px;\" class=\"animate lock-height flex-grow\"><ul><li ng-repeat=\"n in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] track by $index\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li></ul></div></div>");
 $templateCache.put("views/modal.example.html","<button ng-click=\"vm.show = true\">Show</button><modal show=vm.show background-click-close=background-click-close><img src=http://petdogss.com/wp-content/uploads/2015/01/attention-seeking-puppy.jpg></modal>");
 $templateCache.put("views/scroll.example.html","<button type=button scroll-element=section2>Scroll to Section 2</button><div id=section1 class=scrollSection><h2>Section 1</h2></div><div id=section2 class=scrollSection><h2>Section 2</h2></div>");
 $templateCache.put("views/selectable.example.html","<p>button.widest.biggest(ng-model=\"vm.value\" selectable=true)</p><br><button ng-model=vm.value selectable=selectable class=\"action widest biggest\"></button><hr><p>button.wider.big(ng-model=\"vm.value\" label=\"show me the money\" selectable=\"action\")</p><br><button ng-model=vm.value label=\"show me the money\" selectable=action class=\"wider big\"></button><hr><label>Show me the money?</label><p>button(ng-model=\"vm.value\" label=\"yes\" value=\"true\" selectable=\"action\")</p><br><button ng-model=vm.value label=yes value=true selectable=action></button><br><p>button(ng-model=\"vm.value\" label=\"no\" value=\"false\" selectable=\"action\")</p><br><button ng-model=vm.value label=no value=false selectable=action></button><hr><img src=http://i.perezhilton.com/wp-content/uploads/2013/07/tumblr_m3bwbqnjig1rrgbmqo1_500.gif ng-show=vm.value><label>Tracking a list</label><p>button(ng-model=\"vm.fruits\" label=\"apples\" value=\"vm.apples\" selectable=\"action\")</p><br><button ng-model=vm.fruits label=apples value=vm.apples selectable=action></button><br><p>button(ng-model=\"vm.fruits\" label=\"oranges\" value=\"vm.oranges\" selectable=\"action\")</p><br><button ng-model=vm.fruits label=oranges value=vm.oranges selectable=action></button><br><p>button(ng-model=\"vm.fruits\" label=\"mangos\" value=\"vm.mangos\" selectable=\"action\")</p><br><button ng-model=vm.fruits label=mangos value=vm.mangos selectable=action></button><br><div class=fruits>{{ vm.fruits }}</div>");
 $templateCache.put("views/selected-button.example.html","<selected-button ng-model=vm.value></selected-button><hr><selected-button ng-model=vm.value label=\"show me the money\"></selected-button><hr><h2>Show me the money?</h2><selected-button ng-model=vm.value label=yes value=true></selected-button><br><selected-button ng-model=vm.value label=no value=false></selected-button><hr><img src=http://i.perezhilton.com/wp-content/uploads/2013/07/tumblr_m3bwbqnjig1rrgbmqo1_500.gif ng-show=vm.value><h2>Tracking a list</h2><selected-button ng-model=vm.fruits label=apples value=vm.apples></selected-button><br><selected-button ng-model=vm.fruits label=oranges value=vm.oranges></selected-button><br><selected-button ng-model=vm.fruits label=mangos value=vm.mangos></selected-button><br><div class=fruits>{{ vm.fruits }}</div>");
 $templateCache.put("views/simple-countdown.example.html","<simple-countdown end=2015-12-10T19:41:15.354Z></simple-countdown>");
-$templateCache.put("views/tooltip.example.html","<div class=username><input type=text name=username ng-model=vm.username required placeholder=Username class=widest><div class=\"tooltip elevated\"><div class=arrow></div><p>Your username is public, please pick one that is:</p><p>Use letters, numbers, and these special characters: (-_.{}[])</p></div></div>");}]);
+$templateCache.put("views/tooltip.example.html","<div class=username><input type=text name=username ng-model=vm.username required placeholder=Username class=widest><div class=\"tooltip elevated\"><div class=arrow></div><p>Your username is public, please pick one that is:</p><p>Use letters, numbers, and these special characters: (-_.{}[])</p></div></div>");}]);
+(function() {
+  'use strict';
+  var ImageViewerExampleController;
+
+  ImageViewerExampleController = function($scope, $stateParams) {
+    var activate, vm;
+    vm = this;
+    vm.userHandle = "batman";
+    vm.userAvatar = "http://www.topcoder.com/i/m/cardiboy_big.jpg";
+    vm.showNotifications = false;
+    vm.files = [
+      {
+        fileId: "abc",
+        path: "work/1447877190406-e9c02ed7-00bf-4e52-8c57-4d73fec009ac/9be085da-2013-44e9-8701-507a03c6716e/Screen Shot 2015-12-01 at 1.13.17 PM.png",
+        caption: "this is an image",
+        url: "/images/flower.png"
+      }, {
+        fileId: "def",
+        path: "work/1447877190406-e9c02ed7-00bf-4e52-8c57-4d73fec009ac/cff190d6-c11e-4a42-ab32-9ea37f163334/Screen Shot 2015-12-01 at 1.13.17 PM.png",
+        caption: "this is an image also",
+        url: "/images/flower.png"
+      }, {
+        fileId: "ghi",
+        path: "work/1447877190406-e9c02ed7-00bf-4e52-8c57-4d73fec009ac/88e9df7c-96d2-482f-936d-a5dece0c67bf/Screen Shot 2015-12-01 at 1.01.35 PM.png",
+        caption: "this is a different image",
+        url: "/images/phone.jpg"
+      }, {
+        fileId: "klm",
+        path: "work/1447877190406-e9c02ed7-00bf-4e52-8c57-4d73fec009ac/fe819b7d-2534-4878-994b-35f7b2fec185/Screen Shot 2015-12-01 at 12.35.18 PM.png",
+        caption: "this is another one of the images",
+        url: "/images/turtles-breaking.jpg"
+      }
+    ];
+    vm.startingFile = vm.files[1];
+    activate = function() {
+      return vm;
+    };
+    return activate();
+  };
+
+  ImageViewerExampleController.$inject = ['$scope', '$stateParams'];
+
+  angular.module('example').controller('ImageViewerExampleController', ImageViewerExampleController);
+
+}).call(this);
+
+(function() {
+  'use strict';
+  var ImageViewerHeaderExampleController;
+
+  ImageViewerHeaderExampleController = function($scope) {
+    var activate, vm;
+    vm = this;
+    vm.avatar = "http://www.topcoder.com/i/m/cardiboy_big.jpg";
+    vm.handle = "Darth Vader";
+    vm.title = "Hello World Report";
+    vm.toggleComments = function() {
+      return alert('comment toggled');
+    };
+    activate = function() {
+      return vm;
+    };
+    return activate();
+  };
+
+  ImageViewerHeaderExampleController.$inject = ['$scope'];
+
+  angular.module('appirio-tech-ng-ui-components').controller('ImageViewerHeaderExampleController', ImageViewerHeaderExampleController);
+
+}).call(this);

dist/index.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="main.css">
 
 
-</head><body><ul class="nav flex center"><li><a ui-sref="avatar">Avatar</a></li><li><a ui-sref="countdown">Countdown</a></li><li><a ui-sref="simple-countdown">Simple Countdown</a></li><li><a ui-sref="loader">Loader</a></li><li><a ui-sref="filters">Filters</a></li><li><a ui-sref="modal">Modal</a></li><li><a ui-sref="focus-on-click">Focus on click</a></li><li><a ui-sref="checkbox">Checkbox</a></li><li><a ui-sref="selected-button" style="text-decoration: line-through;">Selected Button</a></li><li><a ui-sref="selectable">Selectable</a></li><li><a ui-sref="scroll">Scroll</a></li><li><a ui-sref="flush-height">Flush Height</a></li><li><a ui-sref="full-height">Full Height</a></li><li><a ui-sref="fitted-width">Fitted Width</a></li><li><a ui-sref="lock-height">Lock Height</a></li><li><a ui-sref="tooltip">Tooltip</a></li><li><a ui-sref="date-input">Date Input</a></li><li><a ui-sref="dropdown">Dropdown</a></li></ul><main role="main" ui-view="" class="layout-main {{ pageClass }}"></main><end></end><end></end><end></end><end></end>
+</head><body><ul class="nav flex center"><li><a ui-sref="avatar">Avatar</a></li><li><a ui-sref="countdown">Countdown</a></li><li><a ui-sref="simple-countdown">Simple Countdown</a></li><li><a ui-sref="loader">Loader</a></li><li><a ui-sref="filters">Filters</a></li><li><a ui-sref="modal">Modal</a></li><li><a ui-sref="focus-on-click">Focus on click</a></li><li><a ui-sref="checkbox">Checkbox</a></li><li><a ui-sref="selected-button" style="text-decoration: line-through;">Selected Button</a></li><li><a ui-sref="selectable">Selectable</a></li><li><a ui-sref="scroll">Scroll</a></li><li><a ui-sref="flush-height">Flush Height</a></li><li><a ui-sref="full-height">Full Height</a></li><li><a ui-sref="fitted-width">Fitted Width</a></li><li><a ui-sref="lock-height">Lock Height</a></li><li><a ui-sref="tooltip">Tooltip</a></li><li><a ui-sref="date-input">Date Input</a></li><li><a ui-sref="image-viewer">Image Viewer</a></li><li><a ui-sref="image-viewer-header">Image Viewer Header</a></li><li><a ui-sref="dropdown">Dropdown</a></li></ul><main role="main" ui-view="" class="layout-main {{ pageClass }}"></main><end></end><end></end><end></end><end></end>
 <script src="lib.js"></script>
 <script src="main.js"></script>
 <script src="example.js"></script>

dist/main.css

@@ -12,6 +12,8 @@ angular.module("appirio-tech-ng-ui-components").run(["$templateCache", function(
 $templateCache.put("views/checkbox.directive.html","<div class=\"flex middle\"><button ng-class=\"{\'checked\': ngModel}\" ng-click=vm.toggle() type=button class=clean><div ng-hide=ngModel class=\"icon plus hollow\"></div><div ng-show=ngModel class=\"icon checkmark active\"></div></button><label ng-if=label ng-click=vm.toggle()>{{ label }}</label></div>");
 $templateCache.put("views/countdown.directive.html","<ul class=countdown><li ng-if=\"vm.days &gt; 0\"><span class=value>{{ vm.days }}</span><span class=unit>day<span ng-if=\"vm.days &gt; 1\">s</span></span></li><li ng-if=\"vm.hours &gt; 0 || vm.days &gt; 0\"><span class=value>{{ vm.hours }}</span><span class=unit>hr<span ng-if=\"vm.hours &gt; 1\">s</span></span></li><li ng-if=\"vm.minutes &gt; 0 || vm.hours &gt; 0 || vm.days &gt; 0\"><span class=value>{{ vm.minutes }}</span><span class=unit>min<span ng-if=\"vm.minutes &gt; 1\">s</span></span></li><li><span class=value>{{ vm.seconds }}</span><span class=unit>sec<span ng-if=\"vm.seconds &gt; 1\">s</span></span></li></ul>");
 $templateCache.put("views/date-input.directive.html","<div class=\"flex middle\"><input type=text ng-model=date placeholder=\"{{ placeHolder }}\"><button class=clean><div class=\"icon warning\"></div></button></div>");
+$templateCache.put("views/image-viewer-header.directive.html","<main class=\"flex column light-bg\"><div class=\"header flex space-between\"><div class=\"user flex middle\"><a href={{vm.generateProfileUrl(vm.handle)}} target=_blank><avatar avatar-url=\"{{ vm.avatar }}\"></avatar></a><a href={{vm.generateProfileUrl(vm.handle)}} target=_blank><p class=name>{{ vm.handle }}</p></a></div><div class=icons><button ng-if=vm.downloadAllowed class=clean><a href=\"{{ vm.downloadUrl }}\" target=_blank><div class=\"icon download\"></div></a></button><button ng-click=vm.toggleComments() ng-if=vm.commentsAllowed class=clean><div class=\"icon bubble\"></div></button></div></div><p ng-if=vm.title class=title>{{vm.title}}</p><hr></main>");
+$templateCache.put("views/image-viewer.directive.html","<main class=\"flex column middle light-bg\"><div class=\"content flex flex-grow\"><div class=\"slideshow flex column flex-grow\"><div class=\"preview flex center flex-grow flex-shrink\"><div class=\"previous flex flex-grow\"><a ng-class=\"{invisible: !vm.prevFile}\" ng-click=vm.viewPrevious() class=arrow-previous><button class=\"clean icon arrow\"></button></a></div><div class=\"image flex column center\"><div class=img-container><p ng-if=vm.file.name class=file-name>{{ vm.file.name }}</p><p ng-if=vm.file.caption class=file-caption>{{ vm.file.caption }}</p><img ng-src=\"{{ vm.file.url }}\"></div></div><div class=\"next flex flex-grow\"><a ng-class=\"{invisible: !vm.nextFile}\" ng-click=vm.viewNext() class=arrow-next><button class=\"clean icon arrow right\"></button></a></div></div><ul class=thumbnails><li ng-repeat=\"file in vm.files\" ng-class=\"{ elevated: !vm.isCurrent(file) }\" class=thumbnail><a href=\"{{ file.detailUrl }}\"><img ng-src=\"{{ file.url }}\"><div ng-if=\"file.unreadMessages &gt; 0 &amp;&amp; vm.showNotifications\" class=\"notification absolute\">{{ file.unreadMessages }}</div></a></li></ul></div></div></main>");
 $templateCache.put("views/loader.directive.html","<div class=container><div class=loader></div></div>");
 $templateCache.put("views/modal.directive.html","");
 $templateCache.put("views/selectable.directive.html","<div ng-show=\"!label &amp;&amp; !vm.isSelected()\">Select</div><div ng-show=\"!label &amp;&amp; vm.isSelected()\">Selected</div><div ng-show=label>{{ label }}</div><div class=icon-container><div class=\"icon checkmark-white smallest\"></div></div>");
@@ -562,6 +564,55 @@ $templateCache.put("views/simple-countdown.directive.html","<p>{{vm.timeRemainin
 
 }).call(this);
 
+(function() {
+  'use strict';
+  var directive;
+
+  directive = function() {
+    return {
+      restrict: 'E',
+      controller: 'ImageViewerController as vm',
+      templateUrl: 'views/image-viewer.directive.html',
+      scope: {
+        files: '=',
+        startingFile: '=',
+        onFileChange: '&',
+        showNotifications: '@'
+      }
+    };
+  };
+
+  angular.module('appirio-tech-ng-ui-components').directive('imageSlideViewer', directive);
+
+}).call(this);
+
+(function() {
+  'use strict';
+  var dir;
+
+  dir = function() {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/image-viewer-header.directive.html',
+      controller: 'ImageViewerHeaderController as vm',
+      scope: {
+        avatar: '@',
+        handle: '@',
+        title: '@',
+        commentsAllowed: '@',
+        downloadAllowed: '@',
+        downloadUrl: '@',
+        toggleComments: '&'
+      }
+    };
+  };
+
+  dir.$inject = [];
+
+  angular.module('appirio-tech-ng-ui-components').directive('imageViewerHeader', dir);
+
+}).call(this);
+
 (function() {
   'use strict';
   var directive;
@@ -748,6 +799,104 @@ $templateCache.put("views/simple-countdown.directive.html","<p>{{vm.timeRemainin
 
 }).call(this);
 
+(function() {
+  'use strict';
+  var ImageViewerController;
+
+  ImageViewerController = function($scope) {
+    var activate, startingFile, updateFiles, vm;
+    vm = this;
+    vm.files = $scope.files;
+    vm.showNotifications = $scope.showNotifications;
+    startingFile = $scope.startingFile;
+    vm.onFileChange = $scope.onFileChange;
+    vm.prevFile = null;
+    vm.nextFile = null;
+    updateFiles = function() {
+      if (vm.currentIndex + 1 < vm.files.length) {
+        vm.nextFile = true;
+      } else {
+        vm.nextFile = null;
+      }
+      if (vm.currentIndex - 1 >= 0) {
+        return vm.prevFile = true;
+      } else {
+        return vm.prevFile = null;
+      }
+    };
+    activate = function() {
+      vm.file = startingFile;
+      vm.currentIndex = vm.files.indexOf(vm.file);
+      vm.nextFile = vm.currentIndex + 1 < vm.files.length;
+      vm.prevFile = vm.currentIndex - 1 >= 0;
+      if (vm.onFileChange) {
+        return vm.onFileChange({
+          file: vm.file
+        });
+      }
+    };
+    vm.viewNext = function() {
+      vm.file = vm.files[vm.currentIndex + 1];
+      vm.currentIndex = vm.files.indexOf(vm.file);
+      updateFiles();
+      if (vm.onFileChange) {
+        return vm.onFileChange({
+          file: vm.file
+        });
+      }
+    };
+    vm.viewPrevious = function() {
+      vm.file = vm.files[vm.currentIndex - 1];
+      vm.currentIndex = vm.files.indexOf(vm.file);
+      updateFiles();
+      if (vm.onFileChange) {
+        return vm.onFileChange({
+          file: vm.file
+        });
+      }
+    };
+    vm.isCurrent = function(file) {
+      return vm.files.indexOf(file === vm.currentIndex);
+    };
+    activate();
+    return vm;
+  };
+
+  ImageViewerController.$inject = ['$scope'];
+
+  angular.module('appirio-tech-ng-ui-components').controller('ImageViewerController', ImageViewerController);
+
+}).call(this);
+
+(function() {
+  'use strict';
+  var ImageViewerHeaderController;
+
+  ImageViewerHeaderController = function($scope) {
+    var activate, vm;
+    vm = this;
+    vm.avatar = $scope.avatar;
+    vm.handle = $scope.handle;
+    vm.title = $scope.title;
+    vm.commentsAllowed = $scope.commentsAllowed;
+    vm.downloadAllowed = $scope.downloadAllowed;
+    vm.toggleComments = $scope.toggleComments;
+    vm.downloadUrl = $scope.downloadUrl;
+    vm.generateProfileUrl = function(handle) {
+      return "https://www.topcoder.com/members/" + handle;
+    };
+    activate = function() {
+      return vm;
+    };
+    return activate();
+  };
+
+  ImageViewerHeaderController.$inject = ['$scope'];
+
+  angular.module('appirio-tech-ng-ui-components').controller('ImageViewerHeaderController', ImageViewerHeaderController);
+
+}).call(this);
+
 (function() {
   'use strict';
   var filter;

dist/main.js

@@ -11,6 +11,9 @@
 - cssPaths.push('tooltip')
 - cssPaths.push('simple-countdown')
 - cssPaths.push('date-input')
+- cssPaths.push('image-viewer')
+- cssPaths.push('image-viewer-header')
+
 
 - var landscapes = []
 - var desktops   = []

example/css-files.jade

@@ -11,6 +11,9 @@
 - examples.push('dropdown.example.controller')
 - examples.push('date-input.example')
 - examples.push('example-templates')
+- examples.push('image-viewer-example.controller')
+- examples.push('image-viewer-header-example.controller')
+
 
 - var directives  = []
 - directives.push('avatar')
@@ -28,6 +31,8 @@
 - directives.push('fitted-width')
 - directives.push('lock-height')
 - directives.push('date-input')
+- directives.push('image-viewer')
+- directives.push('image-viewer-header')
 - directives.push('dropdown')
 
 - var controllers = []
@@ -36,6 +41,9 @@
 - controllers.push('checkbox')
 - controllers.push('selected-button')
 - controllers.push('date-input')
+- controllers.push('image-viewer')
+- controllers.push('image-viewer-header')
+
 
 - var elements = []
 

example/images/flower.png

@@ -50,5 +50,12 @@ ul.nav.flex.center
   li
     a(ui-sref="date-input") Date Input
 
+  li
+    a(ui-sref="image-viewer") Image Viewer
+
+  li
+    a(ui-sref="image-viewer-header") Image Viewer Header
+
   li
     a(ui-sref="dropdown") Dropdown
+