Add drag and drop support for image editing.

index.html

@@ -15,7 +15,7 @@
             <span class="attribute editable" data-attribute="${attribute}"></span>
 
             <div class="level editable" data-level="${level}"></div>
-            <img class="image"
+            <img class="image editable"
                  src="${image_url}"/>
             <span class="monster_type editable">【${$.i18n.prop('type.'+type)}·${$.i18n.prop('card_type.'+card_type)}】</span>
             <span class="number editable">TH07-ZH998</span>

js/main.coffee

@@ -47,7 +47,6 @@ $(document).ready ->
             if i > 0
               element.dataset['attribute'] = attrs[i - 1]
             
-          
         else if element.classList.contains('level')
           $(element).click (e) ->
             delta = 0
@@ -61,8 +60,59 @@ $(document).ready ->
             if new_level != old_level && new_level > 0 && new_level <= 12
               element.dataset['level'] = new_level
             false
+        else if element.classList.contains('image')
+          src_reg = /src="((http|https|ftp):\/\/[^"]*)"/
+          get_file = (dataTransfer) ->
+            file = null
+            if dataTransfer.files.length > 0
+              for f in dataTransfer.files
+                if f.type.indexOf('image/') == 0
+                  file = f
+                  break
+            file
+
+          get_url = (dataTransfer) ->
+            url = null
+            data = dataTransfer.getData('text/html')
+            if data
+              result = data.match(src_reg)
+              if result
+                url = result[1]
+            if !url
+              data = dataTransfer.getData('text/uri-list')
+              if data
+                url = data.split(/\n|\r/)[0]
+            if !url
+              data = dataTransfer.getData('text/plain')
+              if data.match(/(http|https|ftp):\/\//)
+                url = data
+            url
+
+          element.addEventListener 'dragenter', (e) ->
+            e.preventDefault()
+            if get_file(e.dataTransfer) || get_url(e.dataTransfer)
+              element.classList.add('drop-here')
+              e.dataTransfer.dropEffect = 'copy'
+          element.addEventListener 'dragover', (e) ->
+            e.preventDefault()
 
-          # Level
+          element.addEventListener 'dragleave', (e) ->
+              element.classList.remove('drop-here')
+              e.preventDefault()
+
+          element.addEventListener 'drop', (e) ->
+            element.classList.remove('drop-here')
+            file = get_file(e.dataTransfer)
+            if file
+              r = new FileReader()
+              r.onload = (e) ->
+                element.src = e.target.result
+              r.readAsDataURL(file)
+            else
+              url = get_url(e.dataTransfer)
+              if url
+                element.src = url
+            e.preventDefault()
         else
           element.contentEditable = "plaintext-only"
           if element.contentEditable != "plaintext-only"

js/main.js

@@ -29,7 +29,7 @@
           return this.document.value = $('.card')[0].outerHTML;
         });
         $('.editable').each(function(_, element) {
-          var $e, height;
+          var $e, get_file, get_url, height, src_reg;
           if (element.classList.contains('attribute')) {
             height = element.getClientRects()[0].height;
             $e = $(element);
@@ -70,6 +70,79 @@
               }
               return false;
             });
+          } else if (element.classList.contains('image')) {
+            src_reg = /src="((http|https|ftp):\/\/[^"]*)"/;
+            get_file = function(dataTransfer) {
+              var f, file, _i, _len, _ref;
+              file = null;
+              if (dataTransfer.files.length > 0) {
+                _ref = dataTransfer.files;
+                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+                  f = _ref[_i];
+                  if (f.type.indexOf('image/') === 0) {
+                    file = f;
+                    break;
+                  }
+                }
+              }
+              return file;
+            };
+            get_url = function(dataTransfer) {
+              var data, result, url;
+              url = null;
+              data = dataTransfer.getData('text/html');
+              if (data) {
+                result = data.match(src_reg);
+                if (result) {
+                  url = result[1];
+                }
+              }
+              if (!url) {
+                data = dataTransfer.getData('text/uri-list');
+                if (data) {
+                  url = data.split(/\n|\r/)[0];
+                }
+              }
+              if (!url) {
+                data = dataTransfer.getData('text/plain');
+                if (data.match(/(http|https|ftp):\/\//)) {
+                  url = data;
+                }
+              }
+              return url;
+            };
+            element.addEventListener('dragenter', function(e) {
+              e.preventDefault();
+              if (get_file(e.dataTransfer) || get_url(e.dataTransfer)) {
+                element.classList.add('drop-here');
+                return e.dataTransfer.dropEffect = 'copy';
+              }
+            });
+            element.addEventListener('dragover', function(e) {
+              return e.preventDefault();
+            });
+            element.addEventListener('dragleave', function(e) {
+              element.classList.remove('drop-here');
+              return e.preventDefault();
+            });
+            return element.addEventListener('drop', function(e) {
+              var file, r, url;
+              element.classList.remove('drop-here');
+              file = get_file(e.dataTransfer);
+              if (file) {
+                r = new FileReader();
+                r.onload = function(e) {
+                  return element.src = e.target.result;
+                };
+                r.readAsDataURL(file);
+              } else {
+                url = get_url(e.dataTransfer);
+                if (url) {
+                  element.src = url;
+                }
+              }
+              return e.preventDefault();
+            });
           } else {
             element.contentEditable = "plaintext-only";
             if (element.contentEditable !== "plaintext-only") {

style.css

@@ -183,6 +183,12 @@
     height: 306px;
 }
 
+.drop-here {
+  border: 8px dashed #0055aa;
+  margin-left: -8px;
+  margin-top: -8px;
+}
+
 .monster_type {
     position: absolute;
     left: 34px;