diff --git a/Gulpfile.js b/Gulpfile.js index 47e97a9..c781f93 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -8,7 +8,7 @@ gulp.task('serve', function () { browserSync.init({ server: { baseDir: "./", - index: "prototype-menu.html" + index: "example1.html" } }); diff --git a/content_script.js b/content_script.js index a824626..2047123 100644 --- a/content_script.js +++ b/content_script.js @@ -6,7 +6,7 @@ $(document).ready(function () { if (focused) { try { selectedText = focused.value.substring( - focused.selectionStart, focused.selectionEnd); + focused.selectionStart, focused.selectionEnd); } catch (err) { } } @@ -45,4 +45,20 @@ $(document).ready(function () { // evt.preventDefault(); }, false); + /* + Take the existing content, make it narrower and + insert a menu for tagging up content. + */ + var isMenuShown = false; + function bootstrapApplication () { + if (isMenuShown) { + return true; + } + $.get('example1.menu.html', function (htmlData) { + $('body').children().wrapAll('
'); + $('.tagit-body').before(htmlData); + isMenuShown = true; + }); + } + $('#js-show-menu').click(bootstrapApplication); }); \ No newline at end of file diff --git a/example1.html b/example1.html new file mode 100644 index 0000000..570b126 --- /dev/null +++ b/example1.html @@ -0,0 +1,28 @@ + + + + Prototype page mockup + + + + + + + + + + +
+ + + +
+

Sample text

+ +

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.

+ +
+ + \ No newline at end of file diff --git a/example1.menu.html b/example1.menu.html new file mode 100644 index 0000000..c4bf8bc --- /dev/null +++ b/example1.menu.html @@ -0,0 +1,13 @@ +
+

Add a tag

+ + + + +
\ No newline at end of file diff --git a/prototype-menu.html b/prototype-menu.html deleted file mode 100644 index 87f9c16..0000000 --- a/prototype-menu.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - Prototype page mockup - - - - - - - - - - -
-

Add a tag

- - - - -
- -
-

Testing ground

- -

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.

- -
- -
Yet another weird text.
- -
- - \ No newline at end of file diff --git a/style.css b/style.css index 7ed4bec..230cd8d 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,16 @@ margin-top: 20px; } +.tagit-body { + width: 60%; +} + +.tagit-selection-menu { + width: 40%; + margin-left: 5px; +} + .tagit-selection-menu ul { padding-left: 15px; -} \ No newline at end of file +} + diff --git a/test-menu-content.html b/test-menu-content.html deleted file mode 100644 index de6950e..0000000 --- a/test-menu-content.html +++ /dev/null @@ -1,11 +0,0 @@ - - - \ No newline at end of file