From 7d1e649e6f484a62eda6597acb49b7ffa9db3978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20Norman=20Hauk=C3=A5s?= Date: Sun, 27 Sep 2015 19:16:17 +0200 Subject: [PATCH] made it possible to add or hide sidebar --- content_script.js | 39 +++++++++++++++------------------------ example1.html | 17 +++++++++++++++-- example1.menu.html | 37 +++++++++++++++++++++++++++---------- style.css | 20 +++++++++++++++----- 4 files changed, 72 insertions(+), 41 deletions(-) diff --git a/content_script.js b/content_script.js index 2047123..a35e02f 100644 --- a/content_script.js +++ b/content_script.js @@ -14,28 +14,11 @@ $(document).ready(function () { var sel = window.getSelection(); var selectedText = sel.toString(); } - if (selectedText == false) { - return; - } else { - createPopover(document.activeElement, selectedText); + if (selectedText) { + console.log(selectedText); } } - function createPopover(element, content) { - console.log('createPopover'); - - $(document.activeElement).append('test'); - - $(document.activeElement).popover({ - title: "Please select a semantic tag", - content: 'say something', - html: true, - placement: 'auto' - }); - - $(document.activeElement).popover('show'); - } - document.addEventListener('click', function(evt) { if (!document.hasFocus()) { return true; @@ -50,15 +33,23 @@ $(document).ready(function () { insert a menu for tagging up content. */ var isMenuShown = false; - function bootstrapApplication () { - if (isMenuShown) { - return true; - } + + function addMenu () { + if (isMenuShown) return; $.get('example1.menu.html', function (htmlData) { $('body').children().wrapAll('
'); $('.tagit-body').before(htmlData); + $('#js-hide-menu').click(removeMenu); isMenuShown = true; }); } - $('#js-show-menu').click(bootstrapApplication); + function removeMenu () { + if (!isMenuShown) return; + $('.tagit-body').children().unwrap(); + $('.tagit-menu').remove(); + isMenuShown = false; + } + + $('#js-show-menu').click(addMenu); + }); \ No newline at end of file diff --git a/example1.html b/example1.html index 570b126..e69341d 100644 --- a/example1.html +++ b/example1.html @@ -21,8 +21,21 @@

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.

- +

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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). +

\ No newline at end of file diff --git a/example1.menu.html b/example1.menu.html index c4bf8bc..cf34ea3 100644 --- a/example1.menu.html +++ b/example1.menu.html @@ -1,13 +1,30 @@ -
-

Add a tag

+
+ +
+ +
+ +

Tag you're it

+ +

Select a word to tag with a semantic tag.

+ +

Currently selected word:

-
    -
  • Conscientious objector: A conscientious objector (CO) is an "individual who has claimed the right to refuse to perform military service" on the grounds of freedom
    • - -
  • Irish War of Independence: 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.
    • - -
  • Flag of the United States: 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
    • -
-
\ No newline at end of file +
    +
  • Mathematical proof: In mathematics, a proof is a demonstration that if some fundamental statements are assumed to be true, then some mathematical statement is necessarily true. Proofs are obtained from deductive reasoning, rather than from inductive or empirical arguments; a proof must demonstrate that a statement is always true (occasionally by listing all possible cases and showing that it holds in each), rather than enumerate many confirmatory cases.
    • +
  • Probate: Receipt of probate is the first step in the legal process of administering the estate of a deceased person, resolving all claims and distributing the deceased person's property under a will. A probate court (surrogate court) decides the legal validity of a testator's will and grants its approval (which word derives also from the Latin probo, probare) by granting probate to the executor.
    • +
  • Evidence (law): The law of evidence encompasses the rules and legal principles that govern the proof of facts in a legal proceeding. These rules determine what evidence can be considered by the trier of fact in reaching its decision and, sometimes, the weight that may be given to that evidence. The law of evidence is also concerned with the quantum (amount), quality, and type of proof needed to prevail in litigation.
    • +
  • Oil reserves: The total estimated amount of oil in an oil reservoir, including both producible and non-producible oil, is called oil in place. However, because of reservoir characteristics and limitations in petroleum extraction technologies, only a fraction of this oil can be brought to the surface, and it is only this producible fraction that is considered to be reserves. The ratio of producible oil reserves to total oil in place for a given field is often referred to as the recovery factor.
    • +
  • Presumption of innocence: The presumption of innocence, sometimes referred to by the Latin expression Ei incumbit probatio qui dicit, non qui negat, is the principle that one is considered innocent until proven guilty. Application of this principle is a legal right of the accused in a criminal trial, recognised in many nations.
    • +
  • A person: a human being
    • +
  • An event: something that happens at a given place and time
    • +
  • A creative work: an artifact that has been brought into existence by someone
    • +
  • An abstraction: a general concept formed by extracting common features from specific examples
    • +
  • An organization: a group of people who work together
    • +
  • A place or spot: 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"
    • +
  • A product, some merchandise: commodities offered for sale; "good business depends on having good merchandise"; "that store offers a variety of products"
+
\ No newline at end of file diff --git a/style.css b/style.css index 230cd8d..3530f06 100644 --- a/style.css +++ b/style.css @@ -3,15 +3,25 @@ } .tagit-body { - width: 60%; + width: 70%; + position: absolute; + right: 0; + padding-left: 5px; } -.tagit-selection-menu { - width: 40%; - margin-left: 5px; +.tagit-menu { + position: fixed; + overflow-y: auto; + width: 30%; + top: 0; + left: 0; + bottom: 0; + background-color: #ccc; + padding: 10px; } -.tagit-selection-menu ul { +.tagit-menu ul { padding-left: 15px; + margin-top: 10px; }