Add new plugin ShareButtons

ShareButtons/README.md

@@ -0,0 +1,77 @@
+# Share buttons
+
+[![NPM](https://img.shields.io/npm/v/@dbmdz/mirador-sharebuttons.svg)](https://www.npmjs.com/package/@dbmdz/mirador-sharebuttons)
+[![Maven Central](https://img.shields.io/maven-central/v/org.webjars.npm/dbmdz__mirador-sharebuttons.svg?maxAge=2592000)](http://search.maven.org/#search%7Cga%7C1%7Ca%3A%22dbmdz__mirador-sharebuttons%22)
+
+Provides functions for adding additional buttons that allow sharing content across different social media platforms.
+
+**NOTE:** This plugin is just a library, it does nothing by just including it.
+
+## Installation
+
+You can find production-ready build artifacts in the [releases section](https://github.com/dbmdz/mirador-plugins/releases).
+
+Alternatively, you can use `npm` to install the artifacts:
+
+```sh
+$ npm install @dbmdz/mirador-sharebuttons
+```
+
+If you have a Java Web-Application managed with `mvn`, there is also a WebJar, which can be included as follows:
+
+```xml
+<dependency>
+  <groupId>org.webjars.npm</groupId>
+  <artifactId>dbmdz__mirador-sharebuttons</artifactId>
+  <version>1.0.0</version>
+</dependency>
+```
+
+## Usage
+
+### Including
+
+Enable the plugin by including the CSS and the JavaScript (**after** loading Mirador):
+
+```html
+<link rel="stylesheet" type="text/css" href="<url to the plugin>/shareButtons.css" />
+...
+<script src="<url to the plugin>/shareButtons.js"></script>
+```
+
+### Provided functions
+
+#### init(showExternalLinkInfo) → {void}
+
+Registers some needed `Handlebars` helpers and sets a variable.
+
+Parameters:
+
+| Name                 | Type    | Description                                                                                               | Default |
+|----------------------|---------|-----------------------------------------------------------------------------------------------------------|---------|
+| showExternalLinkInfo | Boolean | Display an info that the website containing the Mirador instance is left by clicking on the share buttons | false   |
+
+#### injectButtonsToDom(targetSelector, position) → {void}
+
+Injects the buttons to the target selector element in the given position.
+
+Parameters:
+
+| Name           | Type   | Description                                                  | Default      |
+|----------------|--------|--------------------------------------------------------------|--------------|
+| targetSelector | String | The selector for the element that should contain the buttons |              |
+| position       | String | The position of the buttons within the containing element    | "afterbegin" |
+
+#### updateButtonLinks(data) → {void}
+
+Injects the buttons to the target selector element in the given position.
+
+Parameters:
+
+| Name              | Type   | Description                            |
+|-------------------|--------|----------------------------------------|
+| data              | Object | The data for the links                 |
+| data.attribution  | String | The attribution of the link to share   |
+| data.label        | String | The label of the link to share         |
+| data.link         | String | The link itself                        |
+| data.thumbnailUrl | String | The thumbnail url of the link to share |

ShareButtons/gulpfile.js

@@ -0,0 +1,46 @@
+var gulp = require('gulp');
+var clean = require('gulp-clean');
+var linter = require('gulp-jshint');
+var minifyCSS = require('gulp-clean-css');
+var minifyJS = require('gulp-minify');
+var rename = require('gulp-rename');
+
+gulp.task('clean', function(){
+  return gulp.src(
+    ['*.min.css', '*.min.js'], {read: false}
+  ).pipe(clean());
+});
+
+gulp.task('lint', function(){
+  return gulp.src(['*.js', '!*.min.js', '!gulpfile.js']).pipe(
+    linter()
+  ).pipe(
+    linter.reporter('default')
+  );
+});
+
+gulp.task('minify-css', ['clean'], function(){
+  return gulp.src('*.css').pipe(
+    minifyCSS()
+  ).pipe(
+    rename({ suffix: '.min' })
+  ).pipe(
+    gulp.dest('.')
+  );
+});
+
+gulp.task('minify-js', ['clean'], function(){
+  return gulp.src(['*.js', '!gulpfile.js']).pipe(
+    minifyJS({
+      exclude: ['dist'],
+      ext:{
+        min:'.min.js'
+      },
+      noSource: true
+    })
+  ).pipe(
+    gulp.dest('.')
+  );
+});
+
+gulp.task('minify', ['clean', 'minify-css', 'minify-js']);

ShareButtons/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@dbmdz/mirador-sharebuttons",
+  "version": "0.0.0",
+  "description": "Adds extra buttons for sharing things on different social media platforms.",
+  "keywords": [
+    "iiif",
+    "mirador"
+  ],
+  "license": "MIT",
+  "author": "Matthias Lindinger",
+  "main": "shareButtons.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dbmdz/mirador-plugins.git"
+  },
+  "scripts": {
+    "lint": "gulp lint",
+    "minify": "gulp minify",
+    "prepublishOnly": "npm run minify"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

ShareButtons/shareButtons.css

@@ -0,0 +1,32 @@
+#share-buttons-info {
+  margin-bottom: 5px;
+  text-align: left;
+}
+
+#share-buttons > .share-button {
+  color: white;
+}
+
+#share-buttons > #share-on-envelope .fa-circle {
+  color: #7d7d7d;
+}
+
+#share-buttons > #share-on-facebook .fa-circle {
+  color: #3B5998;
+}
+
+#share-buttons > #share-on-pinterest .fa-circle {
+  color: #CB2027;
+}
+
+#share-buttons > #share-on-tumblr .fa-circle {
+  color: #32506d;
+}
+
+#share-buttons > #share-on-twitter .fa-circle {
+  color: #55acee;
+}
+
+#share-buttons > #share-on-whatsapp .fa-circle {
+  color: #25d366;
+}

ShareButtons/shareButtons.js

@@ -0,0 +1,108 @@
+var ShareButtons = {
+  /* all of the needed locales */
+  locales: {
+    'de': {
+      'share-buttons-info': 'Beim Klick auf einen der Teilen-Buttons verlassen Sie diese Webseite.',
+      'share-on-envelope': 'Per Mail teilen',
+      'share-on-facebook': 'Auf Facebook teilen',
+      'share-on-pinterest': 'Auf Pinterest teilen',
+      'share-on-tumblr': 'Auf Tumblr teilen',
+      'share-on-twitter': 'Auf Twitter teilen',
+      'share-on-whatsapp': 'Per Whatsapp teilen'
+    },
+    'en': {
+      'share-buttons-info': 'By clicking on one of the share buttons, you will leave this website.',
+      'share-on-envelope': 'Share via mail',
+      'share-on-facebook': 'Share on Facebook',
+      'share-on-pinterest': 'Share on Pinterest',
+      'share-on-tumblr': 'Share on Tumblr',
+      'share-on-twitter': 'Share on Twitter',
+      'share-on-whatsapp': 'Share via Whatsapp'
+    }
+  },
+
+  /* options of the plugin */
+  showExternalLinkInfo: false,
+
+  /* the template for the buttons */
+  buttonsTemplate: Mirador.Handlebars.compile([
+    '{{#if showExternalLinkInfo}}',
+    '<div id="share-buttons-info" class="alert alert-info" role="alert">{{t "share-buttons-info"}}</div>',
+    '{{/if}}',
+    '<div id="share-buttons" class="pull-left">',
+    '{{#each shareButtons}}',
+    '<a type="button" class="share-button" id="share-on-{{this}}" title="{{t (concat this)}}" target="_blank" data-target="{{this}}">',
+    '<span class="fa-stack fa-lg">',
+    '<i class="fa fa-circle fa-stack-2x"></i>',
+    '<i class="fa fa-{{this}} fa-stack-1x" aria-hidden="true"></i>',
+    '</span>',
+    '</a>',
+    '{{/each}}',
+    '</div>'
+  ].join('')),
+
+  /* the templates for the different links */
+  linkTemplates: {
+    'envelope': Mirador.Handlebars.compile(
+      'mailto:?subject={{{label}}}{{#if attribution}} ({{attribution}}){{/if}}&body={{{label}}}{{#if attribution}} ({{{attribution}}}){{/if}}: {{link}}'
+    ),
+    'facebook': Mirador.Handlebars.compile(
+      'https://www.facebook.com/sharer/sharer.php?title={{{label}}} {{#if attribution}} ({{attribution}}){{/if}}&u={{link}}'
+    ),
+    'pinterest': Mirador.Handlebars.compile(
+      'http://pinterest.com/pin/create/bookmarklet/?url={{link}}&description={{{label}}}%20{{#if attribution}}%20({{attribution}}){{/if}}&media={{{thumbnailUrl}}}'
+    ),
+    'tumblr': Mirador.Handlebars.compile(
+      'http://www.tumblr.com/share/link?url={{link}}&name={{{label}}} {{#if attribution}} ({{attribution}}){{/if}}&tags=iiif'
+    ),
+    'twitter': Mirador.Handlebars.compile(
+      'https://twitter.com/intent/tweet?text={{{truncate label attribution}}}&url={{link}}&hashtags=iiif'
+    ),
+    'whatsapp': Mirador.Handlebars.compile(
+      'whatsapp://send?text={{{label}}} {{#if attribution}} ({{attribution}}){{/if}}: {{link}}'
+    )
+  },
+
+  /* initializes the plugin */
+  init: function(showExternalLinkInfo){
+    Mirador.Handlebars.registerHelper('concat', function(target){
+      return 'share-on-' + target;
+    });
+    Mirador.Handlebars.registerHelper('truncate', function(label, attribution){
+      var text = label + (attribution ? ' (' + attribution + ')' : '');
+      if(text.length > 60){
+        text = text.substring(0, 60) + '...';
+      }
+      return text;
+    });
+    this.showExternalLinkInfo = showExternalLinkInfo || false;
+  },
+
+  /* injects the buttons to the target selector element */
+  injectButtonsToDom: function(targetSelector, position){
+    var shareButtons = ['facebook', 'twitter', 'pinterest', 'tumblr', 'envelope'];
+    if('ontouchstart' in window || navigator.maxTouchPoints){
+      shareButtons.push('whatsapp');
+    }
+    if(position === undefined || ['beforebegin', 'afterbegin', 'beforeend', 'afterend'].indexOf(position) === -1){
+      position = 'afterbegin';
+    }
+    document.querySelector(targetSelector).insertAdjacentHTML(position, this.buttonsTemplate({
+      'shareButtons': shareButtons,
+      'showExternalLinkInfo': this.showExternalLinkInfo
+    }));
+  },
+
+  /* updates the button links with the given parameters */
+  updateButtonLinks: function(data){
+    var this_ = this;
+    $('#share-buttons > .share-button').attr('href', function(){
+      return this_.linkTemplates[$(this).data('target')]({
+        'label': data.label,
+        'attribution': data.attribution,
+        'link': data.link,
+        'thumbnailUrl': data.thumbnailUrl
+      });
+    });
+  }
+};

lerna.json

@@ -8,6 +8,7 @@
     "MultiPageNavigation",
     "PhysicalRuler",
     "PiwikTracking",
+    "ShareButtons",
     "ViewFromUrl"
   ],
   "version": "independent"