Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lets translate texts #56

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Lets translate texts #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions demos/demo-translate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="twitter:site" content="techcrunch" />
<meta property="fb:app_id" content="187288694643718" />
<meta property="fb:admins" content="1076790301,543710097,500024101,771265067,1661021707,1550970059,663677613,10219991,1178144075,726995222,506404657,4700188" />
<meta property="og:site_name" content="TechCrunch" />
<meta property="og:site" content="social.techcrunch.com" />
<meta property="og:title" content="TechCrunch" />
<meta property="og:description" content="TechCrunch is a leading technology media property, dedicated to obsessively profiling startups, reviewing new Internet products, and breaking tech news." />
<meta property="og:image" content="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo-large.png" />
<meta property="og:url" content="http://social.techcrunch.com/" />
<meta property="og:type" content="website" />

<meta name="viewport" content="width=device-width,initial-scale=1"/>

<title>Share Selection Demo</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body {
font-family:"Helvetica Neue", Helvetica;
font-weight: 200;
line-height: 1.5;
}

#wrap {
max-width: 660px;
margin: 100px auto;
}
</style>

<link rel="stylesheet" href="../src/selection-sharer.css" />
</head>

<body>

<div id="wrap">
<p>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.</p>

<p>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 (<a href="http://twitter.com/xdamman">@xdamman</a>).</p>

<p>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.</p>
</div>

<script src="../src/selection-sharer.js"></script>
<script>
langs={'ca':{
'shareOn':'Comparteix la selecciò en %s',
'shareByMail':'Comparteix esta selecciò per email',
'quoteFrom':'Cita de '
}
};
var sharer = new SelectionSharer({elements:'p',lang:'ca',langs:langs});
console.log(sharer);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even though this is demo file can we get rid of console.log to keep the demo clean?

</script>
</body>
</html>

10 changes: 7 additions & 3 deletions demos/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
</style>

<link rel="stylesheet" href="../src/selection-sharer.css" />

</head>

<body>
Expand All @@ -47,9 +46,14 @@

<script src="../src/selection-sharer.js"></script>
<script>
var sharer = new SelectionSharer('p');
langs={'ca':{
'shareOn':'Comparteix la selecciò en %s',
'shareByMail':'Comparteix esta selecciò per email'
}
};
var sharer = new SelectionSharer({elements:'p',lang:'ca',langs:langs});
console.log(sharer);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here with console.log

</script>

</body>
</html>

82 changes: 51 additions & 31 deletions src/selection-sharer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,32 @@
var SelectionSharer = function(options) {

var self = this;

this.lang = 'en';
this.langs={
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The formatting is a bit off here.

'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 "

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might want to get rid of extra line here as well.

}
}
options = options || {};
if(typeof options == 'string')
options = { elements: options };
options = { elements: options };
if(options.lang)
this.lang=options.lang;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting issue here as well.

if(options.langs)
this.langs=options.langs;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting.


this.sel = null;
this.textSelection='';
Expand Down Expand Up @@ -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();
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably needs just 4 space indentation here.


this.shareTwitter = function(e) {
e.preventDefault();

Expand All @@ -221,62 +251,52 @@
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");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs 4 space indent too.

self.hide();
return false;
};

this.shareFacebook = function(e) {
e.preventDefault();
var text = self.htmlSelection.replace(/<p[^>]*>/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(/<p[^>]*>/ig,'\n').replace(/<\/p>| /ig,'').trim();
var email = {};
email.subject = encodeURIComponent("Quote from "+document.title);
email.subject = encodeURIComponent(salf.translate('quoteFrom')+document.title);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably has typo is this supposed to be self?

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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting issue in this block also.

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 = ' <li><a class="action tweet" href="" title="'+self.translate("shareOn","Twitter")+'" target="_blank">Tweet</a></li>';
var liShareFacebook = ' <li><a class="action facebook" href="" title="'+self.translate("shareOn","Facebook")+'" target="_blank">Facebook</a></li>';
var liShareMail = ' <li><a class="action email" href="" title="'+self.langs[self.lang].shareByMail+'" target="_blank"><svg width="20" height="20"><path stroke="%23FFF" stroke-width="6" d="m16,25h82v60H16zl37,37q4,3 8,0l37-37M16,85l30-30m22,0 30,30"/></svg></a></li>';
var ulShare = ' <ul>' + liShareTwitter + liShareFacebook + liShareMail + ' </ul>';
var popoverHTML = '<div class="selectionSharer" id="selectionSharerPopover" style="position:absolute;">'
+ ' <div id="selectionSharerPopover-inner">'
+ ' <ul>'
+ ' <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>'
+ ' <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>'
+ ' <li><a class="action email" href="" title="Share this selection by email" target="_blank"><svg width="20" height="20"><path stroke="%23FFF" stroke-width="6" d="m16,25h82v60H16zl37,37q4,3 8,0l37-37M16,85l30-30m22,0 30,30"/></svg></a></li>'
+ ' </ul>'
+ ulShare
+ ' </div>'
+ ' <div class="selectionSharerPopover-clip"><span class="selectionSharerPopover-arrow"></span></div>'
+ '</div>';

var popunderHTML = '<div id="selectionSharerPopunder" class="selectionSharer">'
+ ' <div id="selectionSharerPopunder-inner">'
+ ' <label>Share this selection</label>'
+ ' <ul>'
+ ' <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>'
+ ' <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>'
+ ' <li><a class="action email" href="" title="Share this selection by email" target="_blank"><svg width="20" height="20"><path stroke="%23FFF" stroke-width="6" d="m16,25h82v60H16zl37,37q4,3 8,0l37-37M16,85l30-30m22,0 30,30"/></svg></a></li>'
+ ' </ul>'
+ ulShare
+ ' </div>'
+ '</div>';
self.$popover = $(popoverHTML);
Expand Down