3 |
20 |
--------------------------------------------------------------------------------
/src/components/main/flickr-service-spec.js:
--------------------------------------------------------------------------------
1 | import angular from 'angular';
2 | import * as mocks from 'angular-mocks';
3 | import {appName} from '../../config/constants';
4 |
5 | describe('FlickrService', () => {
6 |
7 | var service, $httpBackend;
8 | beforeEach(() => { angular.mock.module(appName); });
9 |
10 | beforeEach(mocks.default.inject((_$httpBackend_, _FlickrService_) => {
11 | service = _FlickrService_;
12 | $httpBackend = _$httpBackend_;
13 |
14 | $httpBackend.whenJSONP(/http:\/\/api.flickr.com/)
15 | .respond({
16 | "title": "Fake response",
17 | "link": "http://fakelink.com",
18 | "description": "",
19 | "modified": "1970-01-01T01:01:01Z",
20 | "generator": "FakeGenerator",
21 | "items": [
22 | {
23 | "title": "TEST",
24 | "link": "http://FakeImageLing",
25 | "media": {"m":"http://fakeImage.jpg"},
26 | "date_taken": "1970-01-01T12:05:34-08:00",
27 | "description": "FakeDescription",
28 | "published": "1970-01-01T22:59:45Z",
29 | "author": "fake@unittest.com",
30 | "author_id": "F@K3",
31 | "tags": "fake tags for testing"
32 | }]
33 | });
34 | }));
35 |
36 |
37 | it("should perform a request against Flickr", () => {
38 | $httpBackend.expectJSONP(/http:\/\/api.flickr.com/);
39 | service.loadImages('AngularJS');
40 | $httpBackend.flush();
41 | });
42 |
43 | it("should contain result with items", function() {
44 | $httpBackend.expectJSONP(/http:\/\/api.flickr.com/);
45 | service.loadImages('AngularJS').then(() => {
46 | expect(service.numberOfHits()).toBe(1);
47 | });
48 | $httpBackend.flush();
49 | });
50 |
51 | });
52 |
--------------------------------------------------------------------------------
/src/components/main/flickr-service.js:
--------------------------------------------------------------------------------
1 | import {service, inject} from '../../config/decorators';
2 |
3 | /* jshint ignore:start */
4 | @service
5 | /* jshint ignore:end */
6 | export default class FlickrService {
7 | /* jshint ignore:start */
8 | @inject $http = null;
9 | images = [];
10 | /* jshint ignore:end */
11 |
12 | numberOfHits() {
13 | return this.images.length;
14 | }
15 |
16 | loadImages(searchTag) {
17 | let URL = `http://api.flickr.com/services/feeds/photos_public.gne?tags=${searchTag}&tagmode=any&format=json&jsoncallback=JSON_CALLBACK`;
18 |
19 | return this.$http
20 | .jsonp(URL)
21 | .then(response => {
22 | this.images = response.data.items;
23 | });
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/main/main-controller.js:
--------------------------------------------------------------------------------
1 | import {controller, inject, injectAs} from '../../config/decorators';
2 |
3 | /* jshint ignore:start */
4 | @controller
5 | @inject('$scope')
6 | /* jshint ignore:end */
7 | export class MainCtrl {
8 | /* jshint ignore:start */
9 | @injectAs('FlickrService') service = null;
10 | /* jshint ignore:end */
11 | constructor($scope) {
12 | this.searchTag = 'AngularJS';
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/main/main.js:
--------------------------------------------------------------------------------
1 | import angular from 'angular';
2 | import {appName} from '../../config/constants';
3 | import MainController from './main-controller';
4 | import FlickrGallery from './flickr-gallery-directive';
5 | import FlickrService from './flickr-service';
6 | import Shaker from './shaker-directive';
7 | import TitleHeaderStyler from './title-header-styler-filter';
8 |
9 | let MainComponent = angular.module(`${appName}.main`, []);
10 |
11 | export default MainComponent;
12 |
--------------------------------------------------------------------------------
/src/components/main/shaker-directive.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery';
2 | import {directive, inject} from '../../config/decorators';
3 |
4 | // Add jQuery shake animation
5 | /* jshint ignore:start */
6 | (function($) {
7 | $.fn.shake = function(o) {
8 | if (typeof o === 'function')
9 | o = {callback: o};
10 | // Set options
11 | var o = $.extend({
12 | direction: "left",
13 | distance: 20,
14 | times: 3,
15 | speed: 140,
16 | easing: "swing"
17 | }, o);
18 |
19 | return this.each(function() {
20 |
21 | // Create element
22 | var el = $(this), props = {
23 | position: el.css("position"),
24 | top: el.css("top"),
25 | bottom: el.css("bottom"),
26 | left: el.css("left"),
27 | right: el.css("right")
28 | };
29 |
30 | el.css("position", "relative");
31 |
32 | // Adjust
33 | var ref = (o.direction == "up" || o.direction == "down") ? "top" : "left";
34 | var motion = (o.direction == "up" || o.direction == "left") ? "pos" : "neg";
35 |
36 | // Animation
37 | var animation = {}, animation1 = {}, animation2 = {};
38 | animation[ref] = (motion == "pos" ? "-=" : "+=") + o.distance;
39 | animation1[ref] = (motion == "pos" ? "+=" : "-=") + o.distance * 2;
40 | animation2[ref] = (motion == "pos" ? "-=" : "+=") + o.distance * 2;
41 |
42 | // Animate
43 | el.animate(animation, o.speed, o.easing);
44 | for (var i = 1; i < o.times; i++) { // Shakes
45 | el.animate(animation1, o.speed, o.easing).animate(animation2, o.speed, o.easing);
46 | };
47 | el.animate(animation1, o.speed, o.easing).
48 | animate(animation, o.speed / 2, o.easing, function(){ // Last shake
49 | el.css(props); // Restore
50 | if(o.callback) o.callback.apply(this, arguments); // Callback
51 | });
52 | });
53 | };
54 | })(jQuery);
55 | /* jshint ignore:end */
56 |
57 | /* jshint ignore:start */
58 | @directive({
59 | scope: {
60 | count: '=',
61 | duration: '=',
62 | distance: '='
63 | },
64 | restrict: 'A'
65 | })
66 | @inject('$element')
67 | /* jshint ignore:end */
68 | export class Shaker {
69 | constructor ($element) {
70 | $element.on('click', () => {
71 | this.shake($element, this.count, this.distance, this.duration, this.direction);
72 | });
73 | }
74 |
75 | shake(element, shakes, distance, duration, direction) {
76 | $(element).shake({
77 | direction: direction,
78 | distance: distance,
79 | times: shakes,
80 | speed: duration
81 | });
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/components/main/title-header-styler-filter.js:
--------------------------------------------------------------------------------
1 | import {filter, inject} from '../../config/decorators';
2 |
3 | /* jshint ignore:start */
4 | @filter
5 | @inject('$http')
6 | /* jshint ignore:end */
7 | export class TitleHeaderStyler {
8 | constructor ($http) {
9 | this.$http = $http;
10 | }
11 |
12 | filter(input) {
13 | return input.toUpperCase();
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/config/config.js:
--------------------------------------------------------------------------------
1 | import angular from 'angular';
2 | import {appName} from './constants';
3 |
4 | import DecoratorsComponent from './decorators';
5 |
6 | let configComponent = angular.module(`${appName}.core`, [
7 | DecoratorsComponent.name
8 | ]);
9 |
10 | export default configComponent;
11 |
--------------------------------------------------------------------------------
/src/config/constants.js:
--------------------------------------------------------------------------------
1 | export const appName = 'app';
2 | export const baseURL = 'dist/';
3 |
--------------------------------------------------------------------------------
/src/config/decorators.js:
--------------------------------------------------------------------------------
1 | import angular from 'angular';
2 |
3 | let decoratorsModule = angular.module('decorators', []);
4 | export default decoratorsModule;
5 |
6 | let $injector;
7 |
8 | decoratorsModule.run(_$injector_ => {
9 | $injector = _$injector_;
10 | });
11 |
12 | /**
13 | * @example
14 | * import {inject} from './decorators';
15 | *
16 | * @inject('$scope', '$http')
17 | * class MyController {
18 | * constructor($scope, $http) {
19 | * this.$scope = $scope;
20 | * this.$http = $http;
21 | * }
22 | * }
23 | *
24 | * class MyOtherController {
25 | * @inject $http = null;
26 | * @inject MyService = null;
27 | * doSomething () {
28 | * this.MyService.doServiceTask();
29 | * }
30 | * }
31 | */
32 | export function inject (...components) {
33 | if (typeof components[0] === 'object') {
34 | let key = components[1];
35 |
36 | return {
37 | get: () => {
38 | try {
39 | return $injector.get(key);
40 | } catch (err) {
41 | throw new Error(`${key} cannot be injected as a property. Inject it in the controller.`);
42 | }
43 | }
44 | };
45 | } else {
46 | return function decorate (target, key, property) {
47 | target.$inject = components;
48 | };
49 | }
50 | }
51 |
52 | /**
53 | * @example
54 | * import {injectAs} from './decorators';
55 | *
56 | * class MyController {
57 | * @injectAs('MyService') service = null;
58 | * constructor() {
59 | * this.service.doSomething();
60 | * }
61 | * }
62 | */
63 | export function injectAs (dep) {
64 | return function decorate (target, key, descriptor) {
65 | return {
66 | get: () => {
67 | try {
68 | return $injector.get(dep);
69 | } catch (err) {
70 | throw new Error(`${name} cannot be injected as a property. Inject it in the controller.`);
71 | }
72 | }
73 | };
74 | };
75 | }
76 |
77 | /**
78 | * @example
79 | * import {directive, inject} from './decorators';
80 | * import {baseUrl} from './constants';
81 | *
82 | * @directive({
83 | * priority: 42,
84 | * templateUrl: `${baseUrl}/components/myComponent/myView.html`,
85 | * restrict: 'E',
86 | * require: '^parentDirective',
87 | * // etc
88 | * })
89 | * @inject('$scope', '$element', '$attrs')
90 | * class MyView {
91 | * constructor($scope, $element, '$attrs') {
92 | * $element.on('click', e => console.log('click'));
93 | * }
94 | *
95 | * // If you want to use link function :
96 | * static link (scope, element, attrs) {
97 | * element.on('click', e => console.log('click'));
98 | * }
99 | * }
100 | */
101 | export function directive (opts) {
102 | return function decorate (Target) {
103 | let name = opts.name || getTargetName(Target);
104 | name = name.substring(0,1).toLowerCase() + name.substring(1);
105 | function factory(...deps) {
106 | let inject = Target.$inject || [];
107 | let directiveDefinitionObject = {
108 | priority: opts.priority,
109 | template: opts.template,
110 | templateUrl: opts.templateUrl,
111 | transclude: opts.transclude,
112 | restrict: opts.restrict,
113 | templateNamespace: opts.templateNamespace,
114 | scope: opts.scope,
115 | controller: [...inject, function (...deps) {
116 | return new Target(...deps);
117 | }],
118 | controllerAs: opts.controllerAs || 'ctrl',
119 | bindToController: opts.bindToController || true,
120 | require: opts.require
121 | };
122 | if (Target.compile) {
123 | directiveDefinitionObject.compile = function compile(...args) {
124 | return Target.compile(...args);
125 | };
126 | }
127 | if (Target.link) {
128 | directiveDefinitionObject.link = function link(...args) {
129 | return Target.link(...args);
130 | };
131 | }
132 | return directiveDefinitionObject;
133 | }
134 | decoratorsModule.directive(name, factory);
135 | };
136 | }
137 |
138 |
139 | /**
140 | * @example
141 | * import {register} from './decorators';
142 | *
143 | * @register({
144 | * type: 'controller'
145 | * })
146 | * export default class MyController {}
147 | */
148 | export function register (opts) {
149 | return function decorate(target) {
150 | if(opts.inject) {
151 | target.$inject = opts.inject;
152 | }
153 |
154 | let name = opts.name || getTargetName(target);
155 | decoratorsModule[opts.type](name, target);
156 | };
157 | }
158 |
159 | /**
160 | * @example
161 | * import {controller} from './decorators';
162 | *
163 | * @controller
164 | * export default class MyController {}
165 | */
166 | export function controller (target) {
167 | return register({ type: 'controller' })(target);
168 | }
169 | /**
170 | * @example
171 | * import {filter, inject} from './decorators';
172 | *
173 | * @filter
174 | * @inject('$http')
175 | * export default class MyFilter {
176 | * constructor($http) {
177 | * return this.
178 | * }
179 | * filter (input) {
180 | * return input.toUpperCase();
181 | * }
182 | * }
183 | */
184 | export function filter (Target) {
185 | let name = getTargetName(Target);
186 | name = name.substring(0,1).toLowerCase() + name.substring(1);
187 | let deps = Target.$inject || [];
188 | decoratorsModule.filter(name, [...deps, function (...deps) {
189 | let instance = new Target();
190 | return function (...args) { return instance.filter(...args); };
191 | }]);
192 | }
193 | /**
194 | * @example
195 | * import {constant} from './decorators';
196 | *
197 | * @controller
198 | * export default class MyConstant {
199 | * constructor(...deps) {
200 | * return () => {};
201 | * }
202 | * }
203 | */
204 | export function constant (Target) {
205 | let name = getTargetName(Target);
206 | name = name.substring(0,1).toLowerCase() + name.substring(1);
207 | return register({ type: 'constant', name: name })(new Target());
208 | }
209 | /**
210 | * @example
211 | * import {value} from './decorators';
212 | *
213 | * @controller
214 | * export default class MyValue {
215 | * constructor(...deps) {
216 | * return () => {};
217 | * }
218 | * }
219 | */
220 | export function value (Target) {
221 | return register({ type: 'value', name: getTargetName(Target) })(new Target());
222 | }
223 | /**
224 | * @example
225 | * import {factory} from './decorators';
226 | *
227 | * @controller
228 | * export default class MyFactory {}
229 | */
230 | export function factory (target) {
231 | return register({ type: 'factory' })(target);
232 | }
233 | /**
234 | * @example
235 | * import {service} from './decorators';
236 | *
237 | * @controller
238 | * export default class MyService {}
239 | */
240 | export function service (target) {
241 | return register({ type: 'service' })(target);
242 | }
243 | /**
244 | * @example
245 | * import {provider} from './decorators';
246 | *
247 | * @controller
248 | * export default class Myprovider {}
249 | */
250 | export function provider (target) {
251 | return register({ type: 'provider' })(target);
252 | }
253 |
254 |
255 | /**
256 | * Polyfill for IE to return Target.name
257 | */
258 | function getTargetName (o) {
259 | if (o.name) {
260 | return o.name;
261 | }
262 | // if IE
263 | return o.toString().match(/function\s?(.*)\s?\(/)[1];
264 | }
265 |
--------------------------------------------------------------------------------
/tasks/bundle.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | runSequence = require('run-sequence'),
3 | del = require('del'),
4 | exec = require('gulp-exec'),
5 | useref = require('gulp-useref'),
6 | preprocess = require('gulp-preprocess'),
7 | NODE_ENV = process.env.NODE_ENV || 'development',
8 | path;
9 |
10 | module.exports = function (_path_) {
11 | path = _path_;
12 | };
13 |
14 | gulp.task('clean-bundle', function (done) {
15 | del('bundle', done);
16 | });
17 |
18 | gulp.task('bundle-app', function () {
19 | console.log('jspm bundle-sfx ' + path.appmodule + ' ' + path.bundle + 'app.js');
20 | return gulp.src('src/app.js')
21 | .pipe(exec('jspm bundle-sfx ' + path.appmodule + ' ' + path.bundle + 'app.js'))
22 | .pipe(exec.reporter());
23 | });
24 |
25 | gulp.task('bundle-systemjs', function () {
26 | return gulp.src(['config.js', 'jspm_packages/system.js*', 'jspm_packages/es6-module-loader.js*'])
27 | .pipe(gulp.dest(path.bundle));
28 | });
29 |
30 | gulp.task('bundle-css', function () {
31 | return gulp.src(path.css)
32 | .pipe(gulp.dest(path.bundle + 'css'));
33 | });
34 |
35 | gulp.task('bundle-templates', function () {
36 | return gulp.src(path.source + '/**/*.html')
37 | .pipe(gulp.dest(path.bundle + 'dist'));
38 | });
39 |
40 | gulp.task('bundle-index', function () {
41 | var assets = useref.assets();
42 |
43 | return gulp.src(['index.html'])
44 | .pipe(preprocess({
45 | context: {
46 | NODE_ENV: 'production'
47 | }
48 | }))
49 | .pipe(assets)
50 | .pipe(assets.restore())
51 | .pipe(useref())
52 | .pipe(gulp.dest(path.bundle));
53 | });
54 |
55 | gulp.task('bundle-statics', function () {
56 | runSequence(['css', 'build-html'], ['bundle-templates', 'bundle-systemjs', 'bundle-index']);
57 | });
58 |
59 | gulp.task('bundle', function () {
60 | runSequence('clean-bundle', 'bundle-app', 'bundle-statics');
61 | });
62 |
--------------------------------------------------------------------------------
/tasks/cover.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp')
2 | , istanbul = require('gulp-istanbul')
3 | , isparta = require('isparta');
4 |
5 |
6 | var path;
7 |
8 | module.exports = function (_path_) {
9 | path = _path_;
10 | };
11 |
12 | gulp.task('cover', function(cb) {
13 | gulp.src([path.scripts, '!src/**/*-spec.js'])
14 | .pipe(istanbul({
15 | instrumenter: isparta.Instrumenter,
16 | includeUntested: true,
17 | babel: { stage: 0 }
18 | }))
19 | .pipe(istanbul.hookRequire())
20 | .pipe(istanbul.writeReports({
21 | dir: './coverage',
22 | reportOpts: {dir: './coverage'},
23 | reporters: ['html']
24 | }))
25 | .on('finish', cb)
26 | });
--------------------------------------------------------------------------------
/tasks/watch.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | runSequence = require('run-sequence'),
3 | to5 = require('gulp-babel'),
4 | jshint = require('gulp-jshint'),
5 | stylish = require('jshint-stylish'),
6 | assign = Object.assign || require('object.assign'),
7 | fs = require('fs'),
8 | browserSync = require('browser-sync'),
9 | changed = require('gulp-changed'),
10 | plumber = require('gulp-plumber'),
11 | reload = browserSync.reload,
12 | sourcemaps = require('gulp-sourcemaps'),
13 | del = require('del'),
14 | preprocess = require('gulp-preprocess'),
15 | NODE_ENV = process.env.NODE_ENV || 'development';
16 |
17 | var path;
18 |
19 | module.exports = function (_path_) {
20 | path = _path_;
21 | };
22 |
23 | var compilerOptions = {
24 | modules: 'system',
25 | moduleIds: false,
26 | stage: 2,
27 | optional: [
28 | 'es7.decorators',
29 | 'es7.classProperties'
30 | ]
31 | };
32 |
33 | var jshintConfig = {esnext:true};
34 |
35 | gulp.task('build-system', function () {
36 | return gulp.src(path.scripts)
37 | .pipe(plumber())
38 | .pipe(changed(path.output, {extension: '.js'}))
39 | .pipe(sourcemaps.init())
40 | .pipe(to5(assign({}, compilerOptions, {modules:'system'})))
41 | .pipe(sourcemaps.write("."))
42 | .pipe(gulp.dest(path.output))
43 | .pipe(browserSync.reload({ stream: true }));
44 | });
45 |
46 | gulp.task('build-html', function () {
47 | return gulp.src(path.html)
48 | .pipe(changed(path.output, {extension: '.html'}))
49 | .pipe(preprocess({
50 | context: {
51 | NODE_ENV: NODE_ENV
52 | }
53 | }))
54 | .pipe(gulp.dest(path.output))
55 | .pipe(browserSync.reload({ stream: true }));
56 | });
57 |
58 | gulp.task('lint', function() {
59 | return gulp.src(path.scripts)
60 | .pipe(jshint(jshintConfig))
61 | .pipe(jshint.reporter(stylish));
62 | });
63 |
64 | gulp.task('clean-dist', function (done) {
65 | del('dist', done);
66 | });
67 |
68 | gulp.task('build', function(callback) {
69 | return runSequence(
70 | ['build-system', 'build-html', 'css'],
71 | callback
72 | );
73 | });
74 |
75 | gulp.task('serve', ['build'], function(done) {
76 | browserSync({
77 | open: false,
78 | port: 9000,
79 | files: {
80 | src: path.css
81 | },
82 | server: {
83 | baseDir: ['.'],
84 | middleware: function (req, res, next) {
85 | if (req.url.match(/^(.(?!\..+))*$/) ||
86 | req.url === 'index.html') {
87 | req.url = '/dist/index.html';
88 | }
89 | res.setHeader('Access-Control-Allow-Origin', '*');
90 | next();
91 | }
92 | }
93 | }, done);
94 | });
95 |
96 | gulp.task('css', function () {
97 | return gulp.src(path.css)
98 | .pipe(reload({stream:true}));
99 | });
100 |
101 | gulp.task('watch', ['serve'], function() {
102 | var watcher = gulp.watch([path.scripts, path.html], ['build']);
103 | watcher.on('change', function(event) {
104 | console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
105 | });
106 | gulp.watch(path.css, ['css']);
107 | });
108 |
--------------------------------------------------------------------------------
11 | ![]()
17 |
18 |
19 |