cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add russian translation, translate share strings, add share to

Browse Source 
vkontakte and update styles to account for longer texts
This commit is contained in:
Georg Fischer
2016-01-13 14:32:49 +01:00
parent eda5d0b20f
commit 3ec6a6b64e
16 changed files with 346 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/config.js
+12 -2
View File
@@ -36,13 +36,23 @@ define(
settings: {
canZoomWithPointer: { value: true },
resizeUploadedImages: { value: true },
language: { value: 'en-us', options: [ 'en-us', 'en-gb', 'de-de' ] }
language: { value: 'en-us', options: [ 'en-us', 'en-gb', 'de-de', 'ru-ru' ] }
},
localForage: {
name : 'glitchtool',
storeName : 'keyvaluepairs'
},
origin: location.protocol + '//' + location.host + ( location.port !== '' ? ':' + location.port : '' )
origin: location.protocol + '//' + location.host + ( location.port !== '' ? ':' + location.port : '' ),
share: {
appURL: 'https://snorpey.github.io/jpg-glitch',
sharer: {
facebook: 'https://www.facebook.com/sharer/sharer.php',
twitter: 'https://twitter.com/intent/tweet',
reddit: 'https://www.reddit.com/submit',
pinterest: 'https://pinterest.com/pin/create/button/',
vkontakte: 'http://vk.com/share.php'
}
}
};
}
);
scripts/models/localisationmodel.js
+11 -5
View File
@@ -77,9 +77,8 @@ define(
if ( el && attribute && key ) {
textElData.push( { el: el, attribute: attribute, key: key, wasUpdated: false, args: getArgs( arguments ) } );
} else {
if ( typeof el === 'string' ) {
return getTextForKey( el, getArgs( arguments, 1 ) );
}
var args = getArgs( arguments, 1 );
return getTextForKey( el, getArgs( arguments, 1 ) );
}
updateAllTexts();
@@ -117,7 +116,7 @@ define(
currentLanguage = newLanguageName;
languageWasLoaded = true;
texts = newLanguage;
saveLanguage( newLanguage );
resetAllTexts();
updateAllTexts();
@@ -191,7 +190,14 @@ define(
args.forEach( function ( arg, index ) {
regex = new RegExp( '{\\$' + ( index + 1 ) + '}' );
result = result.replace( regex, arg );
if ( typeof arg === 'string' ) {
result = result.replace( regex, arg );
} else {
if ( typeof arg === 'function' ) {
result = result.replace( regex, arg() );
}
}
} );
}
scripts/util/string.js
+16 -1
View File
@@ -69,11 +69,26 @@ define(
endTag;
}
// http://stackoverflow.com/a/1714899/229189
function objToQueryStr ( obj, prefix ) {
var str = [ ];
for ( var p in obj ) {
if ( obj.hasOwnProperty( p ) ) {
var k = prefix ? prefix + '[' + p + ']' : p, v = obj[p];
str.push( typeof v === 'object' ? objToQueryStr( v, k ) : encodeURIComponent( k ) + '=' + encodeURIComponent( v ) );
}
}
return str.join( '&' );
}
return {
toCamelCase: toCamelCase,
autop: autop,
markdownToHtml: markdownToHtml,
markdownLinksToHtml: markdownLinksToHtml
markdownLinksToHtml: markdownLinksToHtml,
objToQueryStr: objToQueryStr
};
}
)
scripts/views/appview.js
+5 -2
View File
@@ -1,7 +1,7 @@
/*global define*/
define(
[ 'util/el' ],
function ( elHelper ) {
[ 'util/el', 'util/localizetext' ],
function ( elHelper, loc ) {
// the app view, wrapping element of the app
// also updates the html element classes
function AppView ( parentEl ) {
@@ -12,6 +12,9 @@ define(
var self = this;
var el = elHelper.createEl( 'div', 'app', parentEl );
loc( document.title, 'textContent', 'index.title' );
loc( document.documentElement, 'lang', 'lang' );
function showOnlineOptions () {
document.documentElement.classList.add( 'is-online' );
scripts/views/controlsview.js
+4 -3
View File
@@ -1,7 +1,7 @@
/*global define*/
define(
[ 'util/addpublishers', 'util/el' ],
function ( addPublishers, elHelper ) {
[ 'util/addpublishers', 'util/el', 'util/localizetext' ],
function ( addPublishers, elHelper, loc ) {
// the control elements are used to change the appearance of the image
function ControlsView ( parentEl, buttonParentEl, params ) {
if ( ! ( this instanceof ControlsView ) ) {
@@ -44,7 +44,8 @@ define(
function addControl ( key, params ) {
var controlEl = elHelper.createEl( 'div', 'control', controlsWrapperEl );
elHelper.createLabel( 'controls.' + key, 'input-' + key, 'control-label', controlEl );
var labelEl = elHelper.createLabel( 'controls.' + key, 'input-' + key, 'control-label', controlEl );
loc( labelEl, 'title', 'controls.' + key );
var inputEl = elHelper.createEl( 'input', 'control-input', controlEl );
inputEl.setAttribute( 'data-key', key );
scripts/views/navview.js
+1 -1
View File
@@ -57,7 +57,7 @@ define(
buttonEl.addEventListener( 'click', toggle, false );
var headlineEl = elHelper.createEl( 'h1', 'nav-headline', el );
headlineEl.textContent = document.title;
loc( headlineEl, 'textContent', 'index.title' );
var navBreakPoint = 600;
var navWidth = 300;
scripts/views/settingsview.js
+1 -1
View File
@@ -40,7 +40,7 @@ define(
optionEl.value = option;
loc( optionEl, 'textContent', 'settings.' + name + 'options.' + option );
if ( option === value ) {
optionEl.selected = true
}
scripts/views/shareview.js
+67 -50
View File
@@ -1,7 +1,7 @@
/*global define*/
define(
[ 'util/addpublishers', 'views/dialog', 'util/el', 'util/browser', 'util/time', 'util/localizetext' ],
function ( addPublishers, Dialog, elHelper, browser, timeHelper, loc ) {
[ 'config', 'util/addpublishers', 'views/dialog', 'util/el', 'util/browser', 'util/time', 'util/string', 'util/localizetext' ],
function ( config, addPublishers, Dialog, elHelper, browser, timeHelper, strHelper, loc ) {
// shareview lets users upload their glitched image to imgur and
// share links on social media
function ShareView ( parentEl ) {
@@ -39,24 +39,28 @@ define(
imgLinkEl.id = 'img-link-input';
var imgurLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'imgur-link button' );
loc( imgurLinkEl, 'textContent', 'share.openon', 'Imgur' );
loc( imgurLinkEl, 'title', 'share.openontitle', 'Imgur' );
loc( imgurLinkEl, 'textContent', 'share.openon', getLocFn( 'share.target.imgur' ) );
loc( imgurLinkEl, 'title', 'share.openontitle', getLocFn( 'share.target.imgur' ) );
var redditShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'reddit-link button' );
loc( redditShareLinkEl, 'textContent', 'share.shareon', 'Reddit' );
loc( redditShareLinkEl, 'title', 'share.shareontitle', 'Reddit' );
loc( redditShareLinkEl, 'textContent', 'share.shareon', getLocFn( 'share.target.reddit' ) );
loc( redditShareLinkEl, 'title', 'share.shareontitle', getLocFn( 'share.target.reddit' ) );
var twitterShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'twitter-link button' );
loc( twitterShareLinkEl, 'textContent', 'share.shareon', 'Twitter' );
loc( twitterShareLinkEl, 'title', 'share.shareontitle', 'Twitter' );
loc( twitterShareLinkEl, 'textContent', 'share.shareon', getLocFn( 'share.target.twitter' ) );
loc( twitterShareLinkEl, 'title', 'share.shareontitle', getLocFn( 'share.target.twitter' ) );
var facebookShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'facebook-link button' );
loc( facebookShareLinkEl, 'textContent', 'share.shareon', 'Facebook' );
loc( facebookShareLinkEl, 'title', 'share.shareontitle', 'Facebook' );
loc( facebookShareLinkEl, 'textContent', 'share.shareon', getLocFn( 'share.target.facebook' ) );
loc( facebookShareLinkEl, 'title', 'share.shareontitle', getLocFn( 'share.target.facebook' ) );
var pinterestShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'pinterest-link button' );
loc( pinterestShareLinkEl, 'textContent', 'share.shareon', 'Pinterest' );
loc( pinterestShareLinkEl, 'title', 'share.shareontitle', 'Pinterest' );
loc( pinterestShareLinkEl, 'textContent', 'share.shareon', getLocFn( 'share.target.pinterest' ) );
loc( pinterestShareLinkEl, 'title', 'share.shareontitle', getLocFn( 'share.target.pinterest' ) );
var vkontakteShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'vkontakte-link button' );
loc( vkontakteShareLinkEl, 'textContent', 'share.shareon', getLocFn( 'share.target.vkontakte' ) );
loc( vkontakteShareLinkEl, 'title', 'share.shareontitle', getLocFn( 'share.target.vkontakte' ) );
var sharedListEl;
@@ -69,7 +73,8 @@ define(
.add( isOnlineCssClass, redditShareLinkEl )
.add( isOnlineCssClass, twitterShareLinkEl )
.add( isOnlineCssClass, facebookShareLinkEl )
.add( isOnlineCssClass, pinterestShareLinkEl );
.add( isOnlineCssClass, pinterestShareLinkEl )
.add( isOnlineCssClass, vkontakteShareLinkEl );
if ( browser.test( 'localforage' ) ) {
sharedListEl = elHelper.createEl( 'ul', 'shared-list dialog-list' );
@@ -89,16 +94,19 @@ define(
function updateShareUrl ( imgUrl, imgId ) {
clearTimeout( clearTimeoutId );
var imgurLink = 'https://imgur.com/' + imgId;
dialog.el.classList.add( 'has-links' );
imgLinkEl.textContent = imgUrl;
imgLinkEl.href = imgUrl;
imgLinkEl.setAttribute( 'data-imgurid', imgId );
imgurLinkEl.href = 'https://imgur.com/' + imgId;
imgurLinkEl.href = imgurLink;
redditShareLinkEl.href = getRedditShareUrl( imgUrl );
twitterShareLinkEl.href = getTwitterShareUrl( imgUrl );
facebookShareLinkEl.href = getFacebookShareUrl( imgUrl );
pinterestShareLinkEl.href = getPinterestShareUrl( imgUrl );
redditShareLinkEl.href = getShareUrl( 'reddit', imgUrl, imgurLink );
twitterShareLinkEl.href = getShareUrl( 'twitter', imgUrl, imgurLink );
facebookShareLinkEl.href = getShareUrl( 'facebook', imgUrl, imgurLink );
pinterestShareLinkEl.href = getShareUrl( 'pinterest', imgUrl, imgurLink );
vkontakteShareLinkEl.href = getShareUrl( 'vkontakte', imgUrl, imgurLink );
}
function clearShareUrl () {
@@ -286,39 +294,48 @@ define(
}
}
function getShareDescription ( imgUrl ) {
return 'Check out what I made with @snorpey’s glitch tool: ' + imgUrl + ' https://snorpey.github.io/jpg-glitch';
// https://gist.github.com/dr-dimitru/7164862
function getShareUrl ( service, imgUrl, imgurLink ) {
var description = loc( 'share.link.description.edited' );
var title = loc( 'share.link.title' );
var params = { };
if ( [ 'reddit', 'vkontakte' ].indexOf( service ) !== -1 ) {
params.title = title;
}
if ( [ 'pinterest', 'vkontakte' ].indexOf( service ) !== -1 ) {
params.description = description + ' ' + config.share.appURL;
params.url = config.appURL;
}
if ( service === 'pinterest' ) {
params.media = imgUrl;
}
if ( service === 'vkontakte' ) {
params.image = imgUrl;
}
if ( service === 'reddit' ) {
params.url = imgUrl;
}
if ( service === 'facebook' ) {
params.u = imgurLink;
}
if ( service === 'twitter' ) {
params.text = loc( 'share.link.description.withname' ) + ' ' + imgUrl + ' ' + config.share.appURL;
}
return config.share.sharer[service] + '?' + strHelper.objToQueryStr( params );
}
function getTwitterShareUrl ( imgUrl ) {
return 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( getShareDescription( imgUrl ) );
}
function getRedditShareUrl ( imgUrl ) {
return 'https://www.reddit.com/submit?url=' + encodeURIComponent( imgUrl ) + '&title=Glitch!';
}
// http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
function getFacebookShareUrl ( imgUrl ) {
var text = 'Check out what I made with this glitch tool: https://snorpey.github.io/jpg-glitch';
var shareUrl = 'https://www.facebook.com/sharer/sharer.php?s=100';
shareUrl += '&p[url]=' + imgUrl;
shareUrl += '&p[title]=Glitch!';
shareUrl += '&p[images][0]=' + imgUrl;
shareUrl += '&p[summary]=' + encodeURIComponent( text );
return shareUrl;
}
function getPinterestShareUrl ( imgUrl ) {
var text = 'I made this with snorpey\'s glitch tool: https://snorpey.github.io/jpg-glitch';
var link = 'https://snorpey.github.io/jpg-glitch';
var shareUrl = 'https://pinterest.com/pin/create/button/';
shareUrl += '?url=' + encodeURIComponent( link );
shareUrl += '&media=' + encodeURIComponent( imgUrl );
shareUrl += '&description=' + encodeURIComponent( text );
return shareUrl;
function getLocFn ( key ) {
return function () {
return loc( key );
}
}
self.showUpload = showUpload;