diff --git a/ShareButtons/README.md b/ShareButtons/README.md new file mode 100644 index 0000000..e899c79 --- /dev/null +++ b/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 + + org.webjars.npm + dbmdz__mirador-sharebuttons + 1.0.0 + +``` + +## Usage + +### Including + +Enable the plugin by including the CSS and the JavaScript (**after** loading Mirador): + +```html + +... + +``` + +### 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 | diff --git a/ShareButtons/gulpfile.js b/ShareButtons/gulpfile.js new file mode 100644 index 0000000..788521b --- /dev/null +++ b/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']); diff --git a/ShareButtons/package.json b/ShareButtons/package.json new file mode 100644 index 0000000..e22d817 --- /dev/null +++ b/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" + } +} diff --git a/ShareButtons/shareButtons.css b/ShareButtons/shareButtons.css new file mode 100644 index 0000000..7acef02 --- /dev/null +++ b/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; +} diff --git a/ShareButtons/shareButtons.js b/ShareButtons/shareButtons.js new file mode 100644 index 0000000..c183d87 --- /dev/null +++ b/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}}', + '', + '{{/if}}', + '
', + '{{#each shareButtons}}', + '', + '', + '', + '', + '', + '', + '{{/each}}', + '
' + ].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 + }); + }); + } +}; diff --git a/lerna.json b/lerna.json index d43b76f..a069cb9 100644 --- a/lerna.json +++ b/lerna.json @@ -8,6 +8,7 @@ "MultiPageNavigation", "PhysicalRuler", "PiwikTracking", + "ShareButtons", "ViewFromUrl" ], "version": "independent"