Changeset 892 for trunk/web-app


Ignore:
Timestamp:
Sep 16, 2010, 4:46:04 PM (10 years ago)
Author:
duh
Message:
  • adding dynamic 'select all' functionality to table editor
Location:
trunk/web-app
Files:
40 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/web-app/css/wizard.css

    r874 r892  
    232232    color: #006dba;
    233233    font-weight: bold;
     234}
     235
     236.wizard .table .selectAll {
     237    display: inline-block;
     238    background-color: red;
     239    background: url(../images/icons/famfamfam/control_eject.png) no-repeat center center;
     240    -webkit-transform: rotate(180deg);
     241    -moz-transform: rotate(180deg);
     242    -o-transform: rotate(180g);
     243    cursor: pointer;
    234244}
    235245

  • trunk/web-app/js/development.js

    r359 r892  
    1111 */
    1212$(document).ready(function() {
    13     var d = ''
     13    var d = '<b>development:</b> '
    1414    d += '<input type="button" class="prevnext" value="reload CSS" onclick="reloadCSS();return false;"/>'
    1515    d += '<input type="button" class="prevnext" value="reload JS" onclick="reloadJS();return false;"/>'

  • trunk/web-app/js/ontology-chooser.js

    r598 r892  
    3939        minLength   : 3,    // minimum input length before launching Ajax request
    4040        showHide    : null, // show / hide this DOM element on select/deselect autocomplete results
    41         spinner     : '../images/spinner.gif'
     41        spinner     : '../images/spinner.gif',
     42
    4243    },
    4344

  • trunk/web-app/js/table-editor.js

    r733 r892  
    1515}
    1616TableEditor.prototype = {
    17     tableIdentifier:    null,
    18     rowIdentifier:      null,
    19     columnIdentifier:   null,
    20     selected:           null,
     17    options : {
     18        tableIdentifier     :   'div.table',
     19        headerIdentifier    :   'div.header',
     20        rowIdentifier       :   'div.row',
     21        columnIdentifier    :   'div.column',
     22        selected            :   null
     23    },
     24    allSelected : false,
    2125
    2226    /**
    2327     * initialize object
    24      * @param tableIdentifier
    25      * @param rowIdentifier
    26      * @param columnIdentifier
    27      */
    28     init: function(tableIdentifier, rowIdentifier, columnIdentifier) {
    29         // store parameters globally
    30         this.tableIdentifier = tableIdentifier;
    31         this.rowIdentifier = rowIdentifier;
    32         this.columnIdentifier = columnIdentifier;
     28     * @param options
     29     */
     30    init: function(options) {
     31        var that = this;
     32       
     33        // set class parameters
     34        if (options) {
     35            $.each(options, function(key,value) {
     36                that.options[key] = value;
     37            });
     38        }
    3339
    3440        // got table(s)?
    35         var table = $(tableIdentifier);
     41        var table = $(this.options.tableIdentifier);
    3642        if (table) {
    3743            // yes, initialize table(s)
    … …  
    4854     */
    4955    initializeTable: function(table) {
    50         var that = this;
    51 
    52         $(table).selectable({
    53             filter: this.rowIdentifier,
     56        var that  = this;
     57        var t = $(table);
     58
     59        // initialize selectable
     60        t.selectable({
     61            filter: this.options.rowIdentifier,
    5462            selected: function(event, ui) {
     63                that.cleanup(t);
    5564                that.attachColumnHandlers(ui.selected);
    5665            },
    5766            unselected: function(event, ui) {
    58                 that.deAttachColumnHandlers(ui.selected);
     67                that.cleanup(t);
     68                that.detachColumnHandlers(ui.selected);
    5969            }
    6070        });
     71
     72        // insert a 'select all' element in the top-left header column
     73        var selectAllElement = $($(this.options.headerIdentifier + ':eq(0)', t ).find(':nth-child(1)')[0]);
     74        if (selectAllElement) {
     75            // set up the selectAll element
     76            selectAllElement
     77                .addClass('selectAll')
     78                .html('&nbsp;&nbsp;&nbsp;')
     79                .bind('click',function() {
     80                    that.selectAll(t);
     81                });
     82
     83            // add a tooltip
     84            selectAllElement.qtip({
     85                content: 'leftMiddle',
     86                position: {
     87                    corner: {
     88                        tooltip: 'leftMiddle',
     89                        target: 'rightMiddle'
     90                    }
     91                },
     92                style: {
     93                    border: {
     94                        width: 5,
     95                        radius: 10
     96                    },
     97                    padding: 10,
     98                    textAlign: 'center',
     99                    tip: true,
     100                    name: 'blue'
     101                },
     102                content: "Click to select all rows in this table",
     103                show: 'mouseover',
     104                hide: 'mouseout',
     105                api: {
     106                    beforeShow: function() {
     107                        // not used at this moment
     108                    }
     109                }
     110            });
     111        }
     112    },
     113
     114    /**
     115     * select all rows in the table
     116     * @param table
     117     */
     118    selectAll: function(table) {
     119        var that = this;
     120        this.cleanup(table);
     121
     122        // select and bind row
     123        $(this.options.rowIdentifier, table).each(function() {
     124            var row = $(this);
     125            row.addClass('ui-selected');
     126            that.attachColumnHandlers(row);
     127        });
     128
     129        // and set flag
     130        this.allSelected = true;
     131    },
     132
     133    /**
     134     * check if the table needs cleanup
     135     * @param table
     136     */
     137    cleanup: function(table) {
     138        // check if all rows were selected
     139        if (this.allSelected) {
     140            // yes, then we need to cleanup. If we only used the jquery-ui
     141            // selector we wouldn't have to do so as it cleans up after
     142            // itself. But as we cannot programatically hook into the selector
     143            // we have to clean up ourselves. Perform a table cleanup and
     144            // unbind every handlers.
     145            this.deselectAll(table);
     146        }
     147    },
     148
     149    /**
     150     * deselect all rows in the table
     151     * Note that this conflicts with the jquery selectable, so this is
     152     * NOT a user function, merely an 'underwater' function used for
     153     * consistency
     154     * @param table
     155     */
     156    deselectAll: function(table) {
     157        var that = this;
     158
     159        // cleanup rows
     160        $(this.options.rowIdentifier, table).each(function() {
     161            var row = $(this);
     162            row.removeClass('ui-selected');
     163            that.detachColumnHandlers(row);
     164        });
     165
     166        // and unset flag
     167        this.allSelected = false;
    61168    },
    62169
    … …  
    65172     * @param row
    66173     */
    67     deAttachColumnHandlers: function(row) {
    68         var that = this;
    69 
    70         $(this.columnIdentifier, row).each(function() {
     174    detachColumnHandlers: function(row) {
     175        var that = this;
     176
     177        $(this.options.columnIdentifier, row).each(function() {
    71178            var input = $(':input', $(this));
    72179
    … …  
    90197        var regAutoComplete = new RegExp("ui-autocomplete-input");
    91198
    92         $(this.columnIdentifier, row).each(function() {
     199        $(this.options.columnIdentifier, row).each(function() {
    93200            var input = $(':input', $(this));
    94201            var inputElement = $(input)
    … …  
    171278        // select all input elements in the selected rows
    172279        $('.ui-selected', t).each(function() {
    173             $(that.columnIdentifier + ':eq(' + columnNumber + ') ' + elementSelector, $(this)).each(function() {
     280            $(that.options.columnIdentifier + ':eq(' + columnNumber + ') ' + elementSelector, $(this)).each(function() {
    174281                var me = $(this)
    175282                if (me.attr('type') != "hidden") {

  • trunk/web-app/js/wizard.js

    r709 r892  
    3030    attachTableEvents();
    3131    handleWizardTable();
    32     new TableEditor().init('div.table', 'div.row', 'div.column');
     32    new TableEditor().init({
     33        tableIdentifier : 'div.table',
     34        rowIdentifier   : 'div.row',
     35        columnIdentifier: 'div.column',
     36        headerIdentifier: 'div.header'
     37    });
    3338
    3439    // initialize the ontology chooser
Note: See TracChangeset for help on using the changeset viewer.