starting building functionality for bootstrapping the tagging menu.
This commit is contained in:
Nils Norman Haukås
parent
bcf903a335
commit
cc83d7aad2
7 changed files with 70 additions and 56 deletions
|
|
@ -8,7 +8,7 @@ gulp.task('serve', function () {
|
|||
browserSync.init({
|
||||
server: {
|
||||
baseDir: "./",
|
||||
index: "prototype-menu.html"
|
||||
index: "example1.html"
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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('<div class="tagit-body" />');
|
||||
$('.tagit-body').before(htmlData);
|
||||
isMenuShown = true;
|
||||
});
|
||||
}
|
||||
$('#js-show-menu').click(bootstrapApplication);
|
||||
});
|
||||
28
example1.html
Normal file
28
example1.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Prototype page mockup</title>
|
||||
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="bower_components/bootstrap/js/tooltip.js"></script>
|
||||
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="content_script.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>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
13
example1.menu.html
Normal file
13
example1.menu.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<div class="well pull-right u-add-margin-top tagit-selection-menu">
|
||||
<h2>Add a tag</h2>
|
||||
|
||||
<input type="text" class="form-control" placeholder="Filter tags">
|
||||
|
||||
<ul>
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Conscientious_objector"><em class="word">Conscientious objector</em>: A conscientious objector (CO) is an "individual who has claimed the right to refuse to perform military service" on the grounds of freedom</li>
|
||||
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Irish_War_of_Independence"><em class="word">Irish War of Independence</em>: The Irish War of Independence (Irish: Cogadh na Saoirse), Anglo-Irish War, Black and Tan War, or Tan War was a guerrilla war mounted by the Irish Republican Army (IRA) against the British government and its forces in Ireland.</li>
|
||||
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Flag_of_the_United_States"><em class="word">Flag of the United States</em>: The national flag of the United States of America, often simply referred to as the American flag, consists of thirteen equal horizontal stripes of red (top and bottom) alternating with white, with a blue rectangle in the canton</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Prototype page mockup</title>
|
||||
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="bower_components/bootstrap/js/tooltip.js"></script>
|
||||
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="content_script.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="container">
|
||||
|
||||
<div style="width:40%;" class="well pull-right u-add-margin-top tagit-selection-menu">
|
||||
<h2>Add a tag</h2>
|
||||
|
||||
<input type="text" class="form-control" placeholder="Filter tags">
|
||||
|
||||
<ul>
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Conscientious_objector"><em class="word">Conscientious objector</em>: A conscientious objector (CO) is an "individual who has claimed the right to refuse to perform military service" on the grounds of freedom</li>
|
||||
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Irish_War_of_Independence"><em class="word">Irish War of Independence</em>: The Irish War of Independence (Irish: Cogadh na Saoirse), Anglo-Irish War, Black and Tan War, or Tan War was a guerrilla war mounted by the Irish Republican Army (IRA) against the British government and its forces in Ireland.</li>
|
||||
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Flag_of_the_United_States"><em class="word">Flag of the United States</em>: The national flag of the United States of America, often simply referred to as the American flag, consists of thirteen equal horizontal stripes of red (top and bottom) alternating with white, with a blue rectangle in the canton</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="width:60%;">
|
||||
<h1>Testing ground</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>
|
||||
|
||||
<br>
|
||||
|
||||
<div>Yet another weird <span class="selected">text.</span></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
style.css
12
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<input type="search" class="form-control" placeholder="Filter tags">
|
||||
|
||||
<ul id="senses">
|
||||
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Conscientious_objector"><em class="word">Conscientious objector</em>: A conscientious objector (CO) is an "individual who has claimed the right to refuse to perform military service" on the grounds of freedom</li>
|
||||
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Irish_War_of_Independence"><em class="word">Irish War of Independence</em>: The Irish War of Independence (Irish: Cogadh na Saoirse), Anglo-Irish War, Black and Tan War, or Tan War was a guerrilla war mounted by the Irish Republican Army (IRA) against the British government and its forces in Ireland.</li>
|
||||
|
||||
<li data-source="DBPedia" class="word-sense" id="http://dbpedia.org/resource/Flag_of_the_United_States"><em class="word">Flag of the United States</em>: The national flag of the United States of America, often simply referred to as the American flag, consists of thirteen equal horizontal stripes of red (top and bottom) alternating with white, with a blue rectangle in the canton</li>
|
||||
|
||||
</ul>
|
||||
Loading…
Reference in a new issue