Add posibility to control the link to the project (#3)

* add link control to js * add css to not show cursor if no link * add explanation to README.md * small styling in README.md * fix the instructions * bump version to 1.3.0 * link to https://peace.humancopy.net
humancopy · Sep 12, 2023 · c5d4822 · c5d4822
1 parent 5bef063
commit c5d4822
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Add the following piece (~no~ pun intended) of code before the closing ```</body>``` tag on your website to promote **PEACE.JS**:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/peace.js@1.2.1/peace.min.js" async></script>
+<script src="https://cdn.jsdelivr.net/npm/peace.js@1.3.0/peace.min.js" async></script>
 ```
 
 *You can actually paste it anywhere inside the ```<body>```. It will inject itself at the same DOM level as the ```<script>``` tag.*
@@ -13,23 +13,31 @@ Add the following piece (~no~ pun intended) of code before the closing ```</body
 By default, **PEACE.JS** will be appeneded to the parent element of the ```<script>``` tag. If you'd like to inject it somewhere else, simply add the `data-target` attribute:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/peace.min.js" data-target="#footer" async></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/peace.min.js" data-target="#footer" async></script>
+```
+
+## 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
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/peace.min.js" data-link="_self" async></script>
 ```
 
 ## 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
-<script src="https://cdn.jsdelivr.net/npm/peace.js@1.2.1/peace.min.js" data-theme="blue" async></script>
+<script src="https://cdn.jsdelivr.net/npm/peace.js@1.3.0/peace.min.js" data-theme="blue" async></script>
 ```
 
 ## 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
-<script src="https://cdn.jsdelivr.net/npm/peace.js@1.2.1/peace.min.js" data-style="symbol" async></script>
+<script src="https://cdn.jsdelivr.net/npm/peace.js@1.3.0/peace.min.js" data-style="symbol" async></script>
 ```
 
 ## 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 ```<script>``` tag.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/peace.js@1.2.1/peace.min.js" data-auto="false" data-theme="green" async></script>
+<script src="https://cdn.jsdelivr.net/npm/peace.js@1.3.0/peace.min.js" data-auto="false" data-theme="green" data-link="_self" async></script>
 
 <script>
 // Default behaviour
@@ -51,11 +59,13 @@ peaceJS('#footer');
 // Same as above but a jQuery object
 peaceJS($('#footer'));
 
-// Will append to #header, with a blue theme (precedence over green) and symbol style
+// Will append to #header, with a blue theme (precedence over green), symbol style
+// and won't link back to the project :(
 peaceJS({
  target: '#header',
  theme: 'blue',
- style: 'symbol'
+ style: 'symbol',
+ link: false
 });
 </script>
 ```
diff --git 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
@@ -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;
-}
+}
diff --git 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,20 +25,24 @@ 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;
 
  // Do the do if can do
  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
@@ -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;