← Back to branch summary

~bjornt/lazr-js/prefetch-yui-3.5

« back to all changes in this revision

Viewing changes to src-js/lazrjs/yui/editor/frame-debug.js

  • Committer: Launchpad Patch Queue Manager
  • Date: 2011-01-14 23:32:29 UTC
  • mfrom: (197.1.7 yui-3.3.0)
  • Revision ID: launchpad@pqm.canonical.com-20110114233229-r6i4cazdiiw18o7p
Upgrade to YUI 3.3.0 [r=mars]

Show diffs side-by-side

added added

removed removed

Lines of Context:
src-js/lazrjs/yui/editor/frame-debug.js
2
2
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
3
3
Code licensed under the BSD License:
4
4
http://developer.yahoo.com/yui/license.html
5
 
version: 3.2.0
6
 
build: 2676
 
5
version: 3.3.0
 
6
build: 3167
7
7
*/
8
8
YUI.add('frame', function(Y) {
9
9
 
69
69
            this._iframe.set('src', this.get('src'));
70
70
            this.get('container').append(this._iframe);
71
71
 
 
72
            this._iframe.set('height', '99%');
72
73
 
 
74
            
73
75
            var html = '',
74
76
                extra_css = ((this.get('extracss')) ? '<style id="extra_css">' + this.get('extracss') + '</style>' : '');
75
77
 
79
81
                LANG: this.get('lang'),
80
82
                TITLE: this.get('title'),
81
83
                META: Frame.META,
 
84
                LINKED_CSS: this.get('linkedcss'),
82
85
                CONTENT: this.get('content'),
83
86
                BASE_HREF: this.get('basehref'),
84
87
                DEFAULT_CSS: Frame.DEFAULT_CSS,
85
88
                EXTRA_CSS: extra_css
86
89
            });
87
90
            if (Y.config.doc.compatMode != 'BackCompat') {
88
 
                Y.log('Adding Doctype to frame', 'info', 'frame');
89
 
                html = Frame.DOC_TYPE + "\n" + html;
 
91
                Y.log('Adding Doctype to frame: ' + Frame.getDocType(), 'info', 'frame');
 
92
                
 
93
                //html = Frame.DOC_TYPE + "\n" + html;
 
94
                html = Frame.getDocType() + "\n" + html;
90
95
            } else {
91
96
                Y.log('DocType skipped because we are in BackCompat Mode.', 'warn', 'frame');
92
97
            }
155
160
            if (e.pageX > 0 || e.pageY > 0) {
156
161
                if (e.type.substring(0, 3) !== 'key') {
157
162
                    node = this._instance.one('win');
158
 
                    xy = this._iframe.getXY()
 
163
                    xy = this._iframe.getXY();
159
164
                    e.frameX = xy[0] + e.pageX - node.get('scrollLeft');
160
165
                    e.frameY = xy[1] + e.pageY - node.get('scrollTop');
161
166
                }
199
204
            
200
205
            if (win.clipboardData) {
201
206
                data = win.clipboardData.getData('Text');
202
 
                if (data == '') { // Could be empty, or failed
 
207
                if (data === '') { // Could be empty, or failed
203
208
                    // Verify failure
204
209
                    if (!win.clipboardData.setData('Text', data)) {
205
210
                        data = null;
237
242
                kfn = ((Y.UA.ie) ? Y.throttle(fn, 200) : fn);
238
243
 
239
244
            inst.Node.DOM_EVENTS.activate = 1;
 
245
            inst.Node.DOM_EVENTS.beforedeactivate = 1;
240
246
            inst.Node.DOM_EVENTS.focusin = 1;
241
247
            inst.Node.DOM_EVENTS.deactivate = 1;
242
248
            inst.Node.DOM_EVENTS.focusout = 1;
247
253
                    if (k !== 'focus' && k !== 'blur' && k !== 'paste') {
248
254
                        //Y.log('Adding DOM event to frame: ' + k, 'info', 'frame');
249
255
                        if (k.substring(0, 3) === 'key') {
250
 
                            inst.on(k, kfn, inst.config.doc);
 
256
                            if (k === 'keydown') {
 
257
                                inst.on(k, fn, inst.config.doc);
 
258
                            } else {
 
259
                                inst.on(k, kfn, inst.config.doc);
 
260
                            }
251
261
                        } else {
252
262
                            inst.on(k, fn, inst.config.doc);
253
263
                        }
265
275
 
266
276
            inst._use = inst.use;
267
277
            inst.use = Y.bind(this.use, this);
268
 
 
269
278
            this._iframe.setStyles({
270
279
                visibility: 'inherit'
271
280
            });
272
281
            inst.one('body').setStyle('display', 'block');
 
282
            if (Y.UA.ie) {
 
283
                this._fixIECursors();
 
284
            }
 
285
        },
 
286
        /**
 
287
        * It appears that having a BR tag anywhere in the source "below" a table with a percentage width (in IE 7 & 8)
 
288
        * if there is any TEXTINPUT's outside the iframe, the cursor will rapidly flickr and the CPU would occasionally 
 
289
        * spike. This method finds all <BR>'s below the sourceIndex of the first table. Does some checks to see if they
 
290
        * can be modified and replaces then with a <WBR> so the layout will remain in tact, but the flickering will
 
291
        * no longer happen.
 
292
        * @method _fixIECursors
 
293
        * @private
 
294
        */
 
295
        _fixIECursors: function() {
 
296
            var inst = this.getInstance(),
 
297
                tables = inst.all('table'),
 
298
                brs = inst.all('br'), si;
 
299
 
 
300
            if (tables.size() && brs.size()) {
 
301
                //First Table
 
302
                si = tables.item(0).get('sourceIndex');
 
303
                brs.each(function(n) {
 
304
                    var p = n.get('parentNode'),
 
305
                        c = p.get('children'), b = p.all('>br');
 
306
                    
 
307
                    if (p.test('div')) {
 
308
                        if (c.size() > 2) {
 
309
                            n.replace(inst.Node.create('<wbr>'));
 
310
                        } else {
 
311
                            if (n.get('sourceIndex') > si) {
 
312
                                if (b.size()) {
 
313
                                    n.replace(inst.Node.create('<wbr>'));
 
314
                                }
 
315
                            } else {
 
316
                                if (b.size() > 1) {
 
317
                                    n.replace(inst.Node.create('<wbr>'));
 
318
                                }
 
319
                            }
 
320
                        }
 
321
                    }
 
322
                    
 
323
                });
 
324
            }
273
325
        },
274
326
        /**
275
327
        * @private
292
344
                //TODO Circle around and deal with CSS loading...
293
345
                args.push(Y.bind(function() {
294
346
                    Y.log('Callback from final internal use call', 'info', 'frame');
 
347
                    if (inst.Selection) {
 
348
                        inst.Selection.DEFAULT_BLOCK_TAG = this.get('defaultblock');
 
349
                    }
 
350
 
295
351
                    this.fire('ready');
296
352
                }, this));
297
353
                Y.log('Calling use on internal instance: ' + args, 'info', 'frame');
353
409
        },
354
410
        /**
355
411
        * @private
 
412
        * @method _setLinkedCSS
 
413
        * @description Set's the linked CSS on the instance..
 
414
        */
 
415
        _getLinkedCSS: function(urls) {
 
416
            if (!Y.Lang.isArray(urls)) {
 
417
                urls = [urls];
 
418
            }
 
419
            var str = '';
 
420
            if (!this._ready) {
 
421
                Y.each(urls, function(v) {
 
422
                    if (v !== '') {
 
423
                        str += '<link rel="stylesheet" href="' + v + '" type="text/css">';
 
424
                    }
 
425
                });
 
426
            } else {
 
427
                str = urls;
 
428
            }
 
429
            return str;
 
430
        },
 
431
        /**
 
432
        * @private
 
433
        * @method _setLinkedCSS
 
434
        * @description Set's the linked CSS on the instance..
 
435
        */
 
436
        _setLinkedCSS: function(css) {
 
437
            if (this._ready) {
 
438
                var inst = this.getInstance();
 
439
                inst.Get.css(css);
 
440
            }
 
441
            return css;
 
442
        },
 
443
        /**
 
444
        * @private
356
445
        * @method _setExtraCSS
357
446
        * @description Set's the extra CSS on the instance..
358
447
        */
375
464
        */
376
465
        _instanceLoaded: function(inst) {
377
466
            this._instance = inst;
378
 
 
379
467
            this._onContentReady();
380
468
            
381
469
            var doc = this._instance.config.doc;
461
549
            }
462
550
 
463
551
            this._create(Y.bind(function(res) {
 
552
 
464
553
                var inst, timer,
465
554
                    cb = Y.bind(function(i) {
466
555
                        Y.log('Internal instance loaded with node-base', 'info', 'frame');
503
592
            return this;
504
593
        },
505
594
        /**
 
595
        * @private
 
596
        * @method _handleFocus
 
597
        * @description Does some tricks on focus to set the proper cursor position.
 
598
        */
 
599
        _handleFocus: function() {
 
600
            var inst = this.getInstance(),
 
601
                sel = new inst.Selection();
 
602
 
 
603
            if (sel.anchorNode) {
 
604
                Y.log('_handleFocus being called..', 'info', 'frame');
 
605
                var n = sel.anchorNode,
 
606
                    c = n.get('childNodes');
 
607
 
 
608
                if (c.size() == 1) {
 
609
                    if (c.item(0).test('br')) {
 
610
                        sel.selectNode(n, true, false);
 
611
                    }
 
612
                    if (c.item(0).test('p')) {
 
613
                        n = c.item(0).one('br.yui-cursor').get('parentNode');
 
614
                        sel.selectNode(n, true, false);
 
615
                    }
 
616
                }
 
617
            }
 
618
        },
 
619
        /**
506
620
        * @method focus
507
621
        * @description Set the focus to the iframe
508
622
        * @param {Function} fn Callback function to execute after focus happens        
511
625
        */
512
626
        focus: function(fn) {
513
627
            if (Y.UA.ie) {
514
 
                Y.one('win').focus();
515
 
                this.getInstance().one('win').focus();
 
628
                try {
 
629
                    Y.one('win').focus();
 
630
                    this.getInstance().one('win').focus();
 
631
                } catch (ierr) {
 
632
                    Y.log('Frame focus failed', 'warn', 'frame');
 
633
                }
 
634
                if (fn === true) {
 
635
                    this._handleFocus();
 
636
                }
516
637
                if (Y.Lang.isFunction(fn)) {
517
638
                    fn();
518
639
                }
521
642
                    Y.one('win').focus();
522
643
                    Y.later(100, this, function() {
523
644
                        this.getInstance().one('win').focus();
 
645
                        if (fn === true) {
 
646
                            this._handleFocus();
 
647
                        }
524
648
                        if (Y.Lang.isFunction(fn)) {
525
649
                            fn();
526
650
                        }
572
696
        * @type Object
573
697
        */
574
698
        DOM_EVENTS: {
 
699
            dblclick: 1,
 
700
            click: 1,
575
701
            paste: 1,
576
702
            mouseup: 1,
577
703
            mousedown: 1,
580
706
            keypress: 1,
581
707
            activate: 1,
582
708
            deactivate: 1,
 
709
            beforedeactivate: 1,
583
710
            focusin: 1,
584
711
            focusout: 1
585
712
        },
590
717
        * @description The default css used when creating the document.
591
718
        * @type String
592
719
        */
593
 
        DEFAULT_CSS: 'html { height: 95%; } body { padding: 7px; background-color: #fff; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } a, a:visited, a:hover { color: blue !important; text-decoration: underline !important; cursor: text !important; } img { cursor: pointer !important; border: none; }',
594
 
        
595
 
        //DEFAULT_CSS: 'html { } body { margin: -15px 0 0 -15px; padding: 7px 0 0 15px; display: block; background-color: #fff; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; }',
596
 
        //DEFAULT_CSS: 'html { height: 95%; } body { height: 100%; padding: 7px; margin: 0 0 0 -7px; postion: relative; background-color: #fff; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } a, a:visited, a:hover { color: blue !important; text-decoration: underline !important; cursor: text !important; } img { cursor: pointer !important; border: none; }',
597
 
        //DEFAULT_CSS: 'html { margin: 0; padding: 0; border: none; border-size: 0; } body { height: 97%; margin: 0; padding: 0; display: block; background-color: gray; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; }',
 
720
        //DEFAULT_CSS: 'html { height: 95%; } body { padding: 7px; background-color: #fff; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } a, a:visited, a:hover { color: blue !important; text-decoration: underline !important; cursor: text !important; } img { cursor: pointer !important; border: none; }',
 
721
        DEFAULT_CSS: 'body { background-color: #fff; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } a, a:visited, a:hover { color: blue !important; text-decoration: underline !important; cursor: text !important; } img { cursor: pointer !important; border: none; }',
598
722
        /**
599
723
        * @static
600
724
        * @property HTML
601
725
        * @description The template string used to create the iframe
602
726
        * @type String
603
727
        */
 
728
        //HTML: '<iframe border="0" frameBorder="0" marginWidth="0" marginHeight="0" leftMargin="0" topMargin="0" allowTransparency="true" width="100%" height="99%"></iframe>',
604
729
        HTML: '<iframe border="0" frameBorder="0" marginWidth="0" marginHeight="0" leftMargin="0" topMargin="0" allowTransparency="true" width="100%" height="99%"></iframe>',
605
 
        //HTML: '<iframe border="0" frameBorder="0" width="100%" height="99%"></iframe>',
606
730
        /**
607
731
        * @static
608
732
        * @property PAGE_HTML
609
733
        * @description The template used to create the page when created dynamically.
610
734
        * @type String
611
735
        */
612
 
        PAGE_HTML: '<html dir="{DIR}" lang="{LANG}"><head><title>{TITLE}</title>{META}<base href="{BASE_HREF}"/><style id="editor_css">{DEFAULT_CSS}</style>{EXTRA_CSS}</head><body>{CONTENT}</body></html>',
 
736
        PAGE_HTML: '<html dir="{DIR}" lang="{LANG}"><head><title>{TITLE}</title>{META}<base href="{BASE_HREF}"/>{LINKED_CSS}<style id="editor_css">{DEFAULT_CSS}</style>{EXTRA_CSS}</head><body>{CONTENT}</body></html>',
 
737
 
 
738
        /**
 
739
        * @static
 
740
        * @method getDocType
 
741
        * @description Parses document.doctype and generates a DocType to match the parent page, if supported.
 
742
        * For IE8, it grabs document.all[0].nodeValue and uses that. For IE < 8, it falls back to Frame.DOC_TYPE.
 
743
        * @returns {String} The normalized DocType to apply to the iframe
 
744
        */
 
745
        getDocType: function() {
 
746
            var dt = Y.config.doc.doctype,
 
747
                str = Frame.DOC_TYPE;
 
748
 
 
749
            if (dt) {
 
750
                str = '<!DOCTYPE ' + dt.name + ((dt.publicId) ? ' ' + dt.publicId : '') + ((dt.systemId) ? ' ' + dt.systemId : '') + '>';
 
751
            } else {
 
752
                if (Y.config.doc.all) {
 
753
                    dt = Y.config.doc.all[0];
 
754
                    if (dt.nodeType) {
 
755
                        if (dt.nodeType === 8) {
 
756
                            if (dt.nodeValue) {
 
757
                                if (dt.nodeValue.toLowerCase().indexOf('doctype') !== -1) {
 
758
                                    str = '<!' + dt.nodeValue + '>';
 
759
                                }
 
760
                            }
 
761
                        }
 
762
                    }
 
763
                }
 
764
            }
 
765
            return str;
 
766
        },
613
767
        /**
614
768
        * @static
615
769
        * @property DOC_TYPE
623
777
        * @description The meta-tag for Content-Type to add to the dynamic document
624
778
        * @type String
625
779
        */
626
 
        META: '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">',
627
 
        //META: '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>',
 
780
        //META: '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">',
 
781
        META: '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>',
628
782
        /**
629
783
        * @static
630
784
        * @property NAME
717
871
                }
718
872
            },
719
873
            /**
 
874
            * @attribute node
 
875
            * @description The Node instance of the iframe.
 
876
            * @type Node
 
877
            */
 
878
            node: {
 
879
                readOnly: true,
 
880
                value: null,
 
881
                getter: function() {
 
882
                    return this._iframe;
 
883
                }
 
884
            },
 
885
            /**
720
886
            * @attribute id
721
887
            * @description Set the id of the new Node. (optional)
722
888
            * @type String
732
898
                }
733
899
            },
734
900
            /**
 
901
            * @attribute linkedcss
 
902
            * @description An array of url's to external linked style sheets
 
903
            * @type String
 
904
            */
 
905
            linkedcss: {
 
906
                value: '',
 
907
                getter: '_getLinkedCSS',
 
908
                setter: '_setLinkedCSS'
 
909
            },
 
910
            /**
735
911
            * @attribute extracss
736
912
            * @description A string of CSS to add to the Head of the Editor
737
913
            * @type String
747
923
            */
748
924
            host: {
749
925
                value: false
 
926
            },
 
927
            /**
 
928
            * @attribute defaultblock
 
929
            * @description The default tag to use for block level items, defaults to: p
 
930
            * @type String
 
931
            */            
 
932
            defaultblock: {
 
933
                value: 'p'
750
934
            }
751
935
        }
752
936
    });
756
940
 
757
941
 
758
942
 
759
 
}, '3.2.0' ,{skinnable:false, requires:['base', 'node', 'selector-css3', 'substitute']});
 
943
}, '3.3.0' ,{requires:['base', 'node', 'selector-css3', 'substitute'], skinnable:false});