Version 1 (#16)

* Created app core (#1)

* Gulp : styles-injection now doesn't fail if there ar no css files

* Remove unneeded dependencies

* Remove dummy project files

* Added basic folder structure

* Added root component

* Adding design plans for mobile UI.

* Updated readme

* Update design plans with proper icon design.

* Upload the final design specificaton for the mobile version.

* Initial Test

* Added controllerAs

* Create app header

* Develop header component

* Feature/create header component (#12)

* Create app header

* Develop header component

Resolve #3

* Create canvas component

* Add files via upload

Add icons

* Add files via upload

Update rotate and grayscale icons

* Fix errors according to gulp lint

* Added travis config

* Corrected invalid

* Even more dumb mistake corrections

* Corrected travis config, hopefully for the last time

* Added feature-button

* Add checkmark and cancel buttons

* Update feature-button.constants.js

* Add accept/deny component (#15)

#6 resolved

* Added feature buttons

* Added travis test

* Added ripple effect

.travis.yml

@@ -0,0 +1,12 @@
+language: node_js
+node_js:
+  - '4.4'
+before_script:
+  - 'export CHROME_BIN=chromium-browser'
+  - 'export DISPLAY=:99.0'
+  - sh -e /etc/init.d/xvfb start
+  - 'npm install -g bower karma gulp eslint'
+  - 'npm install'
+  - 'bower install'
+script:
+  - 'gulp test'

README.md

@@ -1,6 +1,74 @@
-# Angular github pages skeleton
-### Todo
-* Add testing framework
-* Add Travis integration
-* Add sample data
-* Add minified build option
+# PixelFactory
+## Prequisites
+To be able to build and run the project, the following need to be installed:
+* Node ^4.2.0
+* Npm ^3.5.0
+* Gulp ^3.9.0 `npm install -g gulp`
+
+Also you need to run the following commands in the root directory for the dependecies to pull:
+```sh
+npm install && bower install
+```
+---
+## Buid system
+
+The build system has the following top-level scripts. Lower level scripts are also reachable, but it is unadvised to use them since they can't do many things on their own.
+
+#### Build
+
+```sh
+gulp build
+```
+Builds the app to the `build` directory. Also runs eslint to check code style.
+
+#### Serve
+
+```sh
+gulp serve
+```
+Builds the app to the `build` directory, then serves it on `localhost:8080`. It reloads if any file is modified. Also runs eslint to check code style.
+
+#### Test
+**NOT WORKING YET**
+
+```sh
+gulp test
+```
+Runs linting and unit tests once. Should be used mostly by Travis.
+*This starts multiple browsers.*
+
+#### TDD
+**NOT WORKING YET**
+
+
+Not really TDD, but no better idea for name
+
+```sh
+gulp tdd
+```
+Runs linting and unit tests every time code is modified.*This starts multiple browsers.*
+
+#### Github pages
+```sh
+gulp deploy
+```
+Builds and depolys the currently checked out branch to github pages.
+
+---
+## Git flow
+
+For every task a new branch should be created from the `dev` branch. If task is completed you should make a pull request to the `dev` branch. resolved,
+
+* Feature tasks should be made on branches with `feature/` prefix.
+* Bugfix branches should be made on branches with `fix/` prefix.
+
+There is no strict naming policy for the pull request names.
+In the description of the pull request you should include at least following: `resolve #1` where the number is a reference to the number of the task.
+
+Pushing to `gh-pages` is not permitted, that is basicly the production branch of the app. Only stable and well tested versions can be pushed there. (In the future it might be done by travis)
+
+The `master` branch should be kept for only versioning of the app. Pushing is permitted for keeping versions, and it should always be pulled form the `dev` branch.
+
+## Coding style
+
+Coding style should comply to the [John Papas Angular styleguilde](https://github.com/johnpapa/angular-styleguide). The ESLint plugin should enforce these rules. You can check it by running `gulp eslint`, or any of the build commands. Also most IDE-s have an ESLint parsing plugin. If you need template snippets in the styleguide you can find for most IDE-s.

app/acceptdeny/acceptdeny.component.js

@@ -0,0 +1,35 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.acceptdeny')
+        .component('pfAcceptdeny', PfAcceptdeny());
+
+    /* @ngInject */
+    function PfAcceptdeny() {
+        var component = {
+            templateUrl: 'app/acceptdeny/acceptdeny.html',
+            controller: AcceptdenyCtrl,
+            controllerAs: 'vm'
+        };
+
+        return component;
+    }
+
+    AcceptdenyCtrl.$inject = ['$log'];
+
+    /* @ngInject */
+    function AcceptdenyCtrl($log) {
+      var vm = this;
+
+      vm.onClickAccept = onClickAccept;
+      vm.onClickDeny = onClickDeny;
+
+      function onClickAccept() {
+        $log.debug('Accept icon clicked');
+      }
+      function onClickDeny() {
+        $log.debug('Deny icon clicked');
+      }
+    }
+})();

app/acceptdeny/acceptdeny.html

@@ -0,0 +1,5 @@
+<div class="acceptdeny">
+  <div class="accept_deny_container">
+    <div class="accept_container"><img ng-click="vm.onClickAccept()" id="accept_img" ng-src="images/checkmark.png" ng-hide=""></div>
+    <div class="deny_container"><img ng-click="vm.onClickDeny()" id="deny_img" ng-src="images/cancel.png" ng-hide=""></div>
+</div>

app/acceptdeny/acceptdeny.module.js

@@ -0,0 +1,8 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.acceptdeny', [
+          'app.core'
+        ]);
+})();

app/app.config.js

@@ -0,0 +1,3 @@
+(function() {
+    'use strict';
+})();

app/app.constants.js

@@ -0,0 +1,4 @@
+(function() {
+    'use strict';
+
+})();

app/app.module.js

@@ -0,0 +1,11 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app', [
+          'app.core',
+          'app.root',
+          'app.header',
+          'app.acceptdeny',
+          'app.feature-list']);
+})();

app/canvas/canvas.component.js

@@ -0,0 +1,71 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.canvas')
+        .component('pfCanvas', PfCanvas());
+
+    /* @ngInject */
+    function PfCanvas() {
+        var component = {
+            templateUrl: 'app/canvas/canvas.html',
+            controller: CanvasCtrl,
+            controllerAs: 'vm'
+        };
+
+        return component;
+    }
+
+    CanvasCtrl.$inject = ['$log', '$window', '$document'];
+
+    /* @ngInject */
+    function CanvasCtrl($log, $window, $document) {
+      var vm = this;
+      var canvas = $window.document.getElementById('pfCanvas');
+
+      var ctx = canvas.getContext('2d');
+
+      var src = 'images/mario.png';
+
+      var parent = $window.document.getElementById('canvas');
+
+      var angleInDegrees=0;
+
+      initialize();
+
+      function initialize() {
+				$window.addEventListener('resize', resizeCanvas, false);
+				resizeCanvas();
+			}
+
+			function redraw() {
+        openPicture(src);
+			}
+
+			function resizeCanvas() {
+        canvas.width = parent.offsetWidth;
+        canvas.height = parent.offsetHeight;
+				redraw();
+			}
+
+      function openPicture(src) {
+        clearCanvas();
+        var img=new Image();
+        img.crossOrigin="anonymous";
+        img.onload=start;
+        img.src=src;
+        function start(){
+          var ratio=calculateProportionalAspectRatio(img.width,img.height,canvas.width,canvas.height);
+          ctx.drawImage(img,(canvas.width - img.width*ratio)/2, (canvas.height - img.height*ratio)/2
+              ,img.width*ratio,img.height*ratio);
+        }
+        function calculateProportionalAspectRatio(srcWidth, srcHeight, maxWidth, maxHeight) {
+          return(Math.min(maxWidth / srcWidth, maxHeight / srcHeight));
+        }
+      }
+
+      function clearCanvas() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+})();

app/canvas/canvas.html

@@ -0,0 +1,3 @@
+<div id="canvas">
+  <canvas id='pfCanvas'></canvas>
+</div>

app/canvas/canvas.module.js

@@ -0,0 +1,8 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.canvas', [
+          'app.core'
+        ]);
+})();

app/core/core.module.js

@@ -0,0 +1,8 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.core', [
+          'whimsicalRipple'
+        ]);
+})();

app/feature-button/feature-button.component.js

@@ -0,0 +1,43 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.feature-button')
+        .component('featureButton', featureButton());
+
+    /* @ngInject */
+    function featureButton() {
+        var component = {
+            templateUrl: 'app/feature-button/feature-button.html',
+            controller: FeatureButtonCtrl,
+            controllerAs: 'vm',
+            bindings: {
+              type: '@'
+            }
+        };
+
+        return component;
+    }
+
+    FeatureButtonCtrl.$inject = ['$log', 'BUTTONCONFIG'];
+
+    /* @ngInject */
+    function FeatureButtonCtrl($log, BUTTONCONFIG) {
+      var vm = this;
+      vm.imageURL = null;
+      activate();
+
+      vm.onClick = onClick;
+
+      function activate() {
+        if(vm.type && BUTTONCONFIG[vm.type]) {
+          vm.imageURL = BUTTONCONFIG[vm.type].imgURL;
+        }
+      }
+
+      function onClick() {
+
+        $log.debug('Button clicked');
+      }
+    }
+})();

app/feature-button/feature-button.constants.js

@@ -0,0 +1,30 @@
+(function () {
+'use strict';
+angular.module('app.feature-button')
+.constant('BUTTONCONFIG', {
+  'rotate-left' : {
+    imgURL: 'images/rotate_left.png'
+  },
+  'rotate-right' : {
+    imgURL: 'images/rotate_right.png'
+  },
+  'rotate-180' : {
+    imgURL: 'images/rotate_180.png'
+  },
+  'flip-horizontal' : {
+    imgURL: 'images/flip-horizontal.png'
+  },
+  'flip-vertical' : {
+    imgURL: 'images/flip-vertical.png'
+  },
+  'grayscale' : {
+    imgURL: 'images/grayscale.png'
+  },
+  'cancel' : {
+    imgURL: 'images/cancel.png'
+  },
+  'checkmark' : {
+    imgURL: 'images/checkmark.png'
+  }
+});
+})();

app/feature-button/feature-button.html

@@ -0,0 +1,5 @@
+<div class="feature-button" ng-click="vm.onClick()">
+<div class="image-container ripple ripple-light" ng-click="vm.onClick()">
+<img data-ng-src="{{vm.imageURL}}"/>
+</div>
+</div>

app/feature-button/feature-button.module.js

@@ -0,0 +1,8 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.feature-button', [
+            'app.core'
+        ]);
+})();

app/feature-list/feature-list.component.js

@@ -0,0 +1,24 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.feature-list')
+        .component('pfFeatureList', FeatureList());
+
+    /* @ngInject */
+    function FeatureList() {
+        var component = {
+            templateUrl: 'app/feature-list/feature-list.html',
+            controller: FeatureListCtrl,
+        };
+
+        return component;
+    }
+
+    FeatureListCtrl.$inject = [];
+
+    /* @ngInject */
+    function FeatureListCtrl() {
+
+    }
+})();

app/feature-list/feature-list.html

@@ -0,0 +1,8 @@
+<div id="feature-list">
+  <feature-button type="rotate-left"></feature-button>
+  <feature-button type="rotate-right"></feature-button>
+  <feature-button type="rotate-180"></feature-button>
+  <feature-button type="flip-horizontal"></feature-button>
+  <feature-button type="flip-vertical"></feature-button>
+  <feature-button type="grayscale"></feature-button>
+</div>

app/feature-list/feature-list.module.js

@@ -0,0 +1,8 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('app.feature-list', [
+            'app.core'
+        ]);
+})();