Changeset 365


Ignore:
Timestamp:
Apr 21, 2010, 12:30:18 PM (9 years ago)
Author:
duh
Message:
  • refactored JavaScript? and CSS to be more logical and general
Location:
trunk/web-app
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/web-app/css/default_style.css

    r362 r365  
    252252
    253253/* START :: special select option styles */
    254 option.addTerm {
     254option.addMore {
    255255    background: url(../images/icons/famfamfam/add.png) no-repeat left top;
    256256    background-color: #333;
  • trunk/web-app/js/SelectAddMore.js

    r363 r365  
    1717 * </select>
    1818 * ...
    19  * new SelectAddMore().init('cars','http://my.site/addCars','myList',function(scope) { alert('cars closed : '+scope);});
     19 * new SelectAddMore().init({
     20 *      'rel'       : 'cars',
     21 *      'url'       : 'http://my.site/modifyCars',
     22 *      'label'     : 'modify cars...',
     23 *      'class'     : 'myCSSClass',
     24 *      'onClose'   : function(scope) {
     25 *          alert('cars closed : ' + scope );
     26 *      }
     27 * });
    2028 *
    2129 * @author      Jeroen Wesbeek
     
    3240}
    3341SelectAddMore.prototype = {
    34     rel: 'myRel',
    35     url: 'http://www.youtube.com/watch?v=2WNrx2jq184',
    36     vars: 'myVar',
    37     width: 800,
    38     height: 500,
    39     onClose: function(scope) {
    40         alert('the dialog was closed! --> ' + scope)
     42    // default options
     43    options: {
     44        rel     : 'addmore',
     45        url     : 'http://www.youtube.com/watch?v=2WNrx2jq184',
     46        vars    : 'vars',
     47        label   : 'add more...',
     48        class   : 'addmore',
     49        width   : 800,
     50        height  : 500,
     51        onClose : function(scope) {
     52            // onClose handler does nothing by default
     53        }
    4154    },
    4255   
     
    4457     * initialize object
    4558     */
    46     init: function(rel, url, vars, onClose) {
     59    init: function(options) {
    4760        var that = this;
    4861
    4962        // set class parameters
    50         that.rel = rel;
    51         that.url = url;
    52         that.vars = vars;
    53         that.onClose = onClose;
     63        $.each(options, function(key,value) {
     64            that.options[key] = value;
     65        });
    5466
    5567        // find all matching select elements
    56         $("select[rel*='" + that.rel + "']").each(function() {
     68        $("select[rel*='" + this.options.rel + "']").each(function() {
    5769            // add the magic option
    5870            that.addTermEditorOption(this);
     
    6981
    7082        // add a magic option to the end of the select element
    71         e.append('<option value="" class="addTerm">add more...</option>');
     83        e.append('<option value="" class="' + this.options.class + '">' + this.options.label + '</option>');
    7284
    7385        // and bind and onChange event
     
    7991                // the dialog integrate with the application!
    8092                // @see http://www.w3schools.com/html5/tag_iframe.asp
    81                 $('<iframe src="' + that.url + '?' + that.vars + '=' + e.attr(that.vars) + '" sanbox="allow-same-origin" seamless />').dialog({
    82                     title: 'Add more...',
     93                $('<iframe src="' + that.options.url + '?' + that.options.vars + '=' + e.attr(that.options.vars) + '" sanbox="allow-same-origin" seamless />').dialog({
     94                    title: that.options.label,
    8395                    autoOpen: true,
    84                     width: that.width,
    85                     height: that.height,
     96                    width: that.options.width,
     97                    height: that.options.height,
    8698                    modal: true,
    8799                    close: function() {
    88                         that.onClose(this);
     100                        that.options.onClose(this);
    89101                    }
    90                 }).width(that.width - 10).height(that.height)
     102                }).width(that.options.width - 10).height(that.options.height)
    91103            }
    92104        })
  • trunk/web-app/js/wizard.js

    r359 r365  
    4848
    4949    // handle term selects
    50     new SelectAddMore().init('term','/gscf/termEditor','ontology',function(scope) { refreshWebFlow(); });
     50    new SelectAddMore().init({
     51        rel     : 'term',
     52        url     : '/gscf/termEditor',
     53        vars    : 'ontology',
     54        label   : 'add more...',
     55        class   : 'addMore',
     56        onClose : function(scope) {
     57            refreshWebFlow();
     58        }
     59    });
    5160
    5261    // initialize accordeon(s)
Note: See TracChangeset for help on using the changeset viewer.