From 07d7fa76bad17498342c21654a9c2f3a2045cb29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20Norman=20Hauk=C3=A5s?= Date: Sun, 6 Dec 2015 16:29:29 +0100 Subject: [PATCH] Now makes use of an iframe that loads the angular plugin which in turn hooks up to the parent dom. --- src/index-angular-app.html | 34 ++++++++++++++++++++++++ src/index.html | 1 + src/index.ts | 37 ++++++++++++++------------ src/load-menu-for-web-testing.js | 42 +++++++++++++----------------- src/services/tagStorage.service.ts | 4 +-- src/services/webpage.service.ts | 6 ++--- src/style.css | 12 +++++++++ 7 files changed, 90 insertions(+), 46 deletions(-) create mode 100644 src/index-angular-app.html diff --git a/src/index-angular-app.html b/src/index-angular-app.html new file mode 100644 index 0000000..ca3751c --- /dev/null +++ b/src/index-angular-app.html @@ -0,0 +1,34 @@ + + + + This will be an iframe programmatically included into a parent page. + + + + +
+ +
+ + + +

Tag you're it

+ +

Select a word to tag with a semantic tag.

+ +

+ Currently selected word: {{vm.selectedWord}} +

+ + + + +
+ + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 0cf89c8..83918b4 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,7 @@ + diff --git a/src/index.ts b/src/index.ts index b5bf5f1..dc27d19 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,23 +16,26 @@ module tagIt { .service('TagStorageService', TagStorageService) .controller('MenuCtrl', MenuCtrl); - export function init (callback: () => void) { - $.get(chromeUrlTranslator('menu.tpl.html'), function (htmlData) { - $('body').children().wrapAll('
'); - $('.tagit-body').before(htmlData); - window.name = ''; - angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']); - console.log('TagIt menu loaded'); - if(callback) callback(); - }); + // angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']); + console.log('TagIt menu loaded'); - function chromeUrlTranslator(relativeUrl : string) { - if(typeof chrome === 'undefined' ) { - return relativeUrl; - } else { - return chrome.extension.getURL(relativeUrl); - } - } - } + // export function init (callback: () => void) { + // $.get(chromeUrlTranslator('menu.tpl.html'), function (htmlData) { + // $('body').children().wrapAll('
'); + // $('.tagit-body').before(htmlData); + // window.name = ''; + // angular.bootstrap(document.getElementById("tagit-menu"), ['tagit']); + // console.log('TagIt menu loaded'); + // if(callback) callback(); + // }); + + // function chromeUrlTranslator(relativeUrl : string) { + // if(typeof chrome === 'undefined' ) { + // return relativeUrl; + // } else { + // return chrome.extension.getURL(relativeUrl); + // } + // } + // } } diff --git a/src/load-menu-for-web-testing.js b/src/load-menu-for-web-testing.js index 6d66116..affec2f 100644 --- a/src/load-menu-for-web-testing.js +++ b/src/load-menu-for-web-testing.js @@ -1,37 +1,31 @@ // Script loader for local web page testing -injectScripts(); - document.addEventListener("DOMContentLoaded", function(event) { document.getElementById('js-show-menu') .addEventListener('click', function () { - if (!document.getElementById('tagit-menu')) injectScripts(); + if (!document.getElementById('tagit-menu')) injectIframe(); }); document.getElementById('js-reset-tags') .addEventListener('click', function () { // nothing here yet }); + injectIframe(); }); -function injectScripts () { - - console.log('loading dependencies'); - loadScript('vendor/vendor.js', loadPluginCode); - - function loadPluginCode () { - console.log('loading tagit'); - loadScript('bundle.js', function () { - tagIt.init(function () {console.log('tagIt init!')}); - }); - } - - function loadScript (relativeScriptPath, callback) { - var s = document.createElement('script'); - s.src = relativeScriptPath; - s.onload = function() { - this.parentNode.removeChild(this); - if (callback) callback(); - }; - (document.head||document.documentElement).appendChild(s); - } +function injectIframe () { + console.log('injectIframe()'); + var iframe = document.createElement('iframe'); + iframe.src = 'index-angular-app.html'; + iframe.className = 'tagit-iframe'; + $('body').children().wrapAll('
'); + $('.tagit-body').before(iframe); } + +// Todo: Setup listener that will call angular code +// on new text selections and deselections + +// Todo: Add functions that give access to window object. + +function getParentWindowObject () { + return window; +} \ No newline at end of file diff --git a/src/services/tagStorage.service.ts b/src/services/tagStorage.service.ts index c015c06..76ad400 100644 --- a/src/services/tagStorage.service.ts +++ b/src/services/tagStorage.service.ts @@ -18,9 +18,9 @@ module tagIt { this.$http = $http; this.$log = $log; this.$localStorage = $localStorage; - + // this.deleteTags(); // reset tag storage - + if (!this.$localStorage.tagStorage) { this.$localStorage.tagStorage = []; } diff --git a/src/services/webpage.service.ts b/src/services/webpage.service.ts index a847c7a..748eb6e 100644 --- a/src/services/webpage.service.ts +++ b/src/services/webpage.service.ts @@ -29,9 +29,9 @@ module tagIt { wireUpListener(callbackOnSelectFunc: (result: Object) => void, callbackOnDeSelectFunc: () => void) { var that = this; - document.getElementById('tagit-body') + parent.document.getElementById('tagit-body') .addEventListener('click', (evt: any) => { - if (!document.hasFocus()) { + if (!parent.document.hasFocus()) { return true; } else if (wasRemoveTagButtonClicked(evt)) { @@ -61,7 +61,7 @@ module tagIt { } findSelectedText() { - var selectedText = window.getSelection().toString(); + var selectedText = parent.getSelection().toString(); if (selectedText) { this.$log.debug('text that was selected: ' + selectedText); return selectedText; diff --git a/src/style.css b/src/style.css index 322d713..4b8cf51 100644 --- a/src/style.css +++ b/src/style.css @@ -5,6 +5,18 @@ padding: 10px; } +.tagit-iframe { + position: fixed; + overflow-y: auto; + width: 30%; + height: 100%; + top: 0; + left: 0; + bottom: 0; + background-color: #ccc; + padding: 10px; +} + .tagit-menu { position: fixed; overflow-y: auto;