finished draft version of js for the tags

3 files changed, 86 insertions, 24 deletions

diff --git a/askbot/skins/default/media/js/live_search.js b/askbot/skins/default/media/js/live_search.js
index f75d6c40..3c7512f2 100644
--- a/askbot/skins/default/media/js/live_search.js
+++ b/askbot/skins/default/media/js/live_search.js
@@ -185,6 +185,7 @@ $(document).ready(function(){
 
     var render_tag = function(tag_name, linkable, deletable){
         var tag = new Tag();
+        tag.setName(tag_name);
         tag.setDeletable(deletable);
         tag.setLinkable(linkable);
         return tag.getElement().outerHTML();
@@ -378,9 +379,11 @@ $(document).ready(function(){
         $.each(search_tags, function(idx, element){
             var tag = new Tag();
             tag.decorate(element);
+            //todo: setDeleteHandler and setHandler
+            //must work after decorate & must have getName
             tag.setDeleteHandler(
                 function(){
-                    remove_search_tag(search_tag);
+                    remove_search_tag(tag.getName());
                 }
             );
         });
diff --git a/askbot/skins/default/media/js/tag_selector.js b/askbot/skins/default/media/js/tag_selector.js
index c273cbfb..954c7ab2 100644
--- a/askbot/skins/default/media/js/tag_selector.js
+++ b/askbot/skins/default/media/js/tag_selector.js
@@ -1,24 +1,30 @@
 //var interestingTags, ignoredTags, tags, $;
 var TagDetailBox = function(box_type){
+    WrappedElement.call(this);
     this.box_type = box_type;
-    this.__is_blank = true;
+    this._is_blank = true;
+    this._tags = new Array();
     this.wildcard = undefined;
 };
+inherits(TagDetailBox, WrappedElement);
 
 TagDetailBox.prototype.belongs_to = function(wildcard){
     return (this.wildcard === wildcard);
 };
 
 TagDetailBox.prototype.is_blank = function(){
-    return (this.__is_blank);
+    return this._is_blank;
 };
 
 TagDetailBox.prototype.clear = function(){
     if (this.is_blank()){
         return;
     }
-    this.__is_blank = true;
-    this.__tags.remove();
+    this._is_blank = true;
+    $.each(this._tags, function(idx, item){
+        item.dispose();
+    });
+    this._tags = new Array();
 };
 
 TagDetailBox.prototype.load_tags = function(wildcard, callback){
@@ -26,19 +32,25 @@ TagDetailBox.prototype.load_tags = function(wildcard, callback){
         type: 'POST',
         dataType: 'json',
         cache: false,
-        url: askbot['urls']['load_wildcard_tags'],
+        url: askbot['urls']['get_tags_by_wildcard'],
         data: { wildcard: wildcard },
         success: callback
     });
 };
 
-TagDetailBox.prototype.render = function(){
-};
-
 TagDetailBox.prototype.render_for = function(wildcard){
+    var me = this;
     this.load_tags(
         wildcard,
-        this.render
+        function(data, text_status, xhr){
+            me._tag_names = data['tag_names'];
+            $.each(me._tag_names, function(idx, name){
+                var tag = new Tag();
+                tag.setName(name);
+                me._tags.push(tag);
+                me._element.append(tag.getElement());
+            });
+        }
     );
 }
 
@@ -95,32 +107,47 @@ function pickedTags(){
         });
     };
 
+    var getTagList = function(reason){
+        var base_selector = '.marked-tags';
+        if (reason === 'good'){
+            var extra_selector = '.interesting';
+        } else {
+            var extra_selector = '.ignored';
+        }
+        return $(base_selector + extra_selector);
+    };
+
     var getWildcardTagDetailBox = function(reason){
         if (reason === 'good'){
-            return interestingTagDetailBox;
+            var tag_box = interestingTagDetailBox;
         } else {
-            return ignoredTagDetailBox;
+            var tag_box = ignoredTagDetailBox;
         }
     };
 
     var handleWildcardTagClick = function(tag_name, reason){
         var detail_box = getWildcardTagDetailBox(reason);
+        var tag_box = getTagList(reason);
         if (detail_box.is_blank()){
             detail_box.render_for(tag_name);
         } else if (detail_box.belongs_to(tag_name)){
-            detail_box.clear();
+            detail_box.clear();//toggle off
         } else {
-            detail_box.clear();
+            detail_box.clear();//redraw with new data
             detail_box.render_for(tag_name);
         }
+        if (!detail_box.inDocument()){
+            tag_box.after(detail_box.getElement());
+            detail_box.enterDocument();
+        }
     };
 
     var renderNewTags = function(
-                                    clean_tag_names,
-                                    reason,
-                                    to_target,
-                                    to_tag_container
-                                ){
+                        clean_tag_names,
+                        reason,
+                        to_target,
+                        to_tag_container
+                    ){
         $.each(clean_tag_names, function(idx, tag_name){
             var tag = new Tag();
             tag.setName(tag_name);
@@ -129,7 +156,7 @@ function pickedTags(){
             if (/\*$/.test(tag_name)){
                 tag.setLinkable(false);
                 tag.setHandler(function(){
-                    handleWildcardClick(tag_name, reason);
+                    handleWildcardTagClick(tag_name, reason);
                 });
             }
             tag.setDeleteHandler(function(){
diff --git a/askbot/skins/default/media/js/utils.js b/askbot/skins/default/media/js/utils.js
index 399915a5..66514156 100644
--- a/askbot/skins/default/media/js/utils.js
+++ b/askbot/skins/default/media/js/utils.js
@@ -114,6 +114,7 @@ var inherits = function(childCtor, parentCtor) {
 /* wrapper around jQuery object */
 var WrappedElement = function(){
     this._element = null;
+    this._in_document = false;
 };
 WrappedElement.prototype.setElement = function(element){
     this._element = element;
@@ -127,12 +128,22 @@ WrappedElement.prototype.getElement = function(){
     }
     return this._element;
 };
+WrappedElement.prototype.inDocument = function(){
+    return this._in_document;
+};
+WrappedElement.prototype.enterDocument = function(){
+    return this._in_document = true;
+};
+WrappedElement.prototype.hasElement = function(){
+    return (this._element !== null);
+};
 WrappedElement.prototype.makeElement = function(html_tag){
     //makes jQuery element with tags
     return $('<' + html_tag + '></' + html_tag + '>');
 };
 WrappedElement.prototype.dispose = function(){
     this._element.remove();
+    this._in_document = false;
 };
 
 var SimpleControl = function(){
@@ -144,7 +155,16 @@ inherits(SimpleControl, WrappedElement);
 
 SimpleControl.prototype.setHandler = function(handler){
     this._handler = handler;
+    if (this.hasElement()){
+        this.setHandlerInternal();
+    }
 };
+
+SimpleCortrol.prototype.setHandlerInternal = function(){
+    //default internal setHandler behavior
+    setupButtonEventHandlers(this._element, this._handler);
+};
+
 SimpleControl.prototype.setTitle = function(title){
     this._title = title;
 };
@@ -164,7 +184,7 @@ EditLink.prototype.decorate = function(element){
     this._element = element;
     this._element.attr('title', $.i18n._('click to edit this comment'));
     this._element.html($.i18n._('edit'));
-    setupButtonEventHandlers(this._element, this._handler);
+    this.setHandlerInternal();
 };
 
 var DeleteIcon = function(title){
@@ -177,11 +197,16 @@ DeleteIcon.prototype.decorate = function(element){
     this._element = element;
     this._element.attr('class', 'delete-icon');
     this._element.attr('title', this._title);
+    this.setHandlerInternal();
+};
+
+DeleteIcon.prototype.setHandlerInternal = function(){
     setupButtonEventHandlers(this._element, this._handler);
 };
 
 DeleteIcon.prototype.createDom = function(){
-    this.decorate($('<span />'));
+    this._element = this.makeElement('span');
+    this.decorate(this._element);
 };
 
 var Tag = function(){
@@ -224,9 +249,16 @@ Tag.prototype.setUrlParams = function(url_params){
     this._url_params = url_params;
 };
 
+Tag.prototype.setHandlerInternal = function(){
+    setupButtonEventHandlers(this._element.find('.tag'), this._handler);
+};
+
 /* delete handler will be specific to the task */
 Tag.prototype.setDeleteHandler = function(delete_handler){
     this._delete_handler = delete_handler;
+    if (this.hasElement() && this.isDeletable()){
+        this._delete_icon.setHandler(delete_handler);
+    }
 };
 
 Tag.prototype.getDeleteHandler = function(){
@@ -244,7 +276,7 @@ Tag.prototype.decorate = function(element){
         if (this._delete_icon_title != null){
             this._delete_icon.setTitle(this._delete_icon_title);
         }
-        this._delete_icon.setHandler(this.getDeleteHandler());
+        this._delete_icon.setDeleteHandler(this.getDeleteHandler());
         DeleteIcon.decorate(this._element.find('.delete-icon'));
     }
     this._inner_element = this._element.find('.tag');
@@ -252,7 +284,7 @@ Tag.prototype.decorate = function(element){
         this._inner_element.attr('title', this._title);
     }
     if (this._handler !== null){
-        setupButtonEventHandlers(this._element.find('.tag'), this._handler);
+        this.setHandlerInternal();
     }
 };