Skip to content
Browse files

first version of the multiple image / page maybe buggy

  • Loading branch information...
1 parent 5a4da79 commit 6c42c4e53170674bdc4790853aac5e4db2743fda @djpate djpate committed Jun 1, 2011
Showing with 71 additions and 50 deletions.
  1. +1 −0 index.html
  2. +11 −1 js/jquery.tag.min.js
  3. +59 −49 source/jquery.tag.js
View
1 index.html
@@ -15,6 +15,7 @@
<li><a href="demo/4.html">Autocomplete label</a></li>
<li><a href="demo/5.html">Set default tags on initialization</a></li>
<li><a href="demo/6.html">Wow it's cool ! But how the heck do I put this in my db ?</a></li>
+ <li><a href="demo/7.html">Multiple image</a></li>
</ul>
</div>
<strong>If you like it Tweet it !</strong>
View
12 js/jquery.tag.min.js
@@ -1 +1,11 @@
-(function(a){a.extend(a.fn,{tag:function(b){var c={minWidth:100,minHeight:100,defaultWidth:100,defaultHeight:100,maxHeight:null,maxWidth:null,save:null,remove:null,canTag:true,canDelete:true,autoShowDrag:false,autoComplete:null,defaultTags:null,clickToTag:true,draggable:true,resizable:true,showTag:"hover",showLabels:true,debug:false};var b=a.extend(c,b);return this.each(function(){var d=a(this);d.data("options",b);a(window).load(function(){d.wrap('<div class="jTagContainer" />');d.wrap('<div class="jTagArea" />');a("<div class='jTagLabels'><div style='clear:both'></div></div>").insertAfter(a(".jTagArea"));a('<div class="jTagOverlay"></div>').insertBefore(d);d.parent().css("backgroundImage","url("+d.attr("src")+")");d.parent().width(d.width());d.parent().height(d.height());d.parent().parent().width(d.width());d.hide();if(b.autoShowDrag){d.showDrag()}a(".jTagTag").live("mouseenter",function(){if(a(".jTagDrag").length==0){a(this).css("opacity",1);a(".jTagDeleteTag",this).show();a(this).find("span").show();d.disableClickToTag()}});a(".jTagTag").live("mouseleave",function(){if(a(".jTagDrag").length==0){if(b.showTag=="hover"){a(this).css("opacity",0);a(".jTagDeleteTag",this).hide();a(this).find("span").hide()}d.enableClickToTag()}});if(b.showLabels&&b.showTag!="always"){a(".jTagLabels label").live("mouseenter",function(){a("#"+a(this).attr("rel")).css("opacity",1).find("span").show();a(".jTagDeleteTag").show()});a(".jTagLabels label").live("mouseleave",function(){a("#"+a(this).attr("rel")).css("opacity",0).find("span").hide();a(".jTagDeleteTag").hide()})}if(b.canDelete){a(".jTagDeleteTag").live("click",function(){if(b.remove){b.remove(a(this).parent().parent().getId())}if(b.showLabels){a(".jTagLabels").find('label[rel="'+a(this).parent().parent().attr("id")+'"]').remove()}a(this).parent().parent().remove();d.enableClickToTag()})}if(b.defaultTags){a.each(b.defaultTags,function(e,f){d.addTag(f.width,f.height,f.top,f.left,f.label,f.id)})}d.enableClickToTag()})})},hideDrag:function(){obj=a(this);var b=obj.data("options");a(".jTagOverlay").removeClass("jTagPngOverlay");a(".jTagDrag").remove();if(b.showTag=="always"){a(".jTagTag").show()}obj.enableClickToTag()},showDrag:function(f){obj=a(this);obj.disableClickToTag();var c=obj.data("options");var b=function(){border=parseInt(a(".jTagDrag").css("borderTopWidth"));left_pos=parseInt(a(".jTagDrag").attr("offsetLeft"))+border;top_pos=parseInt(a(".jTagDrag").attr("offsetTop"))+border;return"-"+left_pos+"px -"+top_pos+"px"};if(a(".jTagDrag").length==1){return}if(!c.canTag){return}if(c.showTag=="always"){a(".jTagTag").hide()}a('<div style="width:'+c.defaultWidth+"px;height:"+c.defaultHeight+'px"class="jTagDrag"><div class="jTagSave"><div class="jTagInput"><input type="text" id="jTagLabel"></div><div class="jTagSaveClose"></div><div class="jTagSaveBtn"></div><div style="clear:both"></div></div>').appendTo(a(".jTagOverlay"));a(".jTagOverlay").addClass("jTagPngOverlay");a(".jTagDrag").css("backgroundImage","url("+obj.attr("src")+")");if(f){function d(e){var g=curtop=0;if(e.offsetParent){do{g+=e.offsetLeft;curtop+=e.offsetTop}while(e=e.offsetParent);return[g,curtop]}}pos=d(obj.parent()[0]);x=Math.max(0,f.pageX-pos[0]-(c.defaultWidth/2));y=Math.max(0,f.pageY-pos[1]-(c.defaultHeight/2));if(x+a(".jTagDrag").width()>obj.parent().width()){x=obj.parent().width()-a(".jTagDrag").width()-2}if(y+a(".jTagDrag").height()>obj.parent().height()){y=obj.parent().height()-a(".jTagDrag").height()-2}}else{x=0;y=0}a(".jTagDrag").css("top",y).css("left",x);if(c.autoComplete){a("#jTagLabel").autocomplete({source:c.autoComplete})}a(".jTagSaveBtn").click(function(){label=a("#jTagLabel").val();if(label==""){alert("The label cannot be empty");return}height=a(this).parent().parent().height();width=a(this).parent().parent().width();top_pos=a(this).parent().parent().attr("offsetTop");left=a(this).parent().parent().attr("offsetLeft");tagobj=obj.addTag(width,height,top_pos,left,label);if(c.save){c.save(width,height,top_pos,left,label,tagobj)}});a(".jTagSaveClose").click(function(){obj.hideDrag()});if(c.resizable){a(".jTagDrag").resizable({containment:obj.parent(),minWidth:c.minWidth,minHeight:c.minHeight,maxWidht:c.maxWidth,maxHeight:c.maxHeight,resize:function(){a(".jTagDrag").css({backgroundPosition:b()})},stop:function(){a(".jTagDrag").css({backgroundPosition:b()})}})}if(c.draggable){a(".jTagDrag").draggable({containment:obj.parent(),drag:function(){a(".jTagDrag").css({backgroundPosition:b()})},stop:function(){a(".jTagDrag").css({backgroundPosition:b()})}})}a(".jTagDrag").css({backgroundPosition:b()})},addTag:function(d,f,e,g,b,h){obj=a(this);var c=obj.data("options");tag=a('<div class="jTagTag" id="tag'+(a(".jTagTag").length+1)+'"style="width:'+d+"px;height:"+f+"px;top:"+e+"px;left:"+g+'px;"><div style="width:100%;height:100%"><div class="jTagDeleteTag"></div><span>'+b+"</span></div></div>").appendTo(a(".jTagOverlay"));if(h){tag.setId(h)}if(c.canDelete){obj.parent().find(".jTagDeleteTag").show()}if(c.showTag=="always"){a(".jTagTag").css("opacity",1)}if(c.showLabels){a("<label rel='tag"+a(".jTagTag").length+"'>"+b+"</label>").insertBefore(a(".jTagLabels div:last"))}obj.hideDrag();return tag},setId:function(b){if(a(this).hasClass("jTagTag")){a(this).data("tagid",b)}else{alert("Wrong object")}},getId:function(b){if(a(this).hasClass("jTagTag")){return a(this).data("tagid")}else{alert("Wrong object")}},enableClickToTag:function(){obj=a(this);var b=obj.data("options");if(b.clickToTag){obj.parent().mousedown(function(c){obj.showDrag(c);obj.parent().unbind("mousedown")})}},disableClickToTag:function(){obj=a(this);var b=obj.data("options");if(b.clickToTag){obj.parent().unbind("mousedown")}}})})(jQuery);
+var g=null;
+(function(a){a.extend(a.J,{P:function(b){b=a.extend({minWidth:100,minHeight:100,o:100,m:100,maxHeight:g,maxWidth:g,save:g,remove:g,v:!0,k:!0,u:!1,j:g,n:g,l:!0,draggable:!0,r:!0,d:"hover",h:!0,H:!1},b);return this.z(function(){var c=a(this);c.data("options",b);a(window).load(function(){c.F('<div class="jTagContainer" />');c.F('<div class="jTagArea" />');a("<div class='jTagLabels'><div style='clear:both'></div></div>").K(c.parent());a('<div class="jTagOverlay"></div>').insertBefore(c);container=c.parent().parent();
+overlay=c.g();c.parent().a("backgroundImage","url("+c.b("src")+")");c.parent().width(c.width());c.parent().height(c.height());c.parent().parent().width(c.width());c.c();b.u&&c.s();container.e(".jTagTag","mouseenter",function(){a(".jTagDrag",container).length==0&&(a(this).a("opacity",1),a(".jTagDeleteTag",this).show(),a(this).find("span").show(),c.p())});container.e(".jTagTag","mouseleave",function(){a(".jTagDrag",container).length==0&&(b.d=="hover"&&(a(this).a("opacity",0),a(".jTagDeleteTag",this).c(),
+a(this).find("span").c()),c.f())});b.h&&b.d!="always"&&(container.e(".jTagLabels label","mouseenter",function(){a("#"+a(this).b("rel"),container).a("opacity",1).find("span").show();a(".jTagDeleteTag",container).show()}),container.e(".jTagLabels label","mouseleave",function(){a("#"+a(this).b("rel"),container).a("opacity",0).find("span").c();a(".jTagDeleteTag",container).c()}));b.k&&container.e(".jTagDeleteTag","click",function(){b.remove&&b.remove(a(this).parent().parent().A());b.h&&a(".jTagLabels",
+container).find('label[rel="'+a(this).parent().parent().b("id")+'"]').remove();a(this).parent().parent().remove();c.f()});b.n&&a.z(b.n,function(a,b){c.i(b.width,b.height,b.top,b.left,b.label,b.id)});c.f()})})},q:function(){var b=a(this),c=b.data("options");b.g().N("jTagPngOverlay");b.parent().parent().find(".jTagDrag").remove();c.d=="always"&&b.parent().parent().find(".jTagTag").show();b.f()},s:function(b){function c(b){b=a(".jTagDrag",b);border=parseInt(b.a("borderTopWidth"));left_pos=parseInt(b.b("offsetLeft"))+
+border;top_pos=parseInt(b.b("offsetTop"))+border;return"-"+left_pos+"px -"+top_pos+"px"}var e=a(this),h=e.parent().parent(),f=e.g();e.p();var d=e.data("options");a(".jTagDrag",f).length!=1&&d.v&&(d.d=="always"&&a(".jTagTag",f).c(),a('<div style="width:'+d.o+"px;height:"+d.m+'px"class="jTagDrag"><div class="jTagSave"><div class="jTagInput"><input type="text" id="jTagLabel"></div><div class="jTagSaveClose"></div><div class="jTagSaveBtn"></div><div style="clear:both"></div></div>').t(f),f.G("jTagPngOverlay"),
+jtagdrag=a(".jTagDrag",f),jtagdrag.a("backgroundImage","url("+e.b("src")+")"),b?(pos=function(a){var b=curtop=0;if(a.offsetParent){do b+=a.offsetLeft,curtop+=a.offsetTop;while(a=a.offsetParent);return[b,curtop]}}(e.parent()[0]),x=Math.max(0,b.pageX-pos[0]-d.o/2),y=Math.max(0,b.pageY-pos[1]-d.m/2),x+jtagdrag.width()>e.parent().width()&&(x=e.parent().width()-jtagdrag.width()-2),y+jtagdrag.height()>e.parent().height()&&(y=e.parent().height()-jtagdrag.height()-2)):y=x=0,jtagdrag.a("top",y).a("left",x),
+d.j&&a("#jTagLabel",h).autocomplete({source:d.j}),a(".jTagSaveBtn",h).click(function(){label=a("#jTagLabel",h).Q();label==""?alert("The label cannot be empty"):(height=a(this).parent().parent().height(),width=a(this).parent().parent().width(),top_pos=a(this).parent().parent().b("offsetTop"),left=a(this).parent().parent().b("offsetLeft"),tagobj=e.i(width,height,top_pos,left,label),d.save&&d.save(width,height,top_pos,left,label,tagobj))}),a(".jTagSaveClose",h).click(function(){e.q()}),d.r&&jtagdrag.r({w:e.parent(),
+minWidth:d.minWidth,minHeight:d.minHeight,L:d.maxWidth,maxHeight:d.maxHeight,O:function(){jtagdrag.a({backgroundPosition:c(f)})},stop:function(){jtagdrag.a({backgroundPosition:c(f)})}}),d.draggable&&jtagdrag.draggable({w:e.parent(),I:function(){jtagdrag.a({backgroundPosition:c(f)})},stop:function(){jtagdrag.a({backgroundPosition:c(f)})}}),jtagdrag.a({backgroundPosition:c(f)}))},i:function(b,c,e,h,f,d){var i=a(this),j=i.data("options"),k=a(".jTagTag").length+1;tag=a('<div class="jTagTag" id="tag'+
+k+'"style="width:'+b+"px;height:"+c+"px;top:"+e+"px;left:"+h+'px;"><div style="width:100%;height:100%"><div class="jTagDeleteTag"></div><span>'+f+"</span></div></div>").t(i.g());d&&tag.C(d);j.k&&i.parent().find(".jTagDeleteTag").show();j.d=="always"&&a(".jTagTag").a("opacity",1);j.h&&a("<label rel='tag"+k+"'>"+f+"</label>").insertBefore(a(".jTagLabels div:last"));i.q();return tag},C:function(b){a(this).B("jTagTag")?a(this).data("tagid",b):alert("Wrong object")},A:function(){if(a(this).B("jTagTag"))return a(this).data("tagid");
+else alert("Wrong object")},f:function(){var b=a(this);b.data("options").l&&b.parent().M(function(a){b.s(a);b.parent().D("mousedown")})},p:function(){var b=a(this);b.data("options").l&&b.parent().D("mousedown")}})})(jQuery);
View
108 source/jquery.tag.js
@@ -52,10 +52,13 @@
obj.wrap('<div class="jTagArea" />');
- $("<div class='jTagLabels'><div style='clear:both'></div></div>").insertAfter($(".jTagArea"));
+ $("<div class='jTagLabels'><div style='clear:both'></div></div>").insertAfter(obj.parent());
$('<div class="jTagOverlay"></div>').insertBefore(obj);
+ container = obj.parent().parent();
+ overlay = obj.prev();
+
obj.parent().css("backgroundImage","url("+obj.attr('src')+")");
obj.parent().width(obj.width());
@@ -69,17 +72,17 @@
obj.showDrag();
}
- $(".jTagTag").live('mouseenter',function(){
- if($(".jTagDrag").length==0){
+ container.delegate('.jTagTag','mouseenter',function(){
+ if($(".jTagDrag",container).length==0){
$(this).css("opacity",1);
$(".jTagDeleteTag",this).show();
$(this).find("span").show();
obj.disableClickToTag();
}
});
- $(".jTagTag").live('mouseleave',function(){
- if($(".jTagDrag").length==0){
+ container.delegate('.jTagTag','mouseleave',function(){
+ if($(".jTagDrag",container).length==0){
if(options.showTag == 'hover'){
$(this).css("opacity",0);
$(".jTagDeleteTag",this).hide();
@@ -91,22 +94,22 @@
if(options.showLabels && options.showTag != 'always'){
- $(".jTagLabels label").live('mouseenter',function(){
- $("#"+$(this).attr('rel')).css('opacity',1).find("span").show();
- $(".jTagDeleteTag").show();
+ container.delegate('.jTagLabels label','mouseenter',function(){
+ $("#"+$(this).attr('rel'),container).css('opacity',1).find("span").show();
+ $(".jTagDeleteTag",container).show();
});
- $(".jTagLabels label").live('mouseleave',function(){
- $("#"+$(this).attr('rel')).css('opacity',0).find("span").hide();
- $(".jTagDeleteTag").hide();
+ container.delegate('.jTagLabels label','mouseleave',function(){
+ $("#"+$(this).attr('rel'),container).css('opacity',0).find("span").hide();
+ $(".jTagDeleteTag",container).hide();
});
}
if(options.canDelete){
- $('.jTagDeleteTag').live('click',function(){
+ container.delegate('.jTagDeleteTag','click',function(){
/* launch callback */
if(options.remove){
@@ -115,7 +118,7 @@
/* remove the label */
if(options.showLabels){
- $(".jTagLabels").find('label[rel="'+$(this).parent().parent().attr('id')+'"]').remove();
+ $(".jTagLabels",container).find('label[rel="'+$(this).parent().parent().attr('id')+'"]').remove();
}
/* remove the actual tag from dom */
@@ -140,37 +143,41 @@
});
},
hideDrag: function(){
- obj = $(this);
+ var obj = $(this);
var options = obj.data('options');
- $(".jTagOverlay").removeClass("jTagPngOverlay");
+ obj.prev().removeClass("jTagPngOverlay");
- $(".jTagDrag").remove();
+ obj.parent().parent().find(".jTagDrag").remove();
if(options.showTag == 'always'){
- $(".jTagTag").show();
+ obj.parent().parent().find(".jTagTag").show();
}
obj.enableClickToTag();
},
showDrag: function(e){
- obj = $(this);
+ var obj = $(this);
+
+ var container = obj.parent().parent();
+ var overlay = obj.prev();
obj.disableClickToTag();
var options = obj.data('options');
- var position = function(){
- border = parseInt($(".jTagDrag").css('borderTopWidth'));
- left_pos = parseInt($(".jTagDrag").attr('offsetLeft')) + border;
- top_pos = parseInt($(".jTagDrag").attr('offsetTop')) + border;
+ var position = function(context){
+ var jtagdrag = $(".jTagDrag",context);
+ border = parseInt(jtagdrag.css('borderTopWidth'));
+ left_pos = parseInt(jtagdrag.attr('offsetLeft')) + border;
+ top_pos = parseInt(jtagdrag.attr('offsetTop')) + border;
return "-"+left_pos+"px -"+top_pos+"px";
}
- if($(".jTagDrag").length==1){
+ if($(".jTagDrag",overlay).length==1){
return;
}
@@ -179,14 +186,16 @@
}
if(options.showTag == 'always'){
- $(".jTagTag").hide();
+ $(".jTagTag",overlay).hide();
}
- $('<div style="width:'+options.defaultWidth+'px;height:'+options.defaultHeight+'px"class="jTagDrag"><div class="jTagSave"><div class="jTagInput"><input type="text" id="jTagLabel"></div><div class="jTagSaveClose"></div><div class="jTagSaveBtn"></div><div style="clear:both"></div></div>').appendTo($(".jTagOverlay"));
+ $('<div style="width:'+options.defaultWidth+'px;height:'+options.defaultHeight+'px"class="jTagDrag"><div class="jTagSave"><div class="jTagInput"><input type="text" id="jTagLabel"></div><div class="jTagSaveClose"></div><div class="jTagSaveBtn"></div><div style="clear:both"></div></div>').appendTo(overlay);
+
+ overlay.addClass("jTagPngOverlay");
- $(".jTagOverlay").addClass("jTagPngOverlay");
+ jtagdrag = $(".jTagDrag",overlay);
- $(".jTagDrag").css("backgroundImage","url("+obj.attr('src')+")");
+ jtagdrag.css("backgroundImage","url("+obj.attr('src')+")");
if(e){
@@ -207,14 +216,14 @@
x = Math.max(0,e.pageX - pos[0] - (options.defaultWidth / 2));
y = Math.max(0,e.pageY - pos[1] - (options.defaultHeight / 2));
- if(x + $(".jTagDrag").width() > obj.parent().width()){
- x = obj.parent().width() - $(".jTagDrag").width() - 2;
+ if(x + jtagdrag.width() > obj.parent().width()){
+ x = obj.parent().width() - jtagdrag.width() - 2;
}
- if(y + $(".jTagDrag").height() > obj.parent().height()){
- y = obj.parent().height() - $(".jTagDrag").height() - 2;
+ if(y + jtagdrag.height() > obj.parent().height()){
+ y = obj.parent().height() - jtagdrag.height() - 2;
}
} else {
@@ -224,19 +233,19 @@
}
- $(".jTagDrag").css("top",y)
+ jtagdrag.css("top",y)
.css("left",x);
if(options.autoComplete){
- $("#jTagLabel").autocomplete({
+ $("#jTagLabel",container).autocomplete({
source: options.autoComplete
});
}
- $(".jTagSaveBtn").click(function(){
+ $(".jTagSaveBtn",container).click(function(){
- label = $("#jTagLabel").val();
+ label = $("#jTagLabel",container).val();
if(label==''){
alert('The label cannot be empty');
@@ -256,52 +265,53 @@
});
- $(".jTagSaveClose").click(function(){
+ $(".jTagSaveClose",container).click(function(){
obj.hideDrag();
});
if(options.resizable){
- $(".jTagDrag").resizable({
+ jtagdrag.resizable({
containment: obj.parent(),
minWidth: options.minWidth,
minHeight: options.minHeight,
maxWidht: options.maxWidth,
maxHeight: options.maxHeight,
resize: function(){
- $(".jTagDrag").css({backgroundPosition: position()});
+ jtagdrag.css({backgroundPosition: position(overlay)});
},
stop: function(){
- $(".jTagDrag").css({backgroundPosition: position()});
+ jtagdrag.css({backgroundPosition: position(overlay)});
}
});
}
if(options.draggable){
- $(".jTagDrag").draggable({
+ jtagdrag.draggable({
containment: obj.parent(),
drag: function(){
- $(".jTagDrag").css({backgroundPosition: position()});
+ jtagdrag.css({backgroundPosition: position(overlay)});
},
stop: function(){
- $(".jTagDrag").css({backgroundPosition: position()});
+ jtagdrag.css({backgroundPosition: position(overlay)});
}
});
}
- $(".jTagDrag").css({backgroundPosition: position()});
+ jtagdrag.css({backgroundPosition: position(overlay)});
},
addTag: function(width,height,top_pos,left,label,id){
- obj = $(this);
+ var obj = $(this);
var options = obj.data('options');
+ var count = $(".jTagTag").length+1;
- tag = $('<div class="jTagTag" id="tag'+($(".jTagTag").length+1)+'"style="width:'+width+'px;height:'+height+'px;top:'+top_pos+'px;left:'+left+'px;"><div style="width:100%;height:100%"><div class="jTagDeleteTag"></div><span>'+label+'</span></div></div>')
- .appendTo($(".jTagOverlay"));
+ tag = $('<div class="jTagTag" id="tag'+count+'"style="width:'+width+'px;height:'+height+'px;top:'+top_pos+'px;left:'+left+'px;"><div style="width:100%;height:100%"><div class="jTagDeleteTag"></div><span>'+label+'</span></div></div>')
+ .appendTo(obj.prev());
if(id){
tag.setId(id);
@@ -316,7 +326,7 @@
}
if(options.showLabels){
- $("<label rel='tag"+$(".jTagTag").length+"'>"+label+"</label>").insertBefore($(".jTagLabels div:last"));
+ $("<label rel='tag"+count+"'>"+label+"</label>").insertBefore($(".jTagLabels div:last"));
}
obj.hideDrag();
@@ -340,7 +350,7 @@
},
enableClickToTag: function(){
- obj = $(this);
+ var obj = $(this);
var options = obj.data('options');
if(options.clickToTag){
@@ -353,7 +363,7 @@
},
disableClickToTag: function(){
- obj = $(this);
+ var obj = $(this);
var options = obj.data('options');
if(options.clickToTag){

0 comments on commit 6c42c4e

Please sign in to comment.
Something went wrong with that request. Please try again.