drop upload

assets/javascripts/decks.coffee

@@ -30,16 +30,16 @@ class Card extends Spine.Model
         lang.type >>= 1
         i++
       {
-        id: card._id
-        alias: card.alias
-        name: lang.name
-        card_type: card_type
-        type: (i = 0; (i++ until lang.race >> i & 1); @types[i]) if lang.race
-        attribute: (i = 0; (i++ until lang.attribute >> i & 1); @_attributes[i]) if lang.attribute
-        level: card.level
-        atk: card.atk
-        def: card.def
-        description: lang.desc
+      id: card._id
+      alias: card.alias
+      name: lang.name
+      card_type: card_type
+      type: (i = 0; (i++ until lang.race >> i & 1); @types[i]) if lang.race
+      attribute: (i = 0; (i++ until lang.attribute >> i & 1); @_attributes[i]) if lang.attribute
+      level: card.level
+      atk: card.atk
+      def: card.def
+      description: lang.desc
       }
     )
 
@@ -54,7 +54,7 @@ class Card extends Spine.Model
         catch e
           cards_id.push lang._id
       if cards_id.length
-        $.getJSON "#{@url}?q=#{JSON.stringify({_id:{ $in: cards_id}})}", (cards) =>
+        $.getJSON "#{@url}?q=#{JSON.stringify({_id: { $in: cards_id}})}", (cards) =>
           @load cards, langs
           for card in cards
             result.push Card.find card._id
@@ -62,12 +62,15 @@ class Card extends Spine.Model
       else
         callback(result)
 
-  @fetch_by_id: (cards_id, callback)->
+  @fetch_by_id: (cards_id, callback, before, after)->
     cards_id = (card_id for card_id in cards_id when !Card.exists(card_id))
     if cards_id.length
-      $.when($.getJSON("#{@url}?q=#{JSON.stringify({_id: {$in: cards_id}})}"), $.getJSON("#{@locale_url}?q=#{JSON.stringify({_id:{ $in: cards_id}})}")).done (cards, langs)=>
-        @load(cards[0], langs[0])
-        callback()
+      before() if before
+      $.when($.getJSON("#{@url}?q=#{JSON.stringify({_id:
+        {$in: cards_id}})}"), $.getJSON("#{@locale_url}?q=#{JSON.stringify({_id: { $in: cards_id}})}")).done (cards, langs)=>
+          @load(cards[0], langs[0])
+          callback()
+          after() if after
     else
       callback()
 
@@ -157,7 +160,7 @@ class Deck extends Spine.Model
     for line in lines
       if !line or line.charAt(0) == '#'
         continue
-      else if line.substr(0,5) == '!side'
+      else if line.substr(0, 5) == '!side'
         card_usages.push {card_id: last_id, side: side, count: count} if last_id
         side = true
         last_id = null
@@ -218,10 +221,12 @@ class DecksController extends Spine.Controller
     @_deck
 
   refresh: =>
-    Card.fetch_by_id (card_usage.card_id for card_usage in @deck().card_usages().all()), =>
-      @deck().sort()
-      @render()
-
+    Card.fetch_by_id((card_usage.card_id for card_usage in @deck().card_usages().all()), =>
+        @deck().sort()
+        @render()
+      , =>
+        @html $('#loading_template').tmpl()
+    )
   render: =>
     @html $('#deck_template').tmpl({main: @deck().main(), side: @deck().side(), extra: @deck().extra(), main_count: @deck().main_count(), side_count: @deck().side_count(), extra_count: @deck().extra_count(), category_count: @deck().category_count()})
     @set_history()
@@ -257,21 +262,18 @@ class DecksController extends Spine.Controller
       deck_width = $('.deck_part').width()
       card_width = $('.card_usage').width()
 
-      main_margin = Math.floor((deck_width - card_width * Math.max(Math.ceil(@deck().main_count() / 4),10)) / (Math.max(Math.ceil(@deck().main_count() / 4),10)-1) / 2)
+      main_margin = Math.floor((deck_width - card_width * Math.max(Math.ceil(@deck().main_count() / 4), 10)) / (Math.max(Math.ceil(@deck().main_count() / 4), 10) - 1) / 2)
       $('.deck_part.main').css {'margin-left': -main_margin, 'margin-right': -main_margin}
       $('.deck_part.main .card_usage').css {'margin-left': main_margin, 'margin-right': main_margin}
 
-      side_margin = Math.floor((deck_width - card_width * Math.max(@deck().side_count(),10)) / (Math.max(@deck().side_count(),10)-1) / 2)
+      side_margin = Math.floor((deck_width - card_width * Math.max(@deck().side_count(), 10)) / (Math.max(@deck().side_count(), 10) - 1) / 2)
       $('.deck_part.side').css {'margin-left': -side_margin, 'padding-right': -side_margin}
       $('.deck_part.side .card_usage').css {'margin-left': side_margin, 'margin-right': side_margin}
 
-      extra_margin = Math.floor((deck_width - card_width * Math.max(@deck().extra_count(),10)) / (Math.max(@deck().extra_count(),10)-1) / 2)
+      extra_margin = Math.floor((deck_width - card_width * Math.max(@deck().extra_count(), 10)) / (Math.max(@deck().extra_count(), 10) - 1) / 2)
       $('.deck_part.extra').css {'margin-left': -extra_margin, 'padding-right': -extra_margin}
       $('.deck_part.extra .card_usage').css {'margin-left': extra_margin, 'margin-right': extra_margin}
 
-
-
-
   upload: (files)->
     file = files[0]
     reader = new FileReader()
@@ -309,11 +311,15 @@ class DecksController extends Spine.Controller
     $(".bottom_area div").click ->
       $(this).addClass("bottom_button_active").removeClass("bottom_button")
       $(this).siblings().addClass("bottom_button").removeClass("bottom_button_active")
-      $dangqian = $(".card_frame .frame_element").eq($(".bottom_area div").index(this));
-      $dangqian.addClass("card_frame_focus");
-      $dangqian.siblings().removeClass("card_frame_focus");
+      $dangqian = $(".card_frame .frame_element").eq($(".bottom_area div").index(this))
+      ;
+      $dangqian.addClass("card_frame_focus")
+      ;
+      $dangqian.siblings().removeClass("card_frame_focus")
+      ;
     $('.card_frame .frame_element').jscroll({W: "12px", Btn:
-      {btn: false}});
+      {btn: false}})
+    ;
   show: (e) ->
     card = $(e.target).tmplItem().data.card()
     @show_card(card)
@@ -365,12 +371,12 @@ $(document).ready ->
 
       #share
       $('#deck_share').click ->
-        $("#deck_url").val deck.url()
+        $("#deck_url").val decks.deck().url()
         $("#deck_url_qrcode").attr 'src', 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chld=|0&chl=' + encodeURIComponent(decks.deck().url())
         $("#deck_share_dialog").dialog('open')
 
       $('#deck_url_shorten').click ->
-        $('#deck_url_shorten').attr "disabled",true
+        $('#deck_url_shorten').attr "disabled", true
         $.ajax
           url: 'https://www.googleapis.com/urlshortener/v1/url'
           type: 'POST'
@@ -389,7 +395,12 @@ $(document).ready ->
         if ev.state
           deck.refresh ev.state, false
 
-      $('.main_div').bind 'drop', (ev)->
+      $('.main_div').bind 'dragover', (ev)->
+        $("#drop_upload_dialog").dialog('open')
+        false
+
+      $("#drop_upload_dialog").bind 'drop', (ev)->
+        $("#drop_upload_dialog").dialog('close')
         decks.upload event.dataTransfer.files
         false
 
@@ -400,4 +411,12 @@ $(document).ready ->
   $("#deck_share_dialog").dialog
     modal: true
     autoOpen: false
+
+  $("#drop_upload_dialog").dialog
+    dialogClass: 'drop_upload'
+    draggable: false
+    resizable: false
+    modal: true
+    autoOpen: false
+
   addthis.init()
\ No newline at end of file

assets/javascripts/decks.js

@@ -139,7 +139,7 @@
       });
     };
 
-    Card.fetch_by_id = function(cards_id, callback) {
+    Card.fetch_by_id = function(cards_id, callback, before, after) {
       var card_id,
         _this = this;
       cards_id = (function() {
@@ -154,6 +154,9 @@
         return _results;
       })();
       if (cards_id.length) {
+        if (before) {
+          before();
+        }
         return $.when($.getJSON("" + this.url + "?q=" + (JSON.stringify({
           _id: {
             $in: cards_id
@@ -164,7 +167,10 @@
           }
         })))).done(function(cards, langs) {
           _this.load(cards[0], langs[0]);
-          return callback();
+          callback();
+          if (after) {
+            return after();
+          }
         });
       } else {
         return callback();
@@ -512,6 +518,8 @@
       }).call(this), function() {
         _this.deck().sort();
         return _this.render();
+      }, function() {
+        return _this.html($('#loading_template').tmpl());
       });
     };
 
@@ -785,7 +793,7 @@
           return false;
         });
         $('#deck_share').click(function() {
-          $("#deck_url").val(deck.url());
+          $("#deck_url").val(decks.deck().url());
           $("#deck_url_qrcode").attr('src', 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chld=|0&chl=' + encodeURIComponent(decks.deck().url()));
           return $("#deck_share_dialog").dialog('open');
         });
@@ -812,7 +820,12 @@
             return deck.refresh(ev.state, false);
           }
         });
-        $('.main_div').bind('drop', function(ev) {
+        $('.main_div').bind('dragover', function(ev) {
+          $("#drop_upload_dialog").dialog('open');
+          return false;
+        });
+        $("#drop_upload_dialog").bind('drop', function(ev) {
+          $("#drop_upload_dialog").dialog('close');
           decks.upload(event.dataTransfer.files);
           return false;
         });
@@ -826,6 +839,13 @@
       modal: true,
       autoOpen: false
     });
+    $("#drop_upload_dialog").dialog({
+      dialogClass: 'drop_upload',
+      draggable: false,
+      resizable: false,
+      modal: true,
+      autoOpen: false
+    });
     return addthis.init();
   });
 

assets/stylesheets/decks.less

@@ -240,4 +240,6 @@ body{margin:0;padding:0;background:#eee;}
 .deck_title small {font-size: 10px}
 
 #deck_load{opacity:0;cursor:pointer;}
-.ui-sortable{padding:5px 0 5px 10px;}
\ No newline at end of file
+.ui-sortable{padding:5px 0 5px 10px;}
+
+.drop_upload .ui-dialog-titlebar{ display:none; }

decks/new/index.html

@@ -110,7 +110,9 @@
             </div>
         </fieldset>
 </script>
-
+<script id="loading_template"  type="text/x-jquery-tmpl">
+    <img class="load_img" src="/assets/images/decks/loading.gif" alt="" title=""/>
+</script>
 <script id="search_card_template" type="text/x-jquery-tmpl">
     {{tmpl({test: 'test'}) '#search_card_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
 </script>
@@ -420,7 +422,7 @@
 </div>
 </div>
 </div>
-<div id="deck_share_dialog" title="share">
+<div id="deck_share_dialog" title="share" style="display: none">
     <fieldset>
         <legend>URL</legend>
         <input id="deck_url" readonly="readonly"/><br/>
@@ -446,6 +448,10 @@
             src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-504b398d148616ce&async=1"></script>
     <!-- AddThis Button END -->
 </div>
+<div id="drop_upload_dialog">
+    上传
+</div>
+
 <script src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
 <script src="/vendor/javascripts/jQuery-URL-Parser.js"></script>
 <script src="/vendor/javascripts/jquery.tmpl.min.js"></script>