Merge branch 'issue-14-mr-5' into 'development'

Fix #14 and !5 Allow to paste images to upload them

See merge request !17

AUTHORS.md

@@ -14,3 +14,4 @@
 * Laura Arjona Reina (<https://wiki.debian.org/LauraArjona>), spanish translation
 * Thor77 (<http://thor77.org>), german translation, among other things
 * Quentin Pagès, occitan translation
+* Alexis Clairet (<https://github.com/Turboconnard>), paste image to upload ability

CHANGELOG

@@ -12,6 +12,7 @@ Revision history for Lutim
 	- Add gallery constructor to "my files" list (#33)
 	- Handle too much images in zip download URL (#27)
 	- LocalStorage is now updated if an image's delay is modified
+	- Allow user to paste image from clipboard to upload images (#14 and !5)
 
 0.7.1  2016-06-21
 	- Fix dependency bug

themes/default/public/css/lutim.css

@@ -74,3 +74,12 @@ label.always-encrypt {
     line-height: 21px;
     margin-top: -5.33333px;
 }
+.pasteZone {
+    position: absolute;
+    top: 0;
+    left: -100px;
+    z-index: -999;
+    height: 10000vh;
+    width: 0;
+    display: hidden;
+}

themes/default/public/js/lutim.js

@@ -100,6 +100,7 @@ $('document').ready(function() {
         var deleteday = ($('#delete-day').prop('checked')) ? 1 : 0;
 
         bindddz(firstview, deleteday);
+        initPaste();
 
         $('#file-url-button').on('click', upload_url);
         $('#lutim-file-url').keydown( function(e) {

themes/default/templates/partial/lutim.js.ep

@@ -352,4 +352,110 @@
             },
         });
     }
+
+    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++) {
+            console.log('toto');
+            var item = items[i];
+            if (/image/.test(item.type)) {
+               var file = item.getAsFile();
+               fileUpload(file);
+            } else {
+               //not image..
+            }
+        }
+    }
 % end