From e8e95554c30bc57fa1fd0b546283f96ae779a08e Mon Sep 17 00:00:00 2001 From: jfgarcia Date: Sun, 20 Aug 2017 11:38:03 +0200 Subject: [PATCH] Lets translate texts Add translation for the titles of the buttons, three sample languages in the source code, english, spanish and french. some code optimizations for window.open and some repeated html code --- demos/demo-translate.html | 60 ++++++++++++++++++++++++++++ demos/demo.html | 10 +++-- src/selection-sharer.js | 82 ++++++++++++++++++++++++--------------- 3 files changed, 118 insertions(+), 34 deletions(-) create mode 100644 demos/demo-translate.html diff --git a/demos/demo-translate.html b/demos/demo-translate.html new file mode 100644 index 0000000..075557b --- /dev/null +++ b/demos/demo-translate.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + Share Selection Demo + + + + + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore alias ullam eveniet officiis consequatur laboriosam porro aliquid minima eum impedit. Suscipit minima eligendi necessitatibus consequuntur pariatur natus quae placeat. Suscipit.

+ +

This script will also scan the document to look for related twitter accounts to sugges to follow after the user shares a quote. Here, it should suggest to follow me (@xdamman).

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius iusto placeat ex repellat sit cumque consequatur corporis? Minus harum enim odit aperiam ut recusandae veritatis architecto eum laudantium autem.

+
+ + + + + + diff --git a/demos/demo.html b/demos/demo.html index cfc6b08..3d30e96 100644 --- a/demos/demo.html +++ b/demos/demo.html @@ -32,7 +32,6 @@ - @@ -47,9 +46,14 @@ - diff --git a/src/selection-sharer.js b/src/selection-sharer.js index 8ac2bf6..ee13164 100644 --- a/src/selection-sharer.js +++ b/src/selection-sharer.js @@ -14,10 +14,32 @@ var SelectionSharer = function(options) { var self = this; - + this.lang = 'en'; + this.langs={ + 'en':{ + 'shareOn':'Share this selection on %s', + 'shareByMail':'Share this selection by email', + 'quoteFrom':"Quote from " + }, + 'es':{ + 'shareOn':'Comparte esta selección en %s', + 'shareByMail':'Comparte esta selección por email', + 'quoteFrom':"Cite de " + }, + 'fr':{ + 'shareOn':'Partagez la sélection sur %s', + 'shareByMail':'Partagez la sélection par email', + 'quoteFrom':"Citation de " + + } + } options = options || {}; if(typeof options == 'string') - options = { elements: options }; + options = { elements: options }; + if(options.lang) + this.lang=options.lang; + if(options.langs) + this.langs=options.langs; this.sel = null; this.textSelection=''; @@ -211,6 +233,14 @@ return ''; }; + this.windowOpen = function(url, name){ + var w = 640, h=440; + var left = (screen.width - w) / 2; + var top = (screen.height - h) /2 - 100; + window.open(url, name, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); + self.hide(); + }; + this.shareTwitter = function(e) { e.preventDefault(); @@ -221,10 +251,7 @@ if(self.viaTwitterAccount && text.length < (120-6-self.viaTwitterAccount.length)) url += '&via='+self.viaTwitterAccount; - var w = 640, h=440; - var left = (screen.width/2)-(w/2); - var top = (screen.height/2)-(h/2)-100; - window.open(url, "share_twitter", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); + self.windowOpen(url, "share_twitter"); self.hide(); return false; }; @@ -232,39 +259,36 @@ this.shareFacebook = function(e) { e.preventDefault(); var text = self.htmlSelection.replace(/]*>/ig,'\n').replace(/<\/p>| /ig,'').trim(); - - var url = 'https://www.facebook.com/dialog/feed?' + - 'app_id='+self.appId + - '&display=popup'+ - '&caption='+encodeURIComponent(text)+ - '&link='+encodeURIComponent(self.url2share)+ - '&href='+encodeURIComponent(self.url2share)+ - '&redirect_uri='+encodeURIComponent(self.url2share); - var w = 640, h=440; - var left = (screen.width/2)-(w/2); - var top = (screen.height/2)-(h/2)-100; - - window.open(url, "share_facebook", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); + var encUrl2share = encodeURIComponent(self.url2share); + var url = 'https://www.facebook.com/dialog/feed?'+'app_id='+self.appId+'&display=popup'+'&caption='+encodeURIComponent(text)+'&link='+encUrl2share+'&href='+encUrl2share+ + '&redirect_uri='+encUrl2share; + self.windowOpen(url, "share_facebook"); }; this.shareEmail = function(e) { var text = self.textSelection.replace(/]*>/ig,'\n').replace(/<\/p>| /ig,'').trim(); var email = {}; - email.subject = encodeURIComponent("Quote from "+document.title); + email.subject = encodeURIComponent(salf.translate('quoteFrom')+document.title); email.body = encodeURIComponent("“"+text+"”")+"%0D%0A%0D%0AFrom: "+document.title+"%0D%0A"+window.location.href; $(this).attr("href","mailto:?subject="+email.subject+"&body="+email.body); self.hide(); return true; }; - + this.translate = function(varText,Replace){ + // check for illegal language assignement, if lang is not defined uses english by default + if(!self.langs[self.lang]) self.lang = "en"; + var text=self.langs[self.lang][varText]; + if (Replace) text=text.replace("%s",Replace); + return text; + } this.render = function() { + var liShareTwitter = '
  • Tweet
    • '; + var liShareFacebook = '
    • '; + var liShareMail = '
    • '; + var ulShare = '
      ' + liShareTwitter + liShareFacebook + liShareMail + '
    '; var popoverHTML = '
    ' + '
    ' - + ' ' + + ulShare + '
    ' + '
    ' + '
    '; @@ -272,11 +296,7 @@ var popunderHTML = '
    ' + '
    ' + ' ' - + ' ' + + ulShare + '
    ' + '
    '; self.$popover = $(popoverHTML);