← Back to branch summary

~sidnei/lazr-js/dont-replace-data-uri

« back to all changes in this revision

Viewing changes to src-js/lazrjs/inlineedit/editor.js

  • Committer: Launchpad Patch Queue Manager
  • Date: 2011-02-07 01:32:31 UTC
  • mfrom: (199.2.11 multi-line-editor-goodness)
  • Revision ID: launchpad@pqm.canonical.com-20110207013231-948s1nuoyfvfh2lb
[r=deryck][bugs=711054, 711124, 705548, 711127, 711116,
        711128] Mostly CSS tweaks, better error handling.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src-js/lazrjs/inlineedit/editor.js
38
38
 
39
39
    TOP_BUTTONS = 'top_buttons',
40
40
    BOTTOM_BUTTONS = 'bottom_buttons',
 
41
    SUBMIT_BUTTON = 'submit_button',
 
42
    CANCEL_BUTTON = 'cancel_button',
41
43
    BUTTONS = 'buttons',
42
44
    B_TOP = 'top',
43
45
    B_BOTTOM = 'bottom',
498
500
            // The multi-line editor has to dynamically resize,
499
501
            // in case the widget is fluid.
500
502
            var box_width = this.get(BOUNDING_BOX).get('offsetWidth');
501
 
            var new_width = box_width - 25;
 
503
            var new_width = box_width - 29;
502
504
            input.setStyle('width', new_width + 'px');
503
505
        }
504
506
 
553
555
     * @param msg A string or HTMLElement to be displayed.
554
556
     */
555
557
    showError: function(msg) {
 
558
        this.hideLoadingSpinner();
556
559
        this.get(ERROR_MSG).set('innerHTML', msg);
557
560
        this.set(IN_ERROR, true);
558
561
        this.get(INPUT_EL).focus();
704
707
                .addClass(C_CANCEL);
705
708
        parent.appendChild(cancel);
706
709
        parent.appendChild(ok);
 
710
        this.set(SUBMIT_BUTTON, ok);
 
711
        this.set(CANCEL_BUTTON, cancel);
707
712
    },
708
713
 
709
714
    /**
801
806
        msg.addClass(C_ERROR_HIDDEN);
802
807
    },
803
808
 
 
809
    showLoadingSpinner: function(e) {
 
810
        // The multi-line editor submit icon should change to a spinner.
 
811
        if (this.get(MULTILINE)) {
 
812
            this.get(TOP_BUTTONS).one('.' + C_SUBMIT).setStyle(
 
813
                'display', 'none');
 
814
            this.get(TOP_BUTTONS).one('.' + C_CANCEL).setStyle(
 
815
                'display', 'none');
 
816
            var span = Y.Node.create('<span></span>');
 
817
            span.addClass(LOADING);
 
818
            e.target.get('parentNode').appendChild(span);
 
819
        }
 
820
    },
 
821
 
 
822
    hideLoadingSpinner: function() {
 
823
        // Remove the spinner from the multi-line editor.
 
824
        if (this.get(MULTILINE)) {
 
825
            var spinner = this.get(TOP_BUTTONS).one('.' + LOADING);
 
826
            if (spinner) {
 
827
                var parent = spinner.get('parentNode');
 
828
                parent.removeChild(spinner);
 
829
                this.get(TOP_BUTTONS).one('.' + C_SUBMIT).setStyle(
 
830
                    'display', 'inline');
 
831
                this.get(TOP_BUTTONS).one('.' + C_CANCEL).setStyle(
 
832
                    'display', 'inline');
 
833
            }
 
834
        }
 
835
    },
 
836
 
804
837
    /**
805
838
     * Bind the widget's DOM elements to their event handlers.
806
839
     *
812
845
 
813
846
        this._bindButtons(C_SUBMIT, function(e) {
814
847
            e.preventDefault();
815
 
            // The multi-line editor submit icon should change to a spinner.
816
 
            if (this.get(MULTILINE)) {
817
 
                this.get(TOP_BUTTONS).one('.' + C_SUBMIT).setStyle(
818
 
                    'display', 'none');
819
 
                this.get(TOP_BUTTONS).one('.' + C_CANCEL).setStyle(
820
 
                    'display', 'none');
821
 
                var span = Y.Node.create('<span></span>');
822
 
                span.addClass(LOADING);
823
 
                e.target.get('parentNode').appendChild(span);
824
 
            }
 
848
            this.showLoadingSpinner(e);
825
849
            this.save();
826
850
        });
827
851
        this._bindButtons(C_CANCEL, function(e) {
1075
1099
                ptags.each(function(ptag) {
1076
1100
                    lines = lines.concat([ptag.get('text'), '\n\n']);
1077
1101
                });
1078
 
                return lines.join("");
 
1102
                var content = lines.join("");
 
1103
                // Remove trailing whitespace.
 
1104
                return content.replace(/\s+$/,'');
1079
1105
            } else {
1080
1106
                return this.get(TEXT).get('text');
1081
1107
            }
1150
1176
     * @protected
1151
1177
     */
1152
1178
    _triggerEdit: function(e) {
1153
 
        //~ Y.log("Got trigger click", 'info');
1154
1179
        e.preventDefault();
1155
1180
        this.show_editor();
1156
 
        var cancel = this._editor_bb.one('.yui3-ieditor-cancel_button');
 
1181
        var cancel = this._editor_bb.one('.' + C_CANCEL);
1157
1182
        var anim = new Y.Anim({
1158
1183
            node: cancel,
1159
1184
            easing: Y.Easing.easeOut,
1176
1201
     * @method show_editor
1177
1202
     */
1178
1203
    show_editor: function() {
1179
 
        this.get(BOUNDING_BOX).addClass(C_EDIT_MODE);
 
1204
        // Make sure that the cancel button starts back under the edit.
 
1205
        var bounding_box = this.get(BOUNDING_BOX);
 
1206
        bounding_box.one('.' + C_CANCEL).setStyle('left', 0);
 
1207
        bounding_box.addClass(C_EDIT_MODE);
1180
1208
        this.editor.set(VALUE, this.get(VALUE));
1181
1209
        this.editor.syncUI();
1182
1210
        this.editor.show();
1398
1426
        if (this.get(RENDERED)) {
1399
1427
            var text = this.get(TEXT),
1400
1428
                val  = this.editor.get(VALUE);
1401
 
            //~ Y.log("Setting new text value '" + val + "' on " + text, 'info');
1402
1429
            text.set('innerHTML', '');
1403
1430
            if (this.editor.get(MULTILINE)) {
1404
1431
                text.set('innerHTML', val);
1436
1463
     * @protected
1437
1464
     */
1438
1465
    _afterSave: function(e) {
1439
 
        // Remove the spinner from the multi-line editor.
1440
 
        if (this.editor.get(MULTILINE)) {
1441
 
            var spinner = this.editor.get(TOP_BUTTONS).one('.' + LOADING);
1442
 
            var parent = spinner.get('parentNode');
1443
 
            parent.removeChild(spinner);
1444
 
            this.editor.get(TOP_BUTTONS).one('.' + C_SUBMIT).setStyle(
1445
 
                'display', 'inline');
1446
 
            this.editor.get(TOP_BUTTONS).one('.' + C_CANCEL).setStyle(
1447
 
                'display', 'inline');
1448
 
        }
 
1466
        this.editor.hideLoadingSpinner();
1449
1467
        this.syncUI();
1450
1468
        this.hide_editor();
1451
1469
        this._uiAnimateSave();
1461
1479
     * @protected
1462
1480
     */
1463
1481
    _afterCancel: function(e) {
1464
 
        //~ Y.log("Got editor 'cancel' event", 'info');
1465
1482
        this.hide_editor();
1466
1483
        this._uiAnimateCancel();
1467
1484
    },
1496
1513
 
1497
1514
Y.EditableText = EditableText;
1498
1515
 
1499
 
//~ Y.log("Module loaded", 'info', 'lazr.editor');
1500
 
 
1501
1516
}, "0.2", {"skinnable": true,
1502
1517
           "requires": ["oop", "anim", "event", "node", "widget",
1503
1518
                        "lazr.anim", "lazr.base"]});