← Back to branch summary

~ubuntu-branches/ubuntu/utopic/moodle/utopic

« back to all changes in this revision

Viewing changes to lib/editor/tinymce/yui/build/moodle-editor_tinymce-collapse/moodle-editor_tinymce-collapse.js

  • Committer: Package Import Robot
  • Author(s): Thijs Kinkhorst
  • Date: 2014-05-12 16:10:38 UTC
  • mfrom: (36.1.3 sid)
  • Revision ID: package-import@ubuntu.com-20140512161038-puyqf65k4e0s8ytz
Tags: 2.6.3-1
New upstream release.

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/editor/tinymce/yui/build/moodle-editor_tinymce-collapse/moodle-editor_tinymce-collapse.js
1
 
YUI.add('moodle-editor_tinymce-collapse', function (Y, NAME) {
2
 
 
3
 
var COLLAPSE = function() {
4
 
    COLLAPSE.superclass.constructor.apply(this, arguments);
5
 
};
6
 
 
7
 
Y.extend(COLLAPSE, Y.Base, {
8
 
    // A location to store the node toggling template so that we do not have to create it each time.
9
 
    toggleNodeTemplate : null,
10
 
 
11
 
    /**
12
 
      * Set up basic values for static access.
13
 
      */
14
 
    init : function() {
15
 
        this.initialise_toggles(10);
16
 
    },
17
 
 
18
 
    /**
19
 
     * Has TinyMCE been loaded and the editors been initialised?
20
 
     * Designed mainly for IE
21
 
     * @return bool
22
 
     */
23
 
    editors_initialised : function() {
24
 
        return typeof tinyMCE !== 'undefined';
25
 
    },
26
 
 
27
 
    initialise_toggles : function(refreshes) {
28
 
        var editors_initialised = this.editors_initialised(), self = this, editor;
29
 
        if (!editors_initialised && refreshes) {
30
 
            setTimeout(function() {
31
 
                    self.initialise_toggles(refreshes - 1);
32
 
                }, 100);
33
 
            return;
34
 
        }
35
 
 
36
 
        // Create the toggle template for use later
37
 
        this.toggleNodeTemplate = Y.Node.create('<a class="toggle_editor_toolbar" />');
38
 
        this.toggleNodeTemplate.setContent(M.util.get_string('showeditortoolbar', 'form'));
39
 
 
40
 
        // Delegate clicks of the toggle_editor_toolbar
41
 
        Y.one('body').delegate('click', this.toggle_collapse_from_event, 'a.toggle_editor_toolbar', this);
42
 
 
43
 
        // Set up editors which have already been created
44
 
        for (editor in tinyMCE.editors) {
45
 
            this.setup_collapse(tinyMCE.editors[editor]);
46
 
        }
47
 
 
48
 
        // Set up for future editors.
49
 
        // I haven't yet found a way of directly delegating the editor.onInit event. Instead we have to listen for the
50
 
        // tinyMCE.onAddEditor event, and then add a further event listener to the editor's onInit event.
51
 
        // onAddEditor is triggered before the editor has been created.
52
 
        // We use Y.Bind to ensure that context is maintained.
53
 
        tinyMCE.onAddEditor.add(Y.bind(this.add_setup_collapse_listener, this));
54
 
 
55
 
    },
56
 
 
57
 
    /**
58
 
      * Setup a listener for a new editor which will actually set the editor up
59
 
      * @param {Manager} mgr
60
 
      * @param {Editor} ed
61
 
      */
62
 
    add_setup_collapse_listener : function (mgr, ed) {
63
 
        // Bind the editor.onInit function to set this editor up. This ensures we maintain our context (this)
64
 
        ed.onInit.add(Y.bind(this.setup_collapse, this));
65
 
    },
66
 
 
67
 
    /**
68
 
      * Setup the toggle system for the provided editor
69
 
      *
70
 
      * @param {Editor} ed The TinyMCE editor instance
71
 
      */
72
 
    setup_collapse : function(ed) {
73
 
        var textarea = Y.Node(ed.getElement()),
74
 
            editortable = Y.Node(ed.getContainer()).one('> table'),
75
 
            thisToggleNode;
76
 
 
77
 
        // Does this text area support collapsing at all?
78
 
        if (!textarea.hasClass('collapsible')) {
79
 
            return;
80
 
        }
81
 
 
82
 
        // Did we find an appropriate table to work with
83
 
        if (!editortable) {
84
 
            return;
85
 
        }
86
 
 
87
 
        // Add toggle button.
88
 
        thisToggleNode = this.toggleNodeTemplate.cloneNode(true);
89
 
        editortable.get('parentNode').insert(thisToggleNode, editortable);
90
 
 
91
 
        // Toggle the toolbars initially.
92
 
        if (Y.Node(ed.getElement()).hasClass('collapsed')) {
93
 
            this.toggle_collapse(thisToggleNode, editortable, 0);
94
 
        } else {
95
 
            this.toggle_collapse(thisToggleNode, editortable, 1);
96
 
        }
97
 
 
98
 
        // When TinyMCE initialises itself, it adds a height to the table.
99
 
        // Unfortuately, the height it sets is too big for when the editor is collpsed.
100
 
        // Fortunately, the hight is not necessary, so we can just remove it.
101
 
        // (If you re-size the editor then it will remove this style attribute itself.)
102
 
        editortable.setStyle('height', '');
103
 
        editortable.setStyle('width', '');
104
 
    },
105
 
 
106
 
    /**
107
 
      * Toggle the specified editor toolbars.
108
 
      *
109
 
      * @param {Node} button The toggle button which we have to change the text for
110
 
      * @param {Node} editortable The table which the tinyMCE editor is in
111
 
      * @param {Boolean} newstate The intended toggle state
112
 
      */
113
 
    toggle_collapse : function(button, editortable, newstate) {
114
 
        var toolbar = editortable.one('td.mceToolbar').ancestor('tr'),
115
 
            statusbar = editortable.one('.mceStatusbar').ancestor('tr');
116
 
 
117
 
        // Check whether we have a state already.
118
 
        if (typeof newstate === 'undefined') {
119
 
            if (toolbar.getStyle('display') === 'none') {
120
 
                newstate = 1;
121
 
            } else {
122
 
                newstate = 0;
123
 
            }
124
 
        }
125
 
 
126
 
        // Toggle the various states and update the button text to suit
127
 
        if (newstate === 0) {
128
 
            toolbar.hide();
129
 
            statusbar.hide();
130
 
            button.setContent(M.util.get_string('showeditortoolbar', 'form'));
131
 
        } else {
132
 
            toolbar.show();
133
 
            statusbar.show();
134
 
            button.setContent(M.util.get_string('hideeditortoolbar', 'form'));
135
 
        }
136
 
    },
137
 
 
138
 
    toggle_collapse_from_event : function(thisevent) {
139
 
        var button = thisevent.target.ancestor('a', true),
140
 
            editortable = thisevent.target.ancestor('span', true).one('table.mceLayout');
141
 
        this.toggle_collapse(button, editortable);
142
 
    }
143
 
});
144
 
 
145
 
M.editor_collapse = M.editor_collapse || {};
146
 
M.editor_collapse.init = function(params) {
147
 
    return new COLLAPSE(params);
148
 
};
149
 
 
150
 
 
151
 
}, '@VERSION@', {"requires": ["base", "node", "dom"]});