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

cleaned up folder structure. Tweaked build script. Rebuilt functionality using angular instead of jquery.

Browse source
This commit is contained in:
Nils Norman Haukås 2015-10-18 20:05:30 +02:00
parent b4ffa623bf
commit c6338bf597
17 changed files with 5102 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
Gulpfile.js
View file

@ -10,6 +10,7 @@ var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
var browserSync = require('browser-sync').create();
var del = require('del');
// add custom browserify options here
var customOpts = {
@ -22,7 +23,7 @@ var b = watchify(browserify(opts));
// add transformations here
// i.e. b.transform(coffeeify);
gulp.task('js', bundle); // so you can run `gulp js` to build the file
gulp.task('typescript', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
@ -39,17 +40,37 @@ function bundle() {
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./dist'));
.pipe(gulp.dest('./dist/scripts'));
}
gulp.task('dist', ['dist-node-modules'], function () {
return gulp.src([
'src/**/*.html',
'src/**/*.css',
'src/**/*.js'
], {base: 'src'})
.pipe(gulp.dest('dist'));
});
gulp.task('dist-node-modules', function () {
return gulp.src([
'node_modules/bootstrap/**/*'
], {base: 'node_modules'})
.pipe(gulp.dest('dist/vendor'));
});
gulp.task('clean', function () {
return del('dist');
});
// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {
gulp.task('serve', ['typescript', 'dist'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./",
index: "example1.html"
baseDir: "./dist",
index: "index.html"
}
});
@ -57,7 +78,9 @@ gulp.task('serve', ['js'], function () {
// all browsers reload after tasks are complete.
gulp.watch([
"dist/bundle.js",
"*.html",
"src/*.js"])
"src/**/*.html",
"src/**/*.js",
"src/**/*.css",
])
.on('change', browserSync.reload);
});

69
example2.html
View file

@ -1,69 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Prototype page mockup</title>
<meta charset="UTF-8">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="dist/bundle.js"></script>
</head>
<body class="container">
<br/>
<button id="js-show-menu" class="btn btn-default">
Start tagging (just for testing)
</button>
<div>
<h1>Sample text</h1>
<p>
The Triumph of Cleopatra, also known as Cleopatra's Arrival in Cilicia[1] and The Arrival of Cleopatra in Cilicia,[2] is an oil painting by English artist William Etty. It was first exhibited in 1821, and is now in the Lady Lever Art Gallery in Port Sunlight across the River Mersey from Liverpool. During the 1810s Etty had become widely respected among staff and students at the Royal Academy of Arts, in particular for his use of colour and ability to paint realistic flesh tones. Despite having exhibited at every Summer Exhibition since 1811 he attracted little commercial or critical interest. In 1820 he exhibited The Coral Finder, which showed nude figures on a gilded boat. This painting attracted the attention of Sir Francis Freeling, who commissioned a similar painting on a more ambitious scale.
</p>
<p>
Rome's history spans more than two and a half thousand years. While Roman mythology dates the founding of Rome at only around 753 BC, the site has been inhabited for much longer, making it one of the oldest continuously occupied sites in Europe.[5] The city's early population originated from a mix of Latins, Etruscans and Sabines. Eventually, the city successively became the capital of the Roman Kingdom, the Roman Republic and the Roman Empire, and is regarded as one of the birthplaces of Western civilization and as the first ever metropolis.[6] It is referred to as "Roma Aeterna" (The Eternal City) [7] and "Caput Mundi" (Capital of the World), two central notions in ancient Roman culture.
</p>
<p>
After the fall of the Western Empire, which marked the beginning of the Middle Ages, Rome slowly fell under the political control of the Papacy, which had settled in the city since the 1st century AD, until in the 8th century it became the capital of the Papal States, which lasted until 1870.
</p>
<p>
Beginning with the Renaissance, almost all the popes since Nicholas V (1422–55) pursued coherently along four hundred years an architectonic and urbanistic program aimed to make of the city the world's artistic and cultural center.[8] Due to that, Rome became first one of the major centers of the Italian Renaissance,[9] and then the birthplace of both the Baroque style and Neoclassicism. Famous artists, painters, sculptors and architects made Rome the center of their activity, creating masterpieces throughout the city. In 1871 Rome became the capital of the Kingdom of Italy, and in 1946 that of the Italian Republic.
</p>
<p>
Rome has the status of a global city.[10][11][12] Rome ranked in 2014 as the 14th-most-visited city in the world, 3rd most visited in the European Union, and the most popular tourist attraction in Italy.[13] Its historic centre is listed by UNESCO as a World Heritage Site.[14] Monuments and museums such as the Vatican Museums and the Colosseum are among the world's most visited tourist destinations with both locations receiving millions of tourists a year. Rome hosted the 1960 Summer Olympics and is the seat of United Nations' Food and Agriculture Organization (FAO).
</p>
<p>
The Triumph of Cleopatra, also known as Cleopatra's Arrival in Cilicia[1] and The Arrival of Cleopatra in Cilicia,[2] is an oil painting by English artist William Etty. It was first exhibited in 1821, and is now in the Lady Lever Art Gallery in Port Sunlight across the River Mersey from Liverpool. During the 1810s Etty had become widely respected among staff and students at the Royal Academy of Arts, in particular for his use of colour and ability to paint realistic flesh tones. Despite having exhibited at every Summer Exhibition since 1811 he attracted little commercial or critical interest. In 1820 he exhibited The Coral Finder, which showed nude figures on a gilded boat. This painting attracted the attention of Sir Francis Freeling, who commissioned a similar painting on a more ambitious scale.
</p>
<p>
Rome's history spans more than two and a half thousand years. While Roman mythology dates the founding of Rome at only around 753 BC, the site has been inhabited for much longer, making it one of the oldest continuously occupied sites in Europe.[5] The city's early population originated from a mix of Latins, Etruscans and Sabines. Eventually, the city successively became the capital of the Roman Kingdom, the Roman Republic and the Roman Empire, and is regarded as one of the birthplaces of Western civilization and as the first ever metropolis.[6] It is referred to as "Roma Aeterna" (The Eternal City) [7] and "Caput Mundi" (Capital of the World), two central notions in ancient Roman culture.
</p>
<p>
After the fall of the Western Empire, which marked the beginning of the Middle Ages, Rome slowly fell under the political control of the Papacy, which had settled in the city since the 1st century AD, until in the 8th century it became the capital of the Papal States, which lasted until 1870.
</p>
<p>
Beginning with the Renaissance, almost all the popes since Nicholas V (1422–55) pursued coherently along four hundred years an architectonic and urbanistic program aimed to make of the city the world's artistic and cultural center.[8] Due to that, Rome became first one of the major centers of the Italian Renaissance,[9] and then the birthplace of both the Baroque style and Neoclassicism. Famous artists, painters, sculptors and architects made Rome the center of their activity, creating masterpieces throughout the city. In 1871 Rome became the capital of the Kingdom of Italy, and in 1946 that of the Italian Republic.
</p>
<p>
Rome has the status of a global city.[10][11][12] Rome ranked in 2014 as the 14th-most-visited city in the world, 3rd most visited in the European Union, and the most popular tourist attraction in Italy.[13] Its historic centre is listed by UNESCO as a World Heritage Site.[14] Monuments and museums such as the Vatican Museums and the Colosseum are among the world's most visited tourist destinations with both locations receiving millions of tourists a year. Rome hosted the 1960 Summer Olympics and is the seat of United Nations' Food and Agriculture Organization (FAO).
</p>
<p>
The Triumph of Cleopatra, also known as Cleopatra's Arrival in Cilicia[1] and The Arrival of Cleopatra in Cilicia,[2] is an oil painting by English artist William Etty. It was first exhibited in 1821, and is now in the Lady Lever Art Gallery in Port Sunlight across the River Mersey from Liverpool. During the 1810s Etty had become widely respected among staff and students at the Royal Academy of Arts, in particular for his use of colour and ability to paint realistic flesh tones. Despite having exhibited at every Summer Exhibition since 1811 he attracted little commercial or critical interest. In 1820 he exhibited The Coral Finder, which showed nude figures on a gilded boat. This painting attracted the attention of Sir Francis Freeling, who commissioned a similar painting on a more ambitious scale.
</p>
<p>
Rome's history spans more than two and a half thousand years. While Roman mythology dates the founding of Rome at only around 753 BC, the site has been inhabited for much longer, making it one of the oldest continuously occupied sites in Europe.[5] The city's early population originated from a mix of Latins, Etruscans and Sabines. Eventually, the city successively became the capital of the Roman Kingdom, the Roman Republic and the Roman Empire, and is regarded as one of the birthplaces of Western civilization and as the first ever metropolis.[6] It is referred to as "Roma Aeterna" (The Eternal City) [7] and "Caput Mundi" (Capital of the World), two central notions in ancient Roman culture.
</p>
<p>
After the fall of the Western Empire, which marked the beginning of the Middle Ages, Rome slowly fell under the political control of the Papacy, which had settled in the city since the 1st century AD, until in the 8th century it became the capital of the Papal States, which lasted until 1870.
</p>
<p>
Beginning with the Renaissance, almost all the popes since Nicholas V (1422–55) pursued coherently along four hundred years an architectonic and urbanistic program aimed to make of the city the world's artistic and cultural center.[8] Due to that, Rome became first one of the major centers of the Italian Renaissance,[9] and then the birthplace of both the Baroque style and Neoclassicism. Famous artists, painters, sculptors and architects made Rome the center of their activity, creating masterpieces throughout the city. In 1871 Rome became the capital of the Kingdom of Italy, and in 1946 that of the Italian Republic.
</p>
<p>
Rome has the status of a global city.[10][11][12] Rome ranked in 2014 as the 14th-most-visited city in the world, 3rd most visited in the European Union, and the most popular tourist attraction in Italy.[13] Its historic centre is listed by UNESCO as a World Heritage Site.[14] Monuments and museums such as the Vatican Museums and the Colosseum are among the world's most visited tourist destinations with both locations receiving millions of tourists a year. Rome hosted the 1960 Summer Olympics and is the seat of United Nations' Food and Agriculture Organization (FAO).
</p>
</div>
</body>
</html>

1
package.json
View file

@ -38,6 +38,7 @@
"dependencies": {
"angular": "^1.4.7",
"bootstrap": "^3.3.5",
"del": "^2.0.2",
"jquery": "^2.1.4"
}
}

15
src/content_script.js
View file

@ -7,6 +7,8 @@ $(document).ready(function () {
// angular.js to load itself into
var angular = (window.angular = {});
console.log('running inject script');
injectScriptBundle();
function injectScriptBundle () {
@ -14,7 +16,7 @@ $(document).ready(function () {
var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
// s.src = chrome.extension.getURL('script.js');
s.src = '../dist/bundle.js'
s.src = 'scripts/bundle.js'
s.onload = function() {
this.parentNode.removeChild(this);
bootStrapAndRestoreAngular();
@ -27,17 +29,6 @@ $(document).ready(function () {
angular.element(document).ready(function() {
// angular.bootstrap(document.getElementById('my-widget', ['MyWidget']);
window.angular = existingWindowDotAngular; // restore the old angular version
console.log('this should be the old angular');
console.log(window.angular.version);
console.log('this should be the old jquery');
console.log($().jquery);
setTimeout(function () {
console.log('this should still be the old angular');
console.log(window.angular.version);
console.log('this should still be the old jquery');
console.log($().jquery);
}, 4000);
});
}

28
src/data/data.service.ts Normal file
View file

@ -0,0 +1,28 @@
'use strict';
class DataService {
$http : ng.IHttpService;
static $inject = ["$scope", "$log"];
constructor($http: ng.IHttpService, $log: ng.ILogService) {
this.$http = $http;
}
createQuery (word: string) {
return '{"word":"QUERYTOREPLACE"}'.replace(/QUERYTOREPLACE/, word);
}
callServer (word: string) {
if (!word) {
return;
};
var serverUrl = 'http://lexitags.dyndns.org/server/lexitags2/Semtags?data='
return this.$http.get(serverUrl + this.createQuery(word));
}
}
export = DataService;

0
icon1.png → src/icon1.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 B

After

Width:  |  Height:  |  Size: 77 B

0
icon2.png → src/icon2.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 B

After

Width:  |  Height:  |  Size: 77 B

7
example1.html → src/index.html
View file

@ -3,18 +3,19 @@
<head>
<title>Prototype page mockup</title>
<meta charset="UTF-8">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular.min.js"></script>
<script src="src/content_script.js"></script>
<script src="content_script.js"></script>
</head>
<body class="container">
<br/>
<!-- Let's pretend this is the button for activating the plugin -->
<button id="js-show-menu" class="btn btn-default">
Start tagging (just for testing)
</button>

40
src/index.ts
View file

@ -1,27 +1,23 @@
declare var require;
declare var jQuery;
declare var $$;
/// <reference path="../typings/tsd.d.ts" />
var jquery = require('jquery');
var angular = require('angular');
var $$ = jquery;
import $ = require('jquery');
import angular = require('angular');
import MenuCtrl = require('./menu/menu.controller');
import DataService = require('./data/data.service');
class Menu {
constructor () {
console.log('New angular:')
console.log(angular.version)
console.log('New jquery:')
console.log($$().jquery)
setTimeout(function() {
console.log('Still new angular:')
console.log(angular.version)
console.log('Still new jquery:')
console.log($$().jquery)
}, 4000)
}
angular.module('tagIt', [])
.factory('DataService', DataService)
.controller('MenuCtrl', MenuCtrl);
function initAngular () {
$.get('menu/menu.tpl.html', function (htmlData) {
$('body').children().wrapAll('<div class="tagit-body" />');
$('.tagit-body').before(htmlData);
angular.bootstrap(
document.getElementById("tagit-menu"),
['tagIt']
);
});
}
var menu = new Menu();
initAngular();

25
src/menu/menu.controller.ts Normal file
View file

@ -0,0 +1,25 @@
'use strict';
interface IMenuScope extends angular.IScope {
startData: Object[];
testWord: String;
}
class MenuCtrl {
testWord = "It's working"
selectedWord = "No word yet"
static $inject = ["$scope", "$log"]
constructor($scope: any, $log: angular.ILogService) {
$scope.vm = this;
}
remove() {
$('.tagit-body').children().unwrap();
$('.tagit-menu').remove();
}
}
export = MenuCtrl;

13
example1.menu.html → src/menu/menu.tpl.html
View file

@ -1,8 +1,9 @@
<div class="tagit-menu">
<!-- angular menu example -->
<div id="tagit-menu" class="tagit-menu" ng-controller="MenuCtrl">
<br/>
<button id="js-hide-menu" class="btn btn-default">
<button ng-click="vm.remove()" class="btn btn-default">
Done tagging
</button>
@ -11,11 +12,17 @@
<p>Select a word to tag with a semantic tag.</p>
<p>
Currently selected word: <strong><span id="js-selected-word"></span></strong>
Currently selected word: <strong>{{vm.selectedWord}}</strong>
</p>
<input type="text" class="form-control" placeholder="Filter tags" />
<ul id="senses">
<li id="sense.senseid" ng-repeat="sense in senses" class="list-unstyled">
<strong>{{sense.word}}</strong> {{sense.explanation}}
</li>
</ul>
<ul id="senses">
<ul id="senses"><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-exhibit-verb-1" class="list-unstyled"><strong>(to ..) exhibit .</strong> show an attribute, property, knowledge, or skill; "he exhibits a great talent" </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-expose-verb-3" class="list-unstyled"><strong>(to ..) expose, exhibit, display .</strong> to show, make visible or apparent; "The Metropolitan Museum is exhibiting Goya's works this month"; "Why don't you show your nice legs and wear shorter skirts?"; "National leaders will have to display the highest skills of statesmanship" </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-show-verb-1" class="list-unstyled"><strong>(to ..) show, demo, exhibit, present, demonstrate .</strong> give an exhibition of to an interested audience; "She shows her dogs frequently"; "We will demo the new software in Washington" </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-parade-verb-1" class="list-unstyled"><strong>(to ..) parade, exhibit, march .</strong> walk ostentatiously; "She parades her new husband around town" </li><li id="http://dbpedia.org/resource/Art_exhibition" class="list-unstyled"><strong>Art exhibition.</strong> Art exhibitions are traditionally the space in which art objects (in the most general sense) meet an audience. The exhibit is universally understood to be for some temporary period unless, as is rarely true, it is stated to be a "permanent exhibition". In American English, they may be called "exhibit", "exposition" (the French word) or "show". In UK English, they are always called "exhibitions" or "shows", and an individual item in the show is an "exhibit". </li><li id="http://dbpedia.org/resource/Exhibition" class="list-unstyled"><strong>Exhibition.</strong> An exhibition, in the most general sense, is an organized presentation and display of a selection of items. In practice, exhibitions usually occur within museums, galleries and exhibition halls, and World's Fairs. Exhibitions include [whatever as in major art museums and small art galleries; interpretive exhibitions, as at natural history museums and history museums], for example; and commercial exhibitions, or trade fairs. </li><li id="http://dbpedia.org/resource/Freak_show" class="list-unstyled"><strong>Freak show.</strong> For the tv-series see Freak Show (TV series). A freak show is an exhibition of biological rarities, referred to as "freaks of nature". Typical features would be physically unusual humans, such as those uncommonly large or small, those with both male and female secondary sexual characteristics, people with other extraordinary diseases and conditions, and performances that are expected to be shocking to the viewers. </li><li id="http://dbpedia.org/resource/Royal_Academy_summer_exhibition" class="list-unstyled"><strong>Royal Academy summer exhibition.</strong> The Summer Exhibition is an open art exhibition held annually by the Royal Academy in Burlington House, Piccadilly in central London, England, during the summer months of June, July, and August. The exhibition includes paintings, prints, drawings, sculpture, architectural designs and models, and is the largest and most popular open exhibition in the United Kingdom. </li><li id="http://dbpedia.org/resource/Online_disinhibition_effect" class="list-unstyled"><strong>Online disinhibition effect.</strong> </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-person-noun-1" class="list-unstyled"><strong>A PERSON.</strong> a human being</li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-event-noun-1" class="list-unstyled"><strong>AN EVENT.</strong> something that happens at a given place and time </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-creation-noun-2" class="list-unstyled"><strong>A CREATIVE WORK.</strong> an artifact that has been brought into existence by someone </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-abstraction-noun-6" class="list-unstyled"><strong>AN ABSTRACTION.</strong> a general concept formed by extracting common features from specific examples </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-organization-noun-1" class="list-unstyled"><strong>AN ORGANIZATION.</strong> a group of people who work together </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-topographic_point-noun-1" class="list-unstyled"><strong>A PLACE or SPOT.</strong> a point located with respect to surface features of some region; "this is a nice place for a picnic"; "a bright spot on a planet" </li><li id="http://www.w3.org/2006/03/wn/wn20/instances/synset-merchandise-noun-1" class="list-unstyled"><strong>A PRODUCT, SOME MERCHANDISE.</strong> commodities offered for sale; "good business depends on having good merchandise"; "that store offers a variety of products" </li></ul>
</ul>

0
style.css → src/style.css
View file

10
tsconfig.json Normal file
View file

@ -0,0 +1,10 @@
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true
},
"exclude": [
"node_modules",
"testfolder"
]
}

15
tsd.json Normal file
View file

@ -0,0 +1,15 @@
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"jquery/jquery.d.ts": {
"commit": "af5b8275d1f2b92738b93fddabc461fc20c553a1"
},
"angularjs/angular.d.ts": {
"commit": "af5b8275d1f2b92738b93fddabc461fc20c553a1"
}
}
}

1765
typings/angularjs/angular.d.ts vendored Normal file
View file

File diff suppressed because it is too large Load diff

3190
typings/jquery/jquery.d.ts vendored Normal file
View file

File diff suppressed because it is too large Load diff

3
typings/tsd.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
/// <reference path="jquery/jquery.d.ts" />
/// <reference path="angularjs/angular.d.ts" />