diff --git a/README.md b/README.md index 8c27f2c..17ac59d 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Add the following piece (~no~ pun intended) of code before the closing `````` tag on your website to promote **PEACE.JS**: ```html - + ``` *You can actually paste it anywhere inside the ``````. It will inject itself at the same DOM level as the ``` + +``` + +## Link + +**PEACE.JS** will automatically link the generated peace banner to the project's homepage. By default the link will open in a new window. You can either change it to open in the same window or to not have any link at all (why would you want to do that though is beyond me :smirk:). Possible values are: anything supported by the [a[target]](https://www.w3schools.com/tags/att_a_target.asp) attribute or `false` to disable the link. + +```html + ``` ## Themes -The default text color for **PEACE.JS** is black. This can be controlled via the `data-theme` attribute. Possible values are: black, white, green & blue. +The default text color for **PEACE.JS** is black. This can be controlled via the `data-theme` attribute. Possible values are: `black`, `white`, `green` & `blue`. ```html - + ``` ## Style -By default, **PEACE.JS** will show the word Peace in different languages. If you prefer instead to show a peace symbol, simply add the `data-style="symbol"` attribute to the script tag: +By default, **PEACE.JS** will show the word Peace in different languages. If you prefer instead to show a peace symbol, simply add the `data-style="symbol"` attribute to the script tag. Possible values are: `text`, `symbol` ```html - + ``` ## Autoloading @@ -39,7 +47,7 @@ You can also disable the automatic activation of the banner by adding the attrib The ```peaceJS()``` function accepts an optional argument of either a hash of options, DOM element, DOM selector or jQuery object. Any option passed to ```peaceJS()``` has precedence over what was defined on the ``` + ``` diff --git a/package.json b/package.json index e94cfa9..30c3193 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "peace.js", - "version": "1.2.1", + "version": "1.3.0", "description": "Peace please", "main": "peace.js", "scripts": { diff --git a/peace.css b/peace.css index 97cd1e1..bab00e4 100644 --- a/peace.css +++ b/peace.css @@ -1,7 +1,7 @@ /** * PEACE.js - http://humancopy.net/peace-js.html * Peace please, humancopy.net 2017 - * Version 1.2.1 + * Version 1.3.0 * */ @@ -41,6 +41,9 @@ margin-left: -16px; z-index: 1; } +a:not([href]) { + cursor: default; +} .peace.symbol a { opacity: 0; position: relative; @@ -78,4 +81,4 @@ .peace.blue a:hover, .peace.blue a:visited { color: #0000ee; -} \ No newline at end of file +} diff --git a/peace.js b/peace.js index 8e9f60b..03ca27c 100644 --- a/peace.js +++ b/peace.js @@ -1,7 +1,7 @@ /** * PEACE.js - http://humancopy.net/peace-js.html * Peace please, humancopy.net 2017 - * Version 1.2.1 + * Version 1.3.0 * */ @@ -25,12 +25,16 @@ var peaceJS; // Assume we got a jQuery object else if (!options.target.nodeType) options.target = options.target[0]; - // possible options: text, symbol + // possible options: text (default), symbol options.style = options.style || script_tag.getAttribute('data-style') || 'text'; - // possible options: black, white, green & blue + // possible options: black (default), white, green & blue options.theme = options.theme || script_tag.getAttribute('data-theme') || 'black'; + // possible options: '_blank' (default), _self, false (no link) + options.link = options.link === false || options.link ? options.link : (script_tag.getAttribute('data-link') || '_blank'); + if (options.link === 'false') options.link = false; + var peace = ['Peace', 'Paz', 'שלום', 'سلام', '平和', 'शांति', 'Paix', 'мир', 'Pace', 'Frieden'], target_element = options.target || document.getElementsByTagName('footer')[0] || document.body; @@ -38,7 +42,7 @@ var peaceJS; if (target_element) { // Load the CSS link = document.createElement('link'); - link.href = 'https://cdn.jsdelivr.net/npm/peace.js@1.2.1/peace.min.css'; + link.href = 'https://cdn.jsdelivr.net/npm/peace.js@1.3.0/peace.min.css'; link.type = 'text/css'; link.rel = 'stylesheet'; link.media = 'screen,print'; @@ -53,8 +57,11 @@ var peaceJS; // Append & set the link element paragraph.appendChild(link_node); - link_node.href = 'https://humancopy.github.io/peace.js'; link_node.appendChild(document.createTextNode(peace.join(', '))); + if (options.link) { + link_node.href = 'https://peace.humancopy.net'; + link_node.setAttribute('target', options.link) + } // Do we want to show the peace symbol? if (options.style == 'symbol') { @@ -77,4 +84,3 @@ var peaceJS; if (auto_load) peaceJS(); })(); - diff --git a/peace.scss b/peace.scss index da7a741..b1cc209 100644 --- a/peace.scss +++ b/peace.scss @@ -1,7 +1,7 @@ /** * PEACE.js - http://humancopy.net/peace-js.html * Peace please, humancopy.net 2017 - * Version 1.2.1 + * Version 1.3.0 * */ @@ -43,6 +43,10 @@ z-index: 1; } + a:not([href]) { + cursor: default; + } + &.symbol { a { opacity: 0;