Changeset 365

Timestamp:

Apr 21, 2010, 12:30:18 PM (13 years ago)

Author:

duh

Message:

• refactored JavaScript? and CSS to be more logical and general

Location:

trunk/web-app

Files:

• css/default_style.css (modified) (1 diff)
• js/SelectAddMore.js (modified) (5 diffs)
• js/wizard.js (modified) (1 diff)

trunk/web-app/css/default_style.css

@@ -252 +252 @@
 
 /* START :: special select option styles */
-option.addTerm {
+option.addMore {
     background: url(../images/icons/famfamfam/add.png) no-repeat left top;
     background-color: #333;

trunk/web-app/js/SelectAddMore.js

@@ -17 +17 @@
  * </select>
  * ...
- * new SelectAddMore().init('cars','http://my.site/addCars','myList',function(scope) { alert('cars closed : '+scope);});
+ * new SelectAddMore().init({
+ *      'rel'       : 'cars',
+ *      'url'       : 'http://my.site/modifyCars',
+ *      'label'     : 'modify cars...',
+ *      'class'     : 'myCSSClass',
+ *      'onClose'   : function(scope) {
+ *          alert('cars closed : ' + scope );
+ *      }
+ * });
  *
  * @author      Jeroen Wesbeek
@@ -32 +40 @@
 }
 SelectAddMore.prototype = {
-    rel: 'myRel',
-    url: 'http://www.youtube.com/watch?v=2WNrx2jq184',
-    vars: 'myVar',
-    width: 800,
-    height: 500,
-    onClose: function(scope) {
-        alert('the dialog was closed! --> ' + scope)
+    // default options
+    options: {
+        rel     : 'addmore',
+        url     : 'http://www.youtube.com/watch?v=2WNrx2jq184',
+        vars    : 'vars',
+        label   : 'add more...',
+        class   : 'addmore',
+        width   : 800,
+        height  : 500,
+        onClose : function(scope) {
+            // onClose handler does nothing by default
+        }
     },
     
@@ -44 +57 @@
      * initialize object
      */
-    init: function(rel, url, vars, onClose) {
+    init: function(options) {
         var that = this;
 
         // set class parameters
-        that.rel = rel;
-        that.url = url;
-        that.vars = vars;
-        that.onClose = onClose;
+        $.each(options, function(key,value) {
+            that.options[key] = value;
+        });
 
         // find all matching select elements
-        $("select[rel*='" + that.rel + "']").each(function() {
+        $("select[rel*='" + this.options.rel + "']").each(function() {
             // add the magic option
             that.addTermEditorOption(this);
@@ -69 +81 @@
 
         // add a magic option to the end of the select element
-        e.append('<option value="" class="addTerm">add more...</option>');
+        e.append('<option value="" class="' + this.options.class + '">' + this.options.label + '</option>');
 
         // and bind and onChange event
@@ -79 +91 @@
                 // the dialog integrate with the application!
                 // @see http://www.w3schools.com/html5/tag_iframe.asp
-                $('<iframe src="' + that.url + '?' + that.vars + '=' + e.attr(that.vars) + '" sanbox="allow-same-origin" seamless />').dialog({
-                    title: 'Add more...',
+                $('<iframe src="' + that.options.url + '?' + that.options.vars + '=' + e.attr(that.options.vars) + '" sanbox="allow-same-origin" seamless />').dialog({
+                    title: that.options.label,
                     autoOpen: true,
-                    width: that.width,
-                    height: that.height,
+                    width: that.options.width,
+                    height: that.options.height,
                     modal: true,
                     close: function() {
-                        that.onClose(this);
+                        that.options.onClose(this);
                     }
-                }).width(that.width - 10).height(that.height)
+                }).width(that.options.width - 10).height(that.options.height)
             }
         })

trunk/web-app/js/wizard.js

@@ -48 +48 @@
 
     // handle term selects
-    new SelectAddMore().init('term','/gscf/termEditor','ontology',function(scope) { refreshWebFlow(); });
+    new SelectAddMore().init({
+        rel     : 'term',
+        url     : '/gscf/termEditor',
+        vars    : 'ontology',
+        label   : 'add more...',
+        class   : 'addMore',
+        onClose : function(scope) {
+            refreshWebFlow();
+        }
+    });
 
     // initialize accordeon(s)