add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / sass / example / render.js

/*\r
 * This file is generated by Sencha Cmd and should NOT be edited. It will be replaced\r
 * during an upgrade.\r
 */\r
\r
Ext.require([\r
    'Ext.layout.Context'\r
]);\r
\r
Ext.theme = {\r
    /**\r
     * The array of all component manifests. These objects have the following set of\r
     * properties recognized by the slicer:\r
     * @private\r
     */\r
    _manifest: [],\r
\r
    /**\r
     * The collection of shortcuts for a given alias (e.g., 'widget.panel'). This is an\r
     * object keyed by alias whose values are arrays of shortcut definitions.\r
     * @private\r
     */\r
    _shortcuts: {},\r
\r
    doRequire : function(xtype) {\r
        if(xtype.indexOf("widget.") != 0) {\r
            xtype = "widget." + xtype;\r
        }\r
        Ext.require([xtype]);\r
    },\r
\r
    /**\r
     * Adds one ore more component entries to the theme manifest. These entries will be\r
     * instantiated by the `Ext.theme.render` method when the page is ready.\r
     *\r
     * Usage:\r
     *\r
     *      Ext.theme.addManifest({\r
     *              xtype: 'widget.menu',\r
     *              folder: 'menu',\r
     *              delegate: '.x-menu-item-link',\r
     *              filename: 'menu-item-active',\r
     *              config: {\r
     *                  floating: false,\r
     *                  width: 200,\r
     *                  items: [{\r
     *                      text: 'test',\r
     *                      cls: 'x-menu-item-active'\r
     *                  }]\r
     *              }\r
     *          },{\r
     *              //...\r
     *          });\r
     *\r
     * @param manifest {Object} An object with type of component, slicing information and\r
     * component configuration. If this parameter is an array, each element is treated as\r
     * a manifest entry. Otherwise, each argument passed is treated as a manifest entry.\r
     *\r
     * @param manifest.xtype {String} The xtype ('grid') or alias ('widget.grid'). This\r
     * is used to specify the type of component to create as well as a potential key to\r
     * any `shortcuts` defined for the xtype.\r
     *\r
     * @param manifest.config {Object} The component configuration object. The properties\r
     * of this depend on the `xtype` of the component.\r
     *\r
     * @param [manifest.delegate] {String} The DOM query to use to select the element to\r
     * slice. The default is to slice the primary element of the component.\r
     *\r
     * @param [manifest.parentCls] An optional CSS class to add to the parent of the\r
     * component.\r
     *\r
     * @param [manifest.setup] {Function} An optional function to be called to initialize\r
     * the component.\r
     * @param manifest.setup.component {Ext.Component} The component instance\r
     * @param manifest.setup.container {Element} The component's container.\r
     *\r
     * @param [manifest.folder] {String} The folder in to which to produce image slices.\r
     * Only applies to Ext JS 4.1 (removed in 4.2).\r
     *\r
     * @param [manifest.filename] {String} The base filename for slices.\r
     * Only applies to Ext JS 4.1 (removed in 4.2).\r
     *\r
     * @param [manifest.reverse] {Boolean} True to position the slices for linear gradient\r
     * background at then opposite "end" (right or bottom) and apply the stretch to the\r
     * area before it (left or top). Only applies to Ext JS 4.1 (removed in 4.2).\r
     */\r
    addManifest: function (manifest) {\r
        var all = Ext.theme._manifest;\r
        var add = Ext.isArray(manifest) ? manifest : arguments;\r
\r
        if(manifest.xtype) {\r
            Ext.theme.doRequire(manifest.xtype);\r
        }\r
\r
        for (var i = 0, n = add.length; i < n; ++i) {\r
            if(add[i].xtype) {\r
                Ext.theme.doRequire(add[i].xtype);\r
            }\r
            all.push(add[i]);\r
        }\r
    },\r
\r
    /**\r
     * Adds one or more shortcuts to the rendering process. A `shortcut` is an object that\r
     * looks the same as a `manifest` entry. These are combined by copying the properties\r
     * from the shortcut over those of the manifest entry. In basic terms:\r
     *\r
     *      var config = Ext.apply(Ext.apply({}, manfiest.config), shortcut.config);\r
     *      var entry = Ext.apply(Ext.apply({}, manfiest), shortcut);\r
     *      entry.config = config;\r
     *\r
     * This is not exactly the process, but the idea is the same. The difference is that\r
     * the `ui` of the manifest entry is used to replace any `"{ui}"` substrings found in\r
     * any string properties of the shortcut or its `config` object.\r
     *\r
     * Usage:\r
     *\r
     *      Ext.theme.addShortcuts({\r
     *          'widget.foo': [{\r
     *                  config: {\r
     *                  }\r
     *              },{\r
     *                  config: {\r
     *                  }\r
     *              }],\r
     *\r
     *          'widget.bar': [ ... ]\r
     *      });\r
     */\r
    addShortcuts: function (shortcuts) {\r
        var all = Ext.theme._shortcuts;\r
\r
        for (var key in shortcuts) {\r
\r
            var add = shortcuts[key];\r
            var xtype = Ext.theme.addWidget(key);\r
            var existing = all[xtype];\r
\r
            Ext.theme.doRequire(xtype);\r
            for(var i=0; i < add.length; i++) {\r
                var config = add[i];\r
                if(config.xtype) {\r
                    Ext.theme.doRequire(config.xtype);\r
                }\r
            }\r
\r
            if (!existing) {\r
                all[xtype] = existing = [];\r
            }\r
\r
            existing.push.apply(existing, add);\r
        }\r
    },\r
\r
    /**\r
     * This method ensures that a given string has the specified prefix (e.g., "widget.").\r
     * @private\r
     */\r
    addPrefix: function (prefix, s) {\r
        if (!s || (s.length > prefix.length && s.substring(0,prefix.length) === prefix)) {\r
            return s;\r
        }\r
        return prefix + s;\r
    },\r
\r
    /**\r
     * This method returns the given string with "widget." added to the front if that is\r
     * not already present.\r
     * @private\r
     */\r
    addWidget: function (str) {\r
        return Ext.theme.addPrefix('widget.', str);\r
    },\r
\r
    /**\r
     * This method accepts an manifest entry and a shortcut entry and returns the merged\r
     * version.\r
     * @private\r
     */\r
    applyShortcut: function (manifestEntry, shortcut) {\r
        var ui = manifestEntry.ui;\r
        var config = Ext.theme.copyProps({}, manifestEntry.config);\r
        var entry = Ext.theme.copyProps({}, manifestEntry);\r
\r
        if (ui && !config.ui) {\r
            config.ui = ui;\r
        }\r
        if (shortcut) {\r
            var tpl = { ui: ui };\r
            Ext.theme.copyProps(entry, shortcut, tpl);\r
            Ext.theme.copyProps(config, shortcut.config, tpl);\r
        }\r
\r
        entry.xtype = Ext.theme.addWidget(entry.xtype);\r
        entry.config = config; // both guys have "config" so smash merged one on now...\r
        return entry;\r
    },\r
\r
    /**\r
     * This method copies property from a `src` object to a `dest` object and reaplces\r
     * `"{foo}"` fragments of any string properties as defined in the `tpl` object.\r
     *\r
     *      var obj = Ext.theme.copyProps({}, {\r
     *                      foo: 'Hello-{ui}'\r
     *                  }, {\r
     *                      ui: 'World'\r
     *                  });\r
     *\r
     *      console.log('obj.foo: ' + obj.foo); // logs "Hello-World"\r
     *\r
     * @return {Object} The `dest` object or a new object (if `dest` was null).\r
     * @private\r
     */\r
    copyProps: function (dest, src, tpl) {\r
        var out = dest || {};\r
        var replacements = [];\r
        var token;\r
\r
        if (src) {\r
            if (tpl) {\r
                for (token in tpl) {\r
                    replacements.push({\r
                        re: new RegExp('\\{' + token + '\\}', 'g'),\r
                        value: tpl[token]\r
                    });\r
                }\r
            }\r
\r
            for (var key in src) {\r
                var val = src[key];\r
                if (tpl && typeof val === 'string') {\r
                    for (var i = 0; i < replacements.length; ++ i) {\r
                        val = val.replace(replacements[i].re, replacements[i].value);\r
                    }\r
                }\r
                out[key] = val;\r
            }\r
        }\r
\r
        return out;\r
    },\r
\r
    /**\r
     * Renders a component given its manifest and shortcut entries.\r
     * @private\r
     */\r
    renderWidget: function (manifestEntry, shortcut) {\r
        var entry = Ext.theme.applyShortcut(manifestEntry, shortcut);\r
        var config = entry.config;\r
        var widget = Ext.create(entry.xtype, config);\r
        var ct = Ext.fly(document.body).createChild({ cls: 'widget-container' });\r
\r
        Ext.theme.currentWidget = widget;\r
\r
        if (widget.floating === true) {\r
            widget.floating = { shadow: false };\r
        }\r
        if (widget.floating) {\r
            widget.focusOnToFront = false;\r
        }\r
\r
        if (entry.setup) {\r
            entry.setup.call(widget, widget, ct);\r
        } else {\r
            widget.render(ct);\r
            if (widget.floating) {\r
                widget.showAt(0, 0);\r
                ct.setHeight(widget.getHeight());\r
            }\r
        }\r
\r
        var el = widget.el;\r
        if (entry.delegate) {\r
            el = el.down(entry.delegate);\r
        }\r
\r
        el.addCls('x-slicer-target'); // this is what generateSlicerManifest looks for\r
\r
        if (entry.over) {\r
            widget.addOverCls();\r
        }\r
        if (config.parentCls) {\r
            el.parent().addCls(config.parentCls);\r
        }\r
\r
        if (Ext.theme.legacy) {\r
            // The 4.1 approach has some interesting extra pieces\r
            //\r
            var data = {};\r
            if (entry.reverse) {\r
                data.reverse = true;\r
            }\r
            if (entry.filename) {\r
                data.filename = entry.filename;\r
            }\r
            if (entry.folder) {\r
                data.folder = entry.folder;\r
            }\r
            if (entry.offsets) {\r
                data.offsets = entry.offsets;\r
            }\r
\r
            Ext.theme.setData(el.dom, data);\r
        }\r
\r
        Ext.theme.currentWidget = null;\r
    },\r
\r
    /**\r
     * Renders all of the components that have been added to the manifest.\r
     * @private\r
     */\r
    render: function () {\r
        console.log("rendering widgets...")\r
        var manifest = Ext.theme._manifest;\r
        var shortcuts = Ext.theme._shortcuts;\r
\r
        for (var k = 0, n = manifest ? manifest.length : 0; k < n; ++k) {\r
            var manifestEntry = manifest[k];\r
            var xtype = Ext.theme.addWidget(manifestEntry.xtype);\r
            var widgetShortcuts = xtype ? shortcuts[xtype] : null;\r
\r
            if (xtype && manifestEntry.ui && widgetShortcuts) {\r
                for (var i = 0; i < widgetShortcuts.length; i++) {\r
                    Ext.theme.renderWidget(manifestEntry, widgetShortcuts[i]);\r
                }\r
            } else {\r
                Ext.theme.renderWidget(manifestEntry);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Renders all components (see `render`) and notifies the Slicer that things are ready.\r
     * @private\r
     */\r
    run: function () {\r
        var extjsVer = Ext.versions.extjs;\r
        var globalData = {};\r
\r
        if (Ext.layout.Context) {\r
            Ext.override(Ext.layout.Context, {\r
                run: function () {\r
                    var ok = this.callParent(),\r
                        widget = Ext.theme.currentWidget;\r
                    if (!ok && widget) {\r
                        Ext.Error.raise("Layout run failed: " + widget.id);\r
                    }\r
                    return ok;\r
                }\r
            });\r
        }\r
\r
        console.log("loading widget definitions...");\r
\r
        // Previous to Ext JS 4.2, themes and their manifests where defined differently.\r
        // So pass this along if we are hosting a pre-4.2 theme.\r
        //\r
        if (extjsVer && extjsVer.isLessThan(new Ext.Version("4.2"))) {\r
            globalData.format = "1.0"; // tell the Slicer tool\r
            Ext.theme.legacy = true; // not for our own data collection\r
\r
            // Check for the Cmd3.0/ExtJS4.1 variables:\r
            //\r
            if (Ext.manifest && Ext.manifest.widgets) {\r
                Ext.theme.addManifest(Ext.manifest.widgets);\r
            }\r
            if (Ext.shortcuts) {\r
                Ext.theme.addShortcuts(Ext.shortcuts);\r
            }\r
            if (Ext.userManifest && Ext.userManifest.widgets) {\r
                Ext.theme.addManifest(Ext.userManifest.widgets);\r
            }\r
        }\r
\r
        Ext.theme.setData(document.body, globalData);\r
        Ext.theme.render();\r
        Ext.theme.generateSlicerManifest();\r
    },\r
\r
    generateSlicerManifest: function() {\r
        var now = new Date().getTime(),\r
            me = Ext.theme,\r
        // This function is defined by slicer.js (the framework-independent piece)\r
            gsm = window && window['generateSlicerManifest'],\r
            delta;\r
\r
        me.generateStart = me.generateStart || now;\r
        delta = now - me.generateStart;\r
\r
        if(gsm) {\r
            gsm();\r
        } else if(delta < (10 * 1000)){\r
            // allow the outer script wrapper a chance to inject the capture function\r
            // but stop trying after 10 seconds\r
            Ext.defer(Ext.theme.generateSlicerManifest, 100);\r
        }\r
    },\r
\r
    /**\r
     * Sets the `data-slicer` attribute to the JSON-encoded value of the provided data.\r
     * @private\r
     */\r
    setData: function (el, data) {\r
        if (data) {\r
            var json = Ext.encode(data);\r
            if (json !== '{}') {\r
                el.setAttribute('data-slicer', json);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * This used to be `loadExtStylesheet`.\r
     * @private\r
     */\r
    loadCss: function  (src, callback) {\r
        var xhr = new XMLHttpRequest();\r
\r
        xhr.open('GET', src);\r
\r
        xhr.onload = function() {\r
            var css = xhr.responseText,\r
                head = document.getElementsByTagName('head')[0],\r
                style = document.createElement('style');\r
\r
            // There's bugginess in the next gradient syntax in WebKit r84622\r
            // This might be fixed in a later WebKit, but for now we're going to\r
            // strip it out here since compass generates it.\r
            //\r
            // TODO: Upgrade to later WebKit revision\r
            css = css.replace(/background(-image)?: ?-webkit-linear-gradient(?:.*?);/g, '');\r
\r
            style.type = 'text/css';\r
            style.innerText = css;\r
\r
            head.appendChild(style);\r
            callback();\r
        };\r
\r
        xhr.send(null);\r
    }\r
};\r
\r
console.log("registering ready listener...");\r
Ext.onReady(Ext.theme.run, Ext.theme);\r