From b86e7755d6d6a4902c01f68bff75b44e0947b851 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20Norman=20Hauk=C3=A5s?= Date: Sat, 7 Nov 2015 23:47:50 +0100 Subject: [PATCH] now building the project using amd modules. Included requirejs. Adjusted build script. --- Gulpfile.js | 21 +++-- package.json | 9 ++- src/content_script_include.js | 7 +- src/content_script_web.js | 11 +-- src/index.html | 1 + src/index.interfaces.ts | 59 +++++++------- src/index.ts | 40 ++++----- src/menu/menu.controller.ts | 116 +++++++++++++-------------- src/services/data.service.ts | 43 +++++----- src/services/selectedWord.service.ts | 64 +++++++-------- tsconfig.json | 3 +- 11 files changed, 188 insertions(+), 186 deletions(-) diff --git a/Gulpfile.js b/Gulpfile.js index fb1a75c..e50a9e4 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -13,12 +13,11 @@ var tsProject = $.typescript.createProject('tsconfig.json', { }); gulp.task('scripts', function() { - var tsResult = gulp.src('src/*.ts') + var tsResult = gulp.src('src/**/*.ts') .pipe($.sourcemaps.init()) .pipe($.typescript(tsProject)); return tsResult.js - .pipe($.concat('bundle.js')) .pipe($.ngAnnotate()) .pipe($.sourcemaps.write()) // Now the sourcemaps are added to the .js file .pipe(gulp.dest('tmp')); @@ -66,7 +65,8 @@ gulp.task('dist-node-modules', function () { 'node_modules/bootstrap/**/*', 'node_modules/angular/**/*', 'node_modules/jquery/**/*', - 'node_modules/lodash/**/*' + 'node_modules/lodash/**/*', + 'node_modules/requirejs/**/*' ], {base: 'node_modules'}) .pipe(gulp.dest('tmp/vendor')); }); @@ -89,11 +89,20 @@ gulp.task('serve', ['tmp'], function () { // add browserSync.reload to the tasks array to make // all browsers reload after tasks are complete. - gulp.watch("src/**/*.ts", ['scripts']); + gulp.watch("src/**/*.ts", ['serve-reload-scripts']); gulp.watch([ "src/**/*.html", "src/**/*.css", "src/**/*.js" - ], ['tmp']); - gulp.watch("tmp/**/*").on("change", browserSync.reload); + ], ['serve-reload-other']); +}); + +gulp.task('serve-reload-scripts', ['scripts'], function (done) { + browserSync.reload; + done(); +}); + +gulp.task('serve-reload-other', ['tmp'], function (done) { + browserSync.reload; + done(); }); \ No newline at end of file diff --git a/package.json b/package.json index e3522f1..4db473c 100644 --- a/package.json +++ b/package.json @@ -23,20 +23,21 @@ }, "homepage": "https://github.com/nilsnh/tag-youre-it", "dependencies": { - "browser-sync": "^2.9.6", - "gulp": "^3.9.0", - "gulp-sourcemaps": "^1.6.0", "angular": "^1.4.7", "bootstrap": "^3.3.5", + "browser-sync": "^2.9.6", "del": "^2.0.2", + "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-file-include": "^0.13.7", "gulp-flatten": "^0.2.0", "gulp-load-plugins": "^1.0.0", "gulp-ng-annotate": "^1.1.0", + "gulp-sourcemaps": "^1.6.0", "gulp-typescript": "^2.9.2", "jquery": "^2.1.4", "lodash": "^3.10.1", - "merge2": "^0.3.6" + "merge2": "^0.3.6", + "requirejs": "^2.1.20" } } diff --git a/src/content_script_include.js b/src/content_script_include.js index f993eee..3a6418b 100644 --- a/src/content_script_include.js +++ b/src/content_script_include.js @@ -1,6 +1,6 @@ // Code used by both the local web prototype as well as the plugin. -function injectScripts () { +function injectScripts (tagIt) { // Save a copy of existing angular js and jquery // Source: http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/ @@ -14,14 +14,13 @@ function injectScripts () { function loadAngular () { console.log('loading angular'); + window.name = 'NG_DEFER_BOOTSTRAP!'; loadScript('vendor/angular/angular.js', loadPluginCode); } function loadPluginCode () { console.log('loading tagit'); - loadScript('bundle.js', function () { - tagIt.init(restoreOldAngularAndJquery); - }); + tagIt.init(restoreOldAngularAndJquery); } function restoreOldAngularAndJquery () { diff --git a/src/content_script_web.js b/src/content_script_web.js index f56f70d..cb5f7b2 100644 --- a/src/content_script_web.js +++ b/src/content_script_web.js @@ -2,11 +2,6 @@ @@include('content_script_include.js') -injectScripts(); //found in the included file - -document.addEventListener("DOMContentLoaded", function(event) { - document.getElementById('js-show-menu') - .addEventListener('click', function () { - if (!document.getElementById('tagit-menu')) injectScripts(); - }); -}); +requirejs(['index'], function (tagIt) { + injectScripts(tagIt); //found in the included file +}); \ No newline at end of file diff --git a/src/index.html b/src/index.html index d9b4781..22f8094 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,7 @@ + diff --git a/src/index.interfaces.ts b/src/index.interfaces.ts index c97a561..0896b3b 100644 --- a/src/index.interfaces.ts +++ b/src/index.interfaces.ts @@ -1,36 +1,33 @@ /// -module tagIt { - - export interface ISynset { - config: Object, - data: { - senses: string[] - } - } - - export interface IVMScope extends angular.IScope { - vm : Object; - } - - export interface ISense { - explanation: string, - rank: number, - related: string, - senseid: string, - source: string, - word: string - } - - /* - sentence: represents everything contained by punctuations. - context: represents ten chars "in both directions" from the word. - */ - export interface ISenseTag { - userEmail: string, - senseid: string, - sentence: string, - context: string +export interface ISynset { + config: Object, + data: { + senses: string[] } } +export interface IVMScope extends angular.IScope { + vm : Object; +} + +export interface ISense { + explanation: string, + rank: number, + related: string, + senseid: string, + source: string, + word: string +} + +/* +sentence: represents everything contained by punctuations. +context: represents ten chars "in both directions" from the word. + */ +export interface ISenseTag { + userEmail: string, + senseid: string, + sentence: string, + context: string +} + diff --git a/src/index.ts b/src/index.ts index 67cc5c4..b7698b1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,34 +1,36 @@ /// -/// -/// -/// +import { DataService } from './services/data.service'; +import { SelectedWordService } from './services/selectedWord.service'; +import { MenuCtrl } from './menu/menu.controller'; -module tagIt { +export function init (callback: () => void) { + var $ = jQuery; angular.module('tagit', []) .service('DataService', DataService) .service('SelectedWordService', SelectedWordService) .controller('MenuCtrl', MenuCtrl); - export function init (callback: () => void) { - var $ = jQuery; - $.get(chromeUrlTranslator('menu.tpl.html'), function (htmlData) { - $('body').children().wrapAll('
'); - $('.tagit-body').before(htmlData); - window.name = ''; + $.get('menu.tpl.html', function (htmlData) { + $('body').children().wrapAll('
'); + $('.tagit-body').before(htmlData); + window.name = ''; + + angular.element(document).ready(function () { angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']); console.log('TagIt menu loaded'); - if(callback) callback(); }); - function chromeUrlTranslator(relativeUrl : string) { - if(chrome && chrome.extension) { - return chrome.extension.getURL(relativeUrl); - } else { - relativeUrl; - } - } - } + if(callback) callback(); + }); + + // function chromeUrlTranslator(relativeUrl : string) { + // if(chrome && chrome.extension) { + // return chrome.extension.getURL(relativeUrl); + // } else { + // relativeUrl; + // } + // } } diff --git a/src/menu/menu.controller.ts b/src/menu/menu.controller.ts index 8d3ae90..d1351ea 100644 --- a/src/menu/menu.controller.ts +++ b/src/menu/menu.controller.ts @@ -1,65 +1,65 @@ -/// +'use strict'; -module tagIt { - 'use strict'; +import { DataService } from '../services/data.service'; +import { SelectedWordService } from '../services/selectedWord.service'; +import { ISense, IVMScope, ISynset } from '../index.interfaces'; - export class MenuCtrl { +export class MenuCtrl { - selectedWord = ""; - senses : Object[]; - dataService : DataService; - selectedWordService : SelectedWordService; - $log : ng.ILogService; - $scope: ng.IScope; + selectedWord = ""; + senses : Object[]; + dataService : DataService; + selectedWordService : SelectedWordService; + $log : ng.ILogService; + $scope: ng.IScope; - /* @ngInject */ - constructor ($scope: IVMScope, $log: angular.ILogService, - DataService: DataService, - SelectedWordService: SelectedWordService) { - $scope.vm = this; - this.$log = $log; - this.$scope = $scope; - this.dataService = DataService; - this.selectedWordService = SelectedWordService; - - // Wire up clicklistener - this.selectedWordService.wireUpListener(this.onWordSelected, - this.onWordDeSelected); - } - - onTagSelect (sense: ISense) { - this.selectedWordService.addTagToPage(sense); - this.dataService.storeTaggingInformation({}); - } - - onWordSelected = (newWord : string) => { - this.selectedWord = newWord; - this.dataService.callServer(newWord) - .then((synsets : Object) => { - this.$log.debug(synsets); - this.senses = this.dataService.processSynsets( synsets); - }); - } - - onWordDeSelected = () => { - this.$log.debug("onWordDeSelected"); - this.selectedWord = ""; - this.senses = []; - this.$scope.$apply(); - } - - selectWord (sense : ISense) { - this.dataService.storeTaggingInformation({ - mail: "mail@nilsnh.no", - sentence: "whole sentence", - senseid: sense.senseid, - }); - } - - removeMenu() { - $('.tagit-body').children().unwrap(); - $('.tagit-menu').remove(); - } + /* @ngInject */ + constructor ($scope: IVMScope, $log: angular.ILogService, + DataService: DataService, + SelectedWordService: SelectedWordService) { + $scope.vm = this; + this.$log = $log; + this.$scope = $scope; + this.dataService = DataService; + this.selectedWordService = SelectedWordService; + // Wire up clicklistener + this.selectedWordService.wireUpListener(this.onWordSelected, + this.onWordDeSelected); } + + onTagSelect (sense: ISense) { + this.selectedWordService.addTagToPage(sense); + this.dataService.storeTaggingInformation({}); + } + + onWordSelected = (newWord : string) => { + this.selectedWord = newWord; + this.dataService.callServer(newWord) + .then((synsets : Object) => { + this.$log.debug(synsets); + this.senses = this.dataService.processSynsets( synsets); + }); + } + + onWordDeSelected = () => { + this.$log.debug("onWordDeSelected"); + this.selectedWord = ""; + this.senses = []; + this.$scope.$apply(); + } + + selectWord (sense : ISense) { + this.dataService.storeTaggingInformation({ + mail: "mail@nilsnh.no", + sentence: "whole sentence", + senseid: sense.senseid, + }); + } + + removeMenu() { + $('.tagit-body').children().unwrap(); + $('.tagit-menu').remove(); + } + } diff --git a/src/services/data.service.ts b/src/services/data.service.ts index 91accfe..3edeee3 100644 --- a/src/services/data.service.ts +++ b/src/services/data.service.ts @@ -1,31 +1,29 @@ -/// - 'use strict'; -module tagIt { +import { ISynset } from '../index.interfaces'; - export class DataService { +export class DataService { - $http : ng.IHttpService; - $log : ng.ILogService; - private serverUrl = 'http://lexitags.dyndns.org/server/lexitags2/Semtags?data='; + $http : ng.IHttpService; + $log : ng.ILogService; + private serverUrl = 'http://lexitags.dyndns.org/server/lexitags2/Semtags?data='; - /* @ngInject */ - constructor($http: ng.IHttpService, $log: ng.ILogService) { - this.$http = $http; - this.$log = $log; - } + /* @ngInject */ + constructor($http: ng.IHttpService, $log: ng.ILogService) { + this.$http = $http; + this.$log = $log; + } - callServer (word: string) { - if (!word) { - return; - }; - return this.$http.get(this.serverUrl + this.createQuery(word)); - } + callServer (word: string) { + if (!word) { + return; + }; + return this.$http.get(this.serverUrl + this.createQuery(word)); + } - processSynsets (synsets: ISynset) : string[] { - return synsets.data.senses; - } + processSynsets (synsets: ISynset) : string[] { + return synsets.data.senses; + } // save tagging information // Params: email, tagging, sentence @@ -36,7 +34,6 @@ module tagIt { private createQuery (word: string) { return '{"word":"QUERYTOREPLACE"}' - .replace(/QUERYTOREPLACE/, word); + .replace(/QUERYTOREPLACE/, word); } } -} \ No newline at end of file diff --git a/src/services/selectedWord.service.ts b/src/services/selectedWord.service.ts index 30b3d84..9258d5c 100644 --- a/src/services/selectedWord.service.ts +++ b/src/services/selectedWord.service.ts @@ -1,43 +1,44 @@ +import { ISense } from '../index.interfaces'; + 'use strict'; -module tagIt { - /** - * Takes care of figuring out what word - * is selected. - */ - export class SelectedWordService { +/** + * Takes care of figuring out what word + * is selected. + */ +export class SelectedWordService { - $log : ng.ILogService; - currentSelectionRange : any; + $log : ng.ILogService; + currentSelectionRange : any; - /* @ngInject */ - constructor($log: ng.ILogService) { - this.$log = $log; - } + /* @ngInject */ + constructor($log: ng.ILogService) { + this.$log = $log; + } - wireUpListener (callbackOnSelectFunc : (result : Object) => void, - callbackOnDeSelectFunc : () => void) { - var that = this; - document.getElementById('tagit-body') - .addEventListener('click', (evt : any) => { - if (!document.hasFocus()) { - return true; - } - var selection = that.findSelection(); - if(selection) { - this.currentSelectionRange = selection.getRangeAt(0).cloneRange(); - callbackOnSelectFunc(joinLongWords(selection.toString())); + wireUpListener (callbackOnSelectFunc : (result : Object) => void, + callbackOnDeSelectFunc : () => void) { + var that = this; + document.getElementById('tagit-body') + .addEventListener('click', (evt : any) => { + if (!document.hasFocus()) { + return true; + } + var selection = that.findSelection(); + if(selection) { + this.currentSelectionRange = selection.getRangeAt(0).cloneRange(); + callbackOnSelectFunc(joinLongWords(selection.toString())); } else { callbackOnDeSelectFunc(); } // clicks should propagate upwards to other things // evt.stopPropagation(); // evt.preventDefault(); - }, false); - function joinLongWords (possiblyLongWord: string) { - return possiblyLongWord.replace(" ","_"); - } + }, false); + function joinLongWords (possiblyLongWord: string) { + return possiblyLongWord.replace(" ","_"); } + } // place spans around a tagged word. addTagToPage (sense : ISense) { @@ -73,9 +74,8 @@ module tagIt { if (selectedText) { this.$log.debug('text that was selected: ' + selectedText); return currentSelection; - } else { - return; + } else { + return; + } } - } - } } diff --git a/tsconfig.json b/tsconfig.json index 3f312f9..91ddfdb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { + "module": "amd", "noImplicitAny": true, - "out": "output.js" + "target": "es5" }, "files": [ "src/index.ts"