Changeset 23361 for extensions/UserCollections/template/thumbnails_css_js.tpl

Timestamp:

Jun 19, 2013, 2:43:41 PM (11 years ago)

Author:

mistic100

Message:

all collections are "active", display a menu when adding to a collection

File:

• extensions/UserCollections/template/thumbnails_css_js.tpl (modified) (2 diffs)

extensions/UserCollections/template/thumbnails_css_js.tpl

@@ -1 @@
-{html_style}
-#thumbnails li {ldelim} position:relative !important;display:inline-block; }
-li .addCollection {ldelim} width:100%;height:16px;display:none;position:absolute;top:0;background:rgba(0,0,0,0.8);padding:2px;border-radius:2px;font-size:10px;z-index:100 !important;color:#eee;white-space:nowrap; }
-li:hover .addCollection {ldelim} display:block !important; }
-{/html_style}
-
-{if not $NO_AJAX}
+{combine_css path=$USER_COLLEC_PATH|@cat:"template/style_thumbnails.css"}
+
+{* <!-- all pages but collection edit page --> *}
+{if not $UC_IN_EDIT}
 {footer_script require='jquery'}
-jQuery(".addCollection").click(function() {ldelim}
-  var $trigger = jQuery(this);
-  var toggle_id = $trigger.data("id");
-  var method = $trigger.data("stat");
-  
-  if (method != "add" && method != "remove") {ldelim}
-    $trigger.html("{'Un unknown error occured'|@translate}");
+var $cdm = jQuery("#collectionsDropdown");
+
+{if not $IN_PICTURE}
+$cdm.on("mouseleave", function() {ldelim}
+  $cdm.hide();
+});
+{/if}
+
+// click on "create collection" button
+$cdm.find("a.new").on("click", function(event) {ldelim}
+  jQuery(this).hide().next().show().focus();
+  event.stopPropagation();
+  return false;
+});
+
+// events on "new collection" input
+$cdm.find("input.new").on({ldelim}
+  // ENTER pressed
+  "keyup": function(event) {ldelim}
+    if (event.which != 13) return;
+    
+    jQuery(this).hide().prev().show();
+    var name = jQuery(this).val();
+    jQuery(this).val("{'Name'|@translate}");
+    
+    if (name == "") return;
+    
+    jQuery.ajax({ldelim}
+      type: "GET",
+      dataType: "json",
+      url: "{$ROOT_URL}ws.php",
+      data: {ldelim}
+        format: "json",
+        method: "pwg.collections.create",
+        name: name,
+        active: 1,
+      },
+      success: function(data) {ldelim}
+        if (data.stat == 'ok') {ldelim}
+          var col = data.result;
+          var html = '<span>&#9733;</span> <a class="add" data-id="'+ col.id +'">'+ col.name +'</a> '
+            +'<span class="menuInfoCat">[<span class="nbImagesCollec-'+ col.id +'">'+ col.nb_images +'</span>]</span> '
+            +'<a class="remove" data-id="'+ col.id +'">{'(remove)'|@translate}</a>'
+            +'<br>';
+          
+          $cdm.children(".switchBoxFooter").before(html);
+          $cdm.children(".noCollecMsg").remove();
+        }
+        else {ldelim}
+          alert(data.message);
+        }
+      },
+      error: function() {ldelim}
+        alert("{'Un unknown error occured'|@translate}");
+      }
+    });
+    
     return false;
+  },
+  // prevent click propagation
+  "click": function(event) {ldelim}
+    event.stopPropagation();
+  },
+  // remove help on focus
+  "focus": function() {ldelim}
+    if (jQuery(this).val() == "{'Name'|@translate}") jQuery(this).val("");
+  },
+  // restore help on blur
+  "blur" : function() {ldelim}
+    if (jQuery(this).val() == "") jQuery(this).val("{'Name'|@translate}");
   }
+});
+
+// add and remove links (delegate for new collections)
+$cdm.on("click", ".add, .remove", function() {ldelim}
+  var img_id = $cdm.data("img_id");
+  var col_id = jQuery(this).data("id");
+  var method = jQuery(this).hasClass("add") ? "pwg.collections.addImages" : "pwg.collections.removeImages";
   
   jQuery.ajax({ldelim}
@@ -21 +87 @@
     dataType: "json",
     url: "{$ROOT_URL}ws.php",
-    data: {ldelim} "format": "json", "method": "pwg.collections."+method+"Images", "col_id": {$AJAX_COL_ID}, "image_ids": toggle_id },
+    data: {ldelim}
+      format: "json",
+      method: method,
+      col_id: col_id,
+      image_ids: img_id
+    },
     success: function(data) {ldelim}
-      if (data['stat'] == 'ok') {ldelim}
-        if (method == "add") {ldelim}
-          $trigger.children(".uc_remove").show();
-          $trigger.children(".uc_add").hide();
-          $trigger.data("stat", "remove");
-        }
-        else if (method == "remove") {ldelim}
-        {if $UC_IN_EDIT}
-          $trigger.parent("li").hide("fast", function() {ldelim} $(this).remove() });
-          if (typeof batchdown_count != 'undefined') batchdown_count-=1;
-        {else}
-          $trigger.children(".uc_remove").hide();
-          $trigger.children(".uc_add").show();
-          $trigger.data("stat", "add");
-        {/if}
-        }
+      if (data.stat == 'ok') {ldelim}
+        // update col counters
+        jQuery(".nbImagesCollec-"+col_id).html(data.result.nb_images);
         
-        jQuery(".nbImagesCollec").html(data['result']['nb_images']);
+        // update item datas
+        var $target = jQuery(".addCollection[data-id='"+ img_id +"']");
+        var col_ids = $target.data("cols");
+        if (method == "pwg.collections.addImages" && col_ids.indexOf(col_id) == -1)
+          col_ids[ col_ids.length ] = col_id;
+        else
+          col_ids.splice(col_ids.indexOf(col_id), 1);
+        $target.data("col", col_ids);
       }
       else {ldelim}
-        $trigger.html("{'Un unknown error occured'|@translate}");
+        alert(data.message);
       }
     },
     error: function() {ldelim}
-      $trigger.html("{'Un unknown error occured'|@translate}");
-    }
-  });
-  
+      alert("{'Un unknown error occured'|@translate}");
+    }
+  });
+  
+  $cdm.hide();
+  return false;
+});
+
+// main button, open the menu
+jQuery(".addCollection").on("click", function(event) {ldelim}
+  var img_id = jQuery(this).data("id");
+  var col_ids = jQuery(this).data("cols");
+  
+  $cdm.data("img_id", img_id);
+  
+  $cdm.children(".add").each(function() {ldelim}   
+    if (col_ids.indexOf($(this).data("id")) != -1) {ldelim}
+      $(this).css("font-weight", "bold").next().next().show();
+    }
+    else {ldelim}
+      $(this).css("font-weight", "normal").next().next().hide();
+    }
+  });
+  
+  {if not $IN_PICTURE}
+  $cdm.css({ldelim}
+    "top": event.pageY-5-$(window).scrollTop(),
+    "left": Math.min(event.pageX-jQuery(window).scrollLeft()-20, jQuery(window).width()-$cdm.outerWidth(true)-5) 
+  });
+  $cdm.show();
+  {/if}
+  
+  return false;
+});
+
+// try to respect theme colors
+$cdm.children(".switchBoxFooter").css("border-top-color", $cdm.children(".switchBoxTitle").css("border-bottom-color"));
+{/footer_script}
+
+<div id="collectionsDropdown" class="switchBox">
+  <div class="switchBoxTitle">{'Collections'|@translate}</div>
+  
+  {foreach from=$COLLECTIONS item=col}
+    <span>&#9733;</span> <a class="add" data-id="{$col.id}">{$col.name}</a>
+    <span class="menuInfoCat">[<span class="nbImagesCollec-{$col.id}">{$col.nb_images}</span>]</span>
+    <a class="remove" data-id="{$col.id}">{'(remove)'|@translate}</a>
+    <br>
+  {foreachelse}
+    <span class="noCollecMsg">{'You have no collection'|@translate}</span>
+  {/foreach}
+  
+  <div class="switchBoxFooter">
+  <span>&#10010;</span> <a class="new">{'Create a new collection'|@translate}</a>
+  <input class="new" value="{'Name'|@translate}" size="25"/>
+  </div>
+</div>
+
+{* <!-- collection edit page --> *}
+{else}
+{footer_script require='jquery'}
+jQuery(".addCollection").on("click", function(event) {ldelim}
+  var $trigger = jQuery(this);
+  var img_id = jQuery(this).data("id");
+  var col_id = {$collection.ID};
+  
+  jQuery.ajax({ldelim}
+    type: "GET",
+    dataType: "json",
+    url: "{$ROOT_URL}ws.php",
+    data: {ldelim}
+      format: "json",
+      method: "pwg.collections.removeImages",
+      col_id: col_id,
+      image_ids: img_id
+    },
+    success: function(data) {ldelim}
+      if (data.stat == 'ok') {ldelim}
+        $trigger.parent("li").hide("fast", function() {ldelim}
+          jQuery(this).remove();
+          if (typeof GThumb != "undefined") GThumb.build();
+        });
+        
+        jQuery(".nbImagesCollec-"+col_id).html(data.result.nb_images);
+        if (typeof batchdown_count != 'undefined') batchdown_count = data.result.nb_images;
+      }
+      else {ldelim}
+        alert(data.message);
+      }
+    },
+    error: function() {ldelim}
+      alert("{'Un unknown error occured'|@translate}");
+    }
+  });
+  
+  // not working, the event is fired twice
+  event.stopPropagation();
+  event.preventDefault();
   return false;
 });