nilsnh/tag-youre-it
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Now makes use of an iframe that loads the angular plugin which in turn hooks up to the parent dom.

Browse source
This commit is contained in:
Nils Norman Haukås 2015-12-06 16:29:29 +01:00
parent abb667aa7f
commit 07d7fa76ba
7 changed files with 90 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/index-angular-app.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>This will be an iframe programmatically included into a parent page.</title>
<script src="vendor/vendor.js"></script>
<script src="bundle.js"></script>
</head>
<body ng-app="tagit">
<div id="tagit-menu" class="tagit-menu" ng-controller="MenuCtrl">
<br/>
<button ng-click="vm.removeMenu()" class="btn btn-default">
Close menu
</button>
<h2>Tag you're it</h2>
<p>Select a word to tag with a semantic tag.</p>
<p>
Currently selected word: <strong>{{vm.selectedWord}}</strong>
</p>
<input type="text" ng-model="wordToFilterBy" class="form-control" placeholder="Filter tags" />
<ul id="senses">
<li ng-click="vm.onSenseSelect(sense)" id="sense.senseid" ng-repeat="sense in vm.senses | filter:wordToFilterBy" class="list-unstyled">
<strong>{{sense.word}}</strong> {{sense.explanation}}
</li>
</ul>
</div>
</body>
</html>

1
src/index.html
View file

@ -5,6 +5,7 @@
<meta charset="UTF-8">
<link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="vendor/vendor.js"></script>
<script src="load-menu-for-web-testing.js"></script>
</head>

37
src/index.ts
View file

@ -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('<div id="tagit-body" class="tagit-body" />');
$('.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('<div id="tagit-body" class="tagit-body" />');
// $('.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);
// }
// }
// }
}

42
src/load-menu-for-web-testing.js
View file

@ -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('<div id="tagit-body" class="tagit-body" />');
$('.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;
}

4
src/services/tagStorage.service.ts
View file

@ -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 = [];
}

6
src/services/webpage.service.ts
View file

@ -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;

12
src/style.css
View file

@ -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;