onatcer / vue-picture-sharesheet

A Vue Picture Sharesheet Component heavily inspired by the Image Sharesheet in Apple's Newsroom

Vue Picture Sharesheet Compoenent

vue-picture-sharesheet provides an easy and beautiful sharesheet when hovering over images. Currently supported main features are:

• sharing to Twitter/Facebook
• copying the current URL to the Clipboard
• Downloading the Image

Demo 😻

with cute cats 😻 (The Download in the Demo will just download random cat images as the image changes with every request)

Getting Started

(Vue CLI Usage recommended)

Install

npm install vue-picture-sharesheet --save

Import locally

import PictureSharesheet  from 'vue-picture-sharesheet';

export default {
  name: 'HelloWorld',
  components: {
    PictureSharesheet
  }
}

OR import globally (f.e. in the Main.js)

import PictureSharesheet from 'vue-picture-sharesheet'
Vue.component('picture-sharesheet',PictureSharesheet);

Properties

Native image attributes 🛠

• src: String : URL, Specifies the URL of an image
• alt: String : text, Specifies an alternate text for an image
• height: String : pixels/%, Specifies the height of an image
• width: String : pixels/%, Specifies the width of an image
• ismap: boolean : ismap, Specifies an image as a server-side image-map
• longdesc: String : URL, Specifies a URL to a detailed description of an image
• usemap: String : #mapname, Specifies an image as a client-side image-map
• crossorigin : String: anonymous | use-credentials, Allow images from third-party sites that allow cross-origin access to be used with canvas

Component attributes 🎨

• sheetcolor: String : Color, Specifies the Background-color of the Sharesheet
• iconcolor: String : Color, Specifies the Background-color of the Sharesheet
• position: String : bottom | top | left| right, Position of the Sharesheet
• size: String : pixels/%, height/width of the Sharesheet
• sharemessage: String : Will be shared in addition to the link. Per Default Website Title. In Facebook Share Dialog as Quote.
• fixed: Boolean : if set Sharesheet is visible all the time

Examples

Showing the Sharesheet all the time (not only while :hover) and set the background-color of the sharesheet to white and the icon color to black.

<picture-sharesheet src="https://source.unsplash.com/800x500/?cat" sheetcolor="#FFF" iconcolor="#000" fixed/>

Set the position of the sharesheet to top, the height of the Sharesheet to 100px and the message that will be shared via the Social Media Buttons to "YAY!"

<picture-sharesheet src="https://source.unsplash.com/600x550/?cat" position="top" size="100px" sharemessage="YAY!"/>

Commands

• npm start - Starting a Server to run the demos/examples
• npm run-script demo - Building the demos/examples in /docs

Roadmap

• Multiple Image Source (srcset .. )
• Mobile optimized
• different overlay modes
• custom icons