diff --git a/.gitignore b/.gitignore index 8641aff..9df3cf3 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,8 @@ themes/default/templates/data.html.ep themes/default/templates/raw.html.ep themes/default/templates/stats.json.ep themes/default/templates/partial/raw.js.ep +!themes/korrigan +!themes/korrigan/* tmp/* .zanata-cache/* cover_db/* diff --git a/themes/korrigan/.gitignore b/themes/korrigan/.gitignore new file mode 100644 index 0000000..913152a --- /dev/null +++ b/themes/korrigan/.gitignore @@ -0,0 +1,2 @@ +public/packed/ +templates/data.html.ep \ No newline at end of file diff --git a/themes/korrigan/Makefile b/themes/korrigan/Makefile new file mode 100644 index 0000000..aabe264 --- /dev/null +++ b/themes/korrigan/Makefile @@ -0,0 +1,35 @@ +EN=lib/Lutim/I18N/en.po +FR=lib/Lutim/I18N/fr.po +DE=lib/Lutim/I18N/de.po +ES=lib/Lutim/I18N/es.po +OC=lib/Lutim/I18N/oc.po +AR=lib/Lutim/I18N/ar.po +SEDOPTS=-e "s@SOME DESCRIPTIVE TITLE@Lutim language file@" \ + -e "s@YEAR THE PACKAGE'S COPYRIGHT HOLDER@2015 Luc Didry@" \ + -e "s@CHARSET@utf8@" \ + -e "s@the PACKAGE package@the Lutim package@" \ + -e '/^\#\. (/{N;/\n\#\. (/{N;/\n.*\.\.\/default\//{s/\#\..*\n.*\#\./\#. (/g}}}' \ + -e '/^\#\. (/{N;/\n.*\.\.\/default\//{s/\n/ /}}' +SEDOPTS2=-e '/^\#.*\.\.\/default\//,+3d' +XGETTEXT=carton exec ../../local/bin/xgettext.pl +CARTON=carton exec + +locales: + $(XGETTEXT) -D templates -D ../default/templates -o $(EN) 2>/dev/null + $(XGETTEXT) -D templates -D ../default/templates -o $(FR) 2>/dev/null + $(XGETTEXT) -D templates -D ../default/templates -o $(DE) 2>/dev/null + $(XGETTEXT) -D templates -D ../default/templates -o $(ES) 2>/dev/null + $(XGETTEXT) -D templates -D ../default/templates -o $(OC) 2>/dev/null + $(XGETTEXT) -D templates -D ../default/templates -o $(AR) 2>/dev/null + sed $(SEDOPTS) -i $(EN) + sed $(SEDOPTS2) -i $(EN) + sed $(SEDOPTS) -i $(FR) + sed $(SEDOPTS2) -i $(FR) + sed $(SEDOPTS) -i $(DE) + sed $(SEDOPTS2) -i $(DE) + sed $(SEDOPTS) -i $(ES) + sed $(SEDOPTS2) -i $(ES) + sed $(SEDOPTS) -i $(OC) + sed $(SEDOPTS) -i $(OC) + sed $(SEDOPTS2) -i $(AR) + sed $(SEDOPTS2) -i $(AR) diff --git a/themes/korrigan/Readme.md b/themes/korrigan/Readme.md new file mode 100644 index 0000000..5b0b6b2 --- /dev/null +++ b/themes/korrigan/Readme.md @@ -0,0 +1,17 @@ +I know there is a lot to work on but this fits my needs for now and don't have much time to rework the theme from beginning. + +Feel free to open a merge request for improvements. + +![preview of the theme](./preview.png) + +# Credits: + +* Triskel image comes from https://upload.wikimedia.org/wikipedia/commons/0/07/Triskele-Symbol-spiral-five-thirds-turns.svg + +# License: + +[MIT](https://opensource.org/licenses/MIT) + +# Author: + +[nicofrand](https://nicofrand.eu) ([Twitter](https://twitter.com/@nicofrand), [Mastodon](https://mastodon.social/@nicofrand)) diff --git a/themes/korrigan/lib/Lutim/I18N.pm b/themes/korrigan/lib/Lutim/I18N.pm new file mode 100644 index 0000000..59160f7 --- /dev/null +++ b/themes/korrigan/lib/Lutim/I18N.pm @@ -0,0 +1,22 @@ +# vim:set sw=4 ts=4 sts=4 ft=perl expandtab: +package Lutim::I18N; + +use base 'Locale::Maketext'; +use File::Basename qw/dirname/; +use Locale::Maketext::Lexicon { + _auto => 1, + _decode => 1, + _style => 'gettext', + '*' => [ + Gettext => dirname(__FILE__) . '/I18N/*.po', + Gettext => $app_dir . 'themes/default/lib/Lutim/I18N/*.po', + ] +}; + +use vars qw($app_dir); +BEGIN { + use Cwd; + my $app_dir = getcwd; +} + +1; diff --git a/themes/korrigan/preview.png b/themes/korrigan/preview.png new file mode 100644 index 0000000..4da0374 Binary files /dev/null and b/themes/korrigan/preview.png differ diff --git a/themes/korrigan/public/css/korrigan.css b/themes/korrigan/public/css/korrigan.css new file mode 100644 index 0000000..f213c15 --- /dev/null +++ b/themes/korrigan/public/css/korrigan.css @@ -0,0 +1,178 @@ + +/* Yeched'mad CSS */ +:root { + --theme-blue: #0060DF; + --theme-blue-hover: #45A1FF; +} + +body { + position: relative; + background-color: #EEEEEE; + + background-size: cover; + + min-height: 100vh; + display: flex; + flex-direction: column; +} + +body::before, +body::after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: -1; +} + +body::before { + background-size: cover; + background-image: url("../img/background.svg"); +} + +body::after { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 4em, transparent 4em); +} + +body .navbar-default { + background-color: transparent; + border-color: transparent; +} + +body .navbar-default .open > a, +body .navbar-default .open > a:focus, +body .navbar-default .open > a:hover, +body .navbar-default .open > a:active { + background-color: rgba(11, 103, 183, 0.5); +} + +body > .container { + flex-grow: 1; + background-color: #FFFFFF; + padding: 3em; + border-radius: 5px; + box-shadow: 1px 1px 5px #333333; + display: flex; + justify-content: space-between; + font-size: 1.15em; + + /* SVG coming from https://upload.wikimedia.org/wikipedia/commons/0/07/Triskele-Symbol-spiral-five-thirds-turns.svg */ + background-image: url('../img/triskel.svg'); + background-size: 500px; + background-repeat: no-repeat; + background-position: -125px calc(100% + 150px); +} + +body > .container .upload-info { + width: 100%; +} + +body > .container::before, +body > .container::after { + display: none; +} + +body.index > .container > * { + background-color: rgba(255, 255, 255, 0.8); + width: calc(50% - 2em); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +body .logo { + display: none; +} + +body .header { + margin-bottom: 2em; +} + +body .hennypenny { + color: var(--theme-blue); + margin-top: 0; + font-family: sans-serif; +} + +body label { + font-weight: normal; + display: block; + margin: 1em 0; +} + +body input[type='checkbox'] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + + position: static; + margin: 0; + cursor: pointer; + vertical-align: middle; + display: inline-flex; + justify-content: flex-start; + align-items: center; + + background-color: #555555; + width: 3rem; + height: 1.5rem; + margin-top: 0.25em; + margin-bottom: 0.25em; + border: none; + border-radius: 1em; +} + +body input[type='checkbox']:checked { + color: #FFFFFF; + background-color: var(--theme-blue); + justify-content: flex-end; +} + +body input[type='checkbox']::after { + content: ''; + margin: 0 0.15rem; + width: 1.2rem; + height: 1.2rem; + border-radius: 50%; + background-color: white; +} + +body .uploader-container { + display: flex; + flex-direction: column; +} + +body .uploader { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + border: 2px dashed #DDDDDD; + border-radius: 5px; + color: #6F7986; +} + +body .uploader:hover { + background-color: #FDFEFF; +} + +body .uploader div.browser label { + background-color: var(--theme-blue); +} + +body .uploader-container form .label { + display: block; +} + +body .btn { + background-color: var(--theme-blue); + color: white; + padding: 0.5em; +} + +body .btn:hover, +body .btn:focus, +body .btn:active { + background-color: var(--theme-blue-hover); +} diff --git a/themes/korrigan/public/img/background.svg b/themes/korrigan/public/img/background.svg new file mode 100644 index 0000000..8c78d0f --- /dev/null +++ b/themes/korrigan/public/img/background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/themes/korrigan/public/img/triskel.svg b/themes/korrigan/public/img/triskel.svg new file mode 100644 index 0000000..e001497 --- /dev/null +++ b/themes/korrigan/public/img/triskel.svg @@ -0,0 +1,63 @@ + + + + + + image/svg+xml + + + + + + + Triple Spiral symbol -- three filled Archimedean spirals (triskelion), less tightly wound + + + + diff --git a/themes/korrigan/templates/index.html.ep b/themes/korrigan/templates/index.html.ep new file mode 100644 index 0000000..439650c --- /dev/null +++ b/themes/korrigan/templates/index.html.ep @@ -0,0 +1,251 @@ +% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab: +% my %d = ( +% delay_0 => l('no time limit'), +% delay_1 => l('24 hours'), +% delay_365 => l('1 year') +% ); + + + + +
+ % if (config('always_encrypt')) { +

<%= l('The images are encrypted on the server (Lutim does not keep the key).') %>

+ % } + % if (defined(stash('short'))) { + % my $url = url_for('/'.stash('short'))->to_abs(); +
+
+ % if (defined(stash('thumb'))) { +
+ <%= stash('filename') %> thumbnail +
+ % } +
+ % # Display image informations +

+ <%= stash('filename') %> +     +

+ % my $delete_url = url_for('delete', {short => stash('real_short'), token => stash('token')})->to_abs(); +
+
+ +
+
+ + +
+
+
+ +
+
+ + +
+
+
+ +
+
+ + +
+
+
+ +
+
+ + +
+
+
+
+ <%= link_to $delete_url => ( class => "btn btn-default col-xs-12 text-left", title => l('Deletion link') ) => begin %> <%= $delete_url %> <%= end %> +
+
+
+
+
+
+ % # Delay modification form + % my $modify_url = url_for('modify', {short => stash('real_short'), token => stash('token')})->to_abs(); +
+
+ + +
+ +
+ <%= submit_button l('Let\'s go!'), class => 'btn btn-sm btn-default btn-primary', id => 'submitmodbutton' %> +
+
+
+
+ % } + % if (defined(flash('success'))) { +
+ +

<%== flash('success') %>

+
+ % } + % if (defined(flash('msg'))) { +
+ + <%= l('Something bad happened') %>
+ <%= flash('filename') %> <%= flash('msg') %> +
+ % } +
+ + + + +
+ +
+ + + +
+ % if ($c->config('watermark_path') && $c->config('watermark_enforce') eq 'none') { + + % } +
+ + +
+
+
<%= l('Drag & drop images here') %>
+
<%= l('-or-') %>
+
+ +
+
+

<%= l('Only images are allowed') %>

+
+

+ + + + +

+ <%= l('Let\'s go!') %> +
+
+ + diff --git a/themes/korrigan/templates/layouts/default.html.ep b/themes/korrigan/templates/layouts/default.html.ep new file mode 100644 index 0000000..a9b98a4 --- /dev/null +++ b/themes/korrigan/templates/layouts/default.html.ep @@ -0,0 +1,98 @@ +% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab: +% use Mojo::Util qw(url_escape); +% my $twitter_url = 'https://twitter.com/share'; +% my $url = url_for('/')->to_abs(); +% $twitter_url .= '?url='.url_escape("$url") +% .'&text=Check out this %23Lutim instance! '; + + + + Lutim + + + + + + + + + + + + + + %= stylesheet '/css/common.min.css' +% if (current_route 'stats') { + %= stylesheet '/css/morris-0.5.1.min.css' +% } else { + %= stylesheet '/css/not_stats.min.css' +% } +% if (current_route 'gallery') { + %= stylesheet '/css/gallery.min.css' +% } + %= stylesheet '/css/korrigan.css' + + + %= include 'partial/navbar', twitter_url => $twitter_url +
+
+
+% if (defined(config('hosted_by'))) { +
+ <%== config('hosted_by') %> +
+% } + +
+% if (defined(config('broadcast_message'))) { +
+ <%== config('broadcast_message') %> +
+% } +% if (defined(stash('stop_upload'))) { +
+ <%= stash('stop_upload') %> +
+% } + <%= content %> +
+% if (defined(config('piwik_img'))) { + +% } + %= javascript '/js/jquery-3.2.1.min.js' + %= javascript '/partial/manifest.js' + %= javascript '/js/toastify.js' + %= javascript '/js/bootstrap.min.js' + %= javascript '/partial/common.js' +% if (current_route 'stats') { + %= javascript '/js/lutim.js' + %= javascript '/js/raphael-min.js' + %= javascript '/js/morris-0.5.1.min.js' + %= javascript '/js/stats.js' + %= javascript '/partial/raw.js' +% } elsif (!(current_route 'about')) { + %= javascript '/js/lutim.js' + %= javascript '/js/dmuploader.min.js' +% } +% if (current_route 'index') { + %= javascript '/partial/lutim.js' +% } +% if (current_route 'gallery') { + %= javascript '/js/photoswipe.min.js' + %= javascript '/js/photoswipe-ui-default.min.js' + %= javascript '/js/jszip.min.js' + %= javascript '/js/FileSaver.min.js' + %= javascript '/partial/gallery.js' + %= javascript '/partial/lutim.js' +% } +% if (current_route 'myfiles') { + %= javascript '/js/moment-with-locales.min.js' + %= javascript '/partial/myfiles.js' +% } + + diff --git a/themes/korrigan/templates/partial/lutim.js.ep b/themes/korrigan/templates/partial/lutim.js.ep new file mode 100644 index 0000000..fb8a8f7 --- /dev/null +++ b/themes/korrigan/templates/partial/lutim.js.ep @@ -0,0 +1,494 @@ +% # vim:set sw=4 ts=4 sts=4 ft=javascript expandtab: +function selectInput() { + $(this).select(); +} +function cleanName(name, empty) { + if (typeof(name) === 'undefined') { + return name; + } + if (empty !== undefined && empty !== null && empty) { + return name.replace(/&(l|g)t;/g, '').replace(/"/g, '\''); + } else { + return name.replace(//g, '>'); + } +} +function tw_url(url) { + return btn = [ + '', + '', + '' + ].join(''); +} +function modifyImage(e) { + e.preventDefault(); + var url = $(this).data('modlink'); + var short = $(this).data('modshort'); + modify(url, short); +} +function modify(url, short) { + var limit = $('#day-'+short).val(); + var del_at_view = ($('#first-view-'+short).prop('checked')) ? 1 : 0; + $.ajax({ + url : url, + type : 'POST', + data : { + 'image_url' : '<%== url_for('/')->to_abs() %>'+short, + 'format' : 'json', + 'delete-day' : limit, + 'first-view' : del_at_view + }, + success: function(data) { + updateItem(short, limit, del_at_view); + goodToast(data.msg); + }, + error: function() { + badToast('<%= l('Error while trying to modify the image.') %>'); + } + }); +} + +function buildMessage(success, msg) { + if(success) { + var s_url = link([msg.short, '.', msg.ext].join(''), ''); + var thumb = (msg.thumb !== null) ? [ + '
', + '', + '', cleanName(msg.filename, true), ' thumbnail', + '', + '
' + ].join('') : '' + return [ + '
', + '', + '
', thumb, + '
', + '

', + '', + msg.filename, + '', + '

', + '
', + '
', + '', + '
', + '
', + '', + '', + '', + '
', + '', + '', + '', + '', + '
', + '
', + '
', + '', + '
', + '
', + '', + '
', + '', + '', + '', + '', + '
', + '
', + '
', + '', + '
', + '
', + '', + '', + '', + '
', + '', + '', + '', + '', + '
', + '
', + '
', + '', + '
', + '
', + '', + '', + '', + tw_url(msg.short), + '
', + '', + '', + '', + '', + '
', + '
', + '
', + '
', + '', link(msg.real_short, '', msg.token), '', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + ' ', + '
', + '', + '
 ', + '', + '<%= l('Let\'s go!') %>', + '', + '
', + '
', + '
', + '
' + ].join(''); + } else { + return [ + '
', + '', + '<%= l('Something bad happened') %>
', + cleanName(msg.filename, false), + '
', + cleanName(msg.msg, false), + '
' + ].join(''); + } +} +function bindddz(firstview, deleteday) { + $('#drag-and-drop-zone').dmUploader({ + url: '<%== url_for('/') %>', + dataType: 'json', + allowedTypes: 'image/*', + maxFileSize: <%= config('max_file_size') %>, + onNewFile: function(id, file){ + $('.messages').append([ + '
', + cleanName(file.name), '
', + '
', + '
', + ' 0%', + '
', + '
', + '
' + ].join('')); + }, + onUploadProgress: function(id, percent){ + var percentStr = ' '+percent+'%'; + $('#'+id).prop('aria-valuenow', percent); + $('#'+id).css('width', percent+'%'); + $('#'+id+'-text').html(percentStr); + }, + onUploadSuccess: function(id, data){ + data.msg.filename = cleanName(data.msg.filename); + $('#'+id+'-div').remove(); + if ($('#copy-all').length === 0 && data.success) { + $('.messages').prepend([ + '
', + '', + '<%= l('Copy all view links to clipboard') %>', + '', + '
' + ].join('')); + } + $('.messages').append(buildMessage(data.success, data.msg)); + $('#del-'+data.msg.real_short).on('click', function(e) { + e.preventDefault(); + rmFromShortHash(data.msg.short+'.'+data.msg.ext) + rmFromZipHash(data.msg.short); + rmFromRandomHash(data.msg.short); + }); + $('#del-'+data.msg.real_short).on('click', delImage); + if (data.success) { + addToShortHash(data.msg.short+'.'+data.msg.ext); + addToZipHash(data.msg.short); + addToRandomHash(data.msg.short); + $('.close').unbind('click', evaluateCopyAll); + $('.close').on('click', evaluateCopyAll); + $('input[type=\'text\']').unbind("click", selectInput); + $('input[type=\'text\']').on("click", selectInput); + $('.copy-all-to-clipboard-link').unbind('click', copyAllToClipboard); + $('.copy-all-to-clipboard-link').on('click', copyAllToClipboard); + $('.modify-image').unbind('click', modifyImage); + $('.modify-image').on('click', modifyImage); + $('.copy-to-clipboard-link').unbind('click', clickOnCopyLink); + $('.copy-to-clipboard-link').on('click', clickOnCopyLink); + addItem(data.msg); + } + }, + onUploadError: function(id, message){ + $('.messages').append(buildMessage(false, '')); + }, + onFileSizeError: function(file){ + $('.messages').append(buildMessage(false, { filename: file.name, msg: '<%= l('The file exceed the size limit (%1)', config('max_file_size')) %>'})); + } + }); +} + +function upload_url(e) { + e.preventDefault(); + var val = $('#lutim-file-url').val(); + if (val !== undefined && val !== '') { + $('#lutim-file-url').prop('disabled', 'disabled'); + $('.hidden-spin').css('display', 'block'); + $.ajax({ + url : '<%== url_for('/') %>', + type : 'POST', + data : { + 'lutim-file-url' : val, + 'format' : 'json', + 'first-view' : ($('#first-view').prop('checked')) ? 1 : 0, + 'crypt' : ($('#crypt').prop('checked')) ? 1 : 0, + 'delete-day' : $('#delete-day').val() + }, + success: function(data) { + data.msg.filename = cleanName(data.msg.filename); + $('.messages').append(buildMessage(data.success, data.msg)); + if (data.success) { + if ($('#copy-all').length === 0) { + $('.messages').prepend([ + '
', + '', + '<%= l('Copy all view links to clipboard') %>', + '', + '
' + ].join('')); + } + $('#lutim-file-url').val(''); + addToShortHash(data.msg.short+'.'+data.msg.ext); + addToZipHash(data.msg.short); + addToRandomHash(data.msg.short); + $('#del-'+data.msg.real_short).on('click', delImage); + $('.close').unbind('click', evaluateCopyAll); + $('.close').on('click', evaluateCopyAll); + addItem(data.msg); + } + }, + error: function() { + $('.messages').append(buildMessage(false, '')); + }, + complete: function() { + $('#lutim-file-url').prop('disabled', ''); + $('.hidden-spin').css('display', 'none'); + $('.copy-all-to-clipboard-link').unbind('click', copyAllToClipboard); + $('.copy-all-to-clipboard-link').on('click', copyAllToClipboard); + $('.modify-image').unbind('click', modifyImage); + $('.modify-image').on('click', modifyImage); + $('.copy-to-clipboard-link').unbind('click', clickOnCopyLink); + $('.copy-to-clipboard-link').on('click', clickOnCopyLink); + } + }); + } +} + +function fileUpload(file) { + var fd = new FormData(); + fd.append('file', file); + + fd.append('format', 'json'); + fd.append('first-view', ($('#first-view').prop('checked')) ? 1 : 0); + fd.append('crypt', ($('#crypt').prop('checked')) ? 1 : 0); + fd.append('delete-day', ($('#delete-day').val())); + + $('.messages').append([ + '
', cleanName(file.name), '
', + '
', + '
', + ' 0%', + '
', + '
', + '
' + ].join('')); + // Ajax Submit + $.ajax({ + url: '<%== url_for('/') %>', + type: 'POST', + dataType: 'json', + data: fd, + cache: false, + contentType: false, + processData: false, + forceSync: false, + xhr: function(){ + var xhrobj = $.ajaxSettings.xhr(); + if(xhrobj.upload){ + xhrobj.upload.addEventListener('progress', function(event) { + var percent = 0; + var position = event.loaded || event.position; + var total = event.total || e.totalSize; + if(event.lengthComputable){ + percent = Math.ceil(position / total * 100); + } + + var percentStr = ' '+percent+'%'; + $('#1').prop('aria-valuenow', percent); + $('#1').css('width', percent+'%'); + $('#1-text').html(percentStr); + }, false); + } + + return xhrobj; + }, + success: function (data, message, xhr){ + $('#1-div').remove(); + if ($('#copy-all').length === 0 && data.success) { + $('.messages').prepend([ + '
', + '', + '<%= l('Copy all view links to clipboard') %>', + '', + '
' + ].join('')); + } + data.msg.filename = cleanName(data.msg.filename); + $('.messages').append(buildMessage(data.success, data.msg)); + if (data.success) { + $('.close').unbind('click', evaluateCopyAll); + $('.close').on('click', evaluateCopyAll); + addItem(data.msg); + } + }, + error: function (xhr, status, errMsg){ + $('.messages').append(buildMessage(false, '')); + }, + complete: function () { + $('.copy-all-to-clipboard-link').unbind('click', copyAllToClipboard); + $('.copy-all-to-clipboard-link').on('click', copyAllToClipboard); + $('.modify-image').unbind('click', modifyImage); + $('.modify-image').on('click', modifyImage); + $('.copy-to-clipboard-link').unbind('click', clickOnCopyLink); + $('.copy-to-clipboard-link').on('click', clickOnCopyLink); + } + }); +} + +function initPaste() { + /* + actually FF and Chrome doesn't handle paste events the same way... + for ff we need to create a editable div and register an event to it. + When user paste, the image is "really" pasted in the div. Then, we need to iterate throught + the div childs to get images. Previsouly FF didn't have the paste event so it was esay to figure on wich browser we were. + But firefox now have a paste event so I test it... + + on Chrome the file object is directlyt in the clipboard. + */ + var b = 'FF'; + try { + //FF + var cbe = new ClipboardEvent('hop'); + } catch(hop) { + //under webkkit Clipboard doesn't have arguments... + b = 'WK' + } + if (b === 'FF') { + var pasteDiv = document.createElement('div'); + pasteDiv.addEventListener('paste', onPasteFF); + pasteDiv.setAttribute('class', 'pasteZone'); + pasteDiv.setAttribute('contenteditable', true); + + document.getElementsByTagName('body')[0].appendChild(pasteDiv); + pasteDiv.focus(); + + document.addEventListener('click', function(event) { + var t = $(event.target); + + switch (t[0].nodeName.toUpperCase()) { + case 'A': + case 'BUTTON': + case 'INPUT': + case 'SELECT': + case 'SPAN': + case 'LABEL': + break; + default: + if (t[0].parentNode.nodeName.toUpperCase() !== 'SELECT') { + pasteDiv.focus(); + } + } + }); + } else { + document.addEventListener('paste', onPaste); + } +} + +function waitforpastedata(elem, savedcontent) { + if (elem.childNodes && elem.childNodes.length > 0) { + processpaste(elem, savedcontent); + } else { + var that = { + e: elem, + s: savedcontent + }; + that.callself = function () { + waitforpastedata(that.e, that.s); + } + setTimeout(that.callself, 20); + } +} + +function processpaste(elem, savedcontent) { + var pasteZone = document.getElementsByClassName('pasteZone')[0]; + var f = new Image(); + + f.onload = function(){ + var canvas = document.createElement('canvas'); + canvas.width = f.width; + canvas.height = f.height; + + var ctx = canvas.getContext('2d'); + ctx.drawImage(f, 0, 0, canvas.width, canvas.height); + + canvas.toBlob(function(blob) { + var url = window.URL.createObjectURL(blob); + fileUpload(blob); + }); + } + + f.src = pasteZone.childNodes[0].src; + + pasteZone.innerHTML = ''; +} + +function onPasteFF(e) { + var pasteZone = document.getElementsByClassName('pasteZone')[0]; + waitforpastedata(pasteZone, 'savedcontent'); +} + +function onPaste(e) { + var items = e.clipboardData.items; + for(var i = 0; i < items.length; i++) { + var item = items[i]; + if (/image/.test(item.type)) { + var file = item.getAsFile(); + fileUpload(file); + } else { + //not image.. + } + } +}