extjs/classic/theme-crisp/sass/example/render.js

   1 /*
   2  * This file is generated by Sencha Cmd and should NOT be edited. It will be replaced
   3  * during an upgrade.
   4  */
   5
   6 // This flag is checked by many Components to avoid compatibility warnings when
   7 // the code is running under the slicer
   8 Ext.slicer = true;
   9
  10 Ext.require([
  11     'Ext.layout.Context'
  12 ]);
  13
  14 Ext.theme = Ext.apply(Ext.theme || {}, {
  15     /**
  16      * The array of all component manifests. These objects have the following set of
  17      * properties recognized by the slicer:
  18      * @private
  19      */
  20     _manifest: [],
  21
  22     /**
  23      * The collection of shortcuts for a given alias (e.g., 'widget.panel'). This is an
  24      * object keyed by alias whose values are arrays of shortcut definitions.
  25      * @private
  26      */
  27     _shortcuts: {},
  28
  29     doRequire : function(xtype) {
  30         if(xtype.indexOf("widget.") != 0) {
  31             xtype = "widget." + xtype;
  32         }
  33         Ext.require([xtype]);
  34     },
  35
  36     /**
  37      * Adds one ore more component entries to the theme manifest. These entries will be
  38      * instantiated by the `Ext.theme.render` method when the page is ready.
  39      *
  40      * Usage:
  41      *
  42      *      Ext.theme.addManifest({
  43      *              xtype: 'widget.menu',
  44      *              folder: 'menu',
  45      *              delegate: '.x-menu-item-link',
  46      *              filename: 'menu-item-active',
  47      *              config: {
  48      *                  floating: false,
  49      *                  width: 200,
  50      *                  items: [{
  51      *                      text: 'test',
  52      *                      cls: 'x-menu-item-active'
  53      *                  }]
  54      *              }
  55      *          },{
  56      *              //...
  57      *          });
  58      *
  59      * @param manifest {Object} An object with type of component, slicing information and
  60      * component configuration. If this parameter is an array, each element is treated as
  61      * a manifest entry. Otherwise, each argument passed is treated as a manifest entry.
  62      *
  63      * @param manifest.xtype {String} The xtype ('grid') or alias ('widget.grid'). This
  64      * is used to specify the type of component to create as well as a potential key to
  65      * any `shortcuts` defined for the xtype.
  66      *
  67      * @param manifest.config {Object} The component configuration object. The properties
  68      * of this depend on the `xtype` of the component.
  69      *
  70      * @param [manifest.delegate] {String} The DOM query to use to select the element to
  71      * slice. The default is to slice the primary element of the component.
  72      *
  73      * @param [manifest.parentCls] An optional CSS class to add to the parent of the
  74      * component.
  75      *
  76      * @param [manifest.setup] {Function} An optional function to be called to initialize
  77      * the component.
  78      * @param manifest.setup.component {Ext.Component} The component instance
  79      * @param manifest.setup.container {Element} The component's container.
  80      *
  81      * @param [manifest.folder] {String} The folder in to which to produce image slices.
  82      * Only applies to Ext JS 4.1 (removed in 4.2).
  83      *
  84      * @param [manifest.filename] {String} The base filename for slices.
  85      * Only applies to Ext JS 4.1 (removed in 4.2).
  86      *
  87      * @param [manifest.reverse] {Boolean} True to position the slices for linear gradient
  88      * background at then opposite "end" (right or bottom) and apply the stretch to the
  89      * area before it (left or top). Only applies to Ext JS 4.1 (removed in 4.2).
  90      */
  91     addManifest: function (manifest) {
  92         var all = Ext.theme._manifest;
  93         var add = Ext.isArray(manifest) ? manifest : arguments;
  94
  95         if(manifest.xtype) {
  96             Ext.theme.doRequire(manifest.xtype);
  97         }
  98
  99         for (var i = 0, n = add.length; i < n; ++i) {
 100             if(add[i].xtype) {
 101                 Ext.theme.doRequire(add[i].xtype);
 102             }
 103             all.push(add[i]);
 104         }
 105     },
 106
 107     /**
 108      * Adds one or more shortcuts to the rendering process. A `shortcut` is an object that
 109      * looks the same as a `manifest` entry. These are combined by copying the properties
 110      * from the shortcut over those of the manifest entry. In basic terms:
 111      *
 112      *      var config = Ext.apply(Ext.apply({}, manfiest.config), shortcut.config);
 113      *      var entry = Ext.apply(Ext.apply({}, manfiest), shortcut);
 114      *      entry.config = config;
 115      *
 116      * This is not exactly the process, but the idea is the same. The difference is that
 117      * the `ui` of the manifest entry is used to replace any `"{ui}"` substrings found in
 118      * any string properties of the shortcut or its `config` object.
 119      *
 120      * Usage:
 121      *
 122      *      Ext.theme.addShortcuts({
 123      *          'widget.foo': [{
 124      *                  config: {
 125      *                  }
 126      *              },{
 127      *                  config: {
 128      *                  }
 129      *              }],
 130      *
 131      *          'widget.bar': [ ... ]
 132      *      });
 133      */
 134     addShortcuts: function (shortcuts) {
 135         var all = Ext.theme._shortcuts;
 136
 137         for (var key in shortcuts) {
 138
 139             var add = shortcuts[key];
 140             var xtype = Ext.theme.addWidget(key);
 141             var existing = all[xtype];
 142
 143             Ext.theme.doRequire(xtype);
 144             for(var i=0; i < add.length; i++) {
 145                 var config = add[i];
 146                 if(config.xtype) {
 147                     Ext.theme.doRequire(config.xtype);
 148                 }
 149             }
 150
 151             if (!existing) {
 152                 all[xtype] = existing = [];
 153             }
 154
 155             existing.push.apply(existing, add);
 156         }
 157     },
 158
 159     /**
 160      * This method ensures that a given string has the specified prefix (e.g., "widget.").
 161      * @private
 162      */
 163     addPrefix: function (prefix, s) {
 164         if (!s || (s.length > prefix.length && s.substring(0,prefix.length) === prefix)) {
 165             return s;
 166         }
 167         return prefix + s;
 168     },
 169
 170     /**
 171      * This method returns the given string with "widget." added to the front if that is
 172      * not already present.
 173      * @private
 174      */
 175     addWidget: function (str) {
 176         return Ext.theme.addPrefix('widget.', str);
 177     },
 178
 179     /**
 180      * This method accepts an manifest entry and a shortcut entry and returns the merged
 181      * version.
 182      * @private
 183      */
 184     applyShortcut: function (manifestEntry, shortcut) {
 185         var ui = manifestEntry.ui;
 186         var config = Ext.theme.copyProps({}, manifestEntry.config);
 187         var entry = Ext.theme.copyProps({}, manifestEntry);
 188
 189         if (ui && !config.ui) {
 190             config.ui = ui;
 191         }
 192         if (shortcut) {
 193             var tpl = { ui: ui };
 194             Ext.theme.copyProps(entry, shortcut, tpl);
 195             Ext.theme.copyProps(config, shortcut.config, tpl);
 196         }
 197
 198         entry.xtype = Ext.theme.addWidget(entry.xtype);
 199         entry.config = config; // both guys have "config" so smash merged one on now...
 200         return entry;
 201     },
 202
 203     /**
 204      * This method copies property from a `src` object to a `dest` object and reaplces
 205      * `"{foo}"` fragments of any string properties as defined in the `tpl` object.
 206      *
 207      *      var obj = Ext.theme.copyProps({}, {
 208      *                      foo: 'Hello-{ui}'
 209      *                  }, {
 210      *                      ui: 'World'
 211      *                  });
 212      *
 213      *      console.log('obj.foo: ' + obj.foo); // logs "Hello-World"
 214      *
 215      * @return {Object} The `dest` object or a new object (if `dest` was null).
 216      * @private
 217      */
 218     copyProps: function (dest, src, tpl) {
 219         var out = dest || {};
 220         var replacements = [];
 221         var token;
 222
 223         if (src) {
 224             if (tpl) {
 225                 for (token in tpl) {
 226                     replacements.push({
 227                         re: new RegExp('\\{' + token + '\\}', 'g'),
 228                         value: tpl[token]
 229                     });
 230                 }
 231             }
 232
 233             for (var key in src) {
 234                 var val = src[key];
 235                 if (tpl && typeof val === 'string') {
 236                     for (var i = 0; i < replacements.length; ++ i) {
 237                         val = val.replace(replacements[i].re, replacements[i].value);
 238                     }
 239                 }
 240                 out[key] = val;
 241             }
 242         }
 243
 244         return out;
 245     },
 246
 247     /**
 248      * Renders a component given its manifest and shortcut entries.
 249      * @private
 250      */
 251     renderWidget: function (manifestEntry, shortcut) {
 252         var entry = Ext.theme.applyShortcut(manifestEntry, shortcut);
 253         var config = entry.config;
 254         var widget = Ext.create(entry.xtype, config);
 255         var ct = Ext.fly(document.body).createChild({ cls: 'widget-container' });
 256
 257         Ext.theme.currentWidget = widget;
 258
 259         if (widget.floating === true) {
 260             widget.floating = { shadow: false };
 261         }
 262         if (widget.floating) {
 263             widget.focusOnToFront = false;
 264         }
 265
 266         if (entry.setup) {
 267             entry.setup.call(widget, widget, ct);
 268         } else {
 269             widget.render(ct);
 270             if (widget.floating) {
 271                 widget.showAt(0, 0);
 272                 ct.setHeight(widget.getHeight());
 273             }
 274         }
 275
 276         var el = widget.el;
 277         if (entry.delegate) {
 278             el = el.down(entry.delegate);
 279         }
 280
 281         el.addCls('x-slicer-target'); // this is what generateSlicerManifest looks for
 282
 283         if (entry.over) {
 284             widget.addOverCls();
 285         }
 286         if (config.parentCls) {
 287             el.parent().addCls(config.parentCls);
 288         }
 289
 290         if (Ext.theme.legacy) {
 291             // The 4.1 approach has some interesting extra pieces
 292             //
 293             var data = {};
 294             if (entry.reverse) {
 295                 data.reverse = true;
 296             }
 297             if (entry.filename) {
 298                 data.filename = entry.filename;
 299             }
 300             if (entry.folder) {
 301                 data.folder = entry.folder;
 302             }
 303             if (entry.offsets) {
 304                 data.offsets = entry.offsets;
 305             }
 306
 307             Ext.theme.setData(el.dom, data);
 308         }
 309
 310         Ext.theme.currentWidget = null;
 311     },
 312
 313     /**
 314      * Renders all of the components that have been added to the manifest.
 315      * @private
 316      */
 317     render: function () {
 318         console.log("rendering widgets...")
 319         var manifest = Ext.theme._manifest;
 320         var shortcuts = Ext.theme._shortcuts;
 321
 322         for (var k = 0, n = manifest ? manifest.length : 0; k < n; ++k) {
 323             var manifestEntry = manifest[k];
 324             var xtype = Ext.theme.addWidget(manifestEntry.xtype);
 325             var widgetShortcuts = xtype ? shortcuts[xtype] : null;
 326
 327             if (xtype && manifestEntry.ui && widgetShortcuts) {
 328                 for (var i = 0; i < widgetShortcuts.length; i++) {
 329                     Ext.theme.renderWidget(manifestEntry, widgetShortcuts[i]);
 330                 }
 331             } else {
 332                 Ext.theme.renderWidget(manifestEntry);
 333             }
 334         }
 335     },
 336
 337     /**
 338      * Renders all components (see `render`) and notifies the Slicer that things are ready.
 339      * @private
 340      */
 341     run: function () {
 342         var extjsVer = Ext.versions.extjs;
 343         var globalData = {};
 344
 345         if (Ext.layout.Context) {
 346             Ext.override(Ext.layout.Context, {
 347                 run: function () {
 348                     var ok = this.callParent(),
 349                         widget = Ext.theme.currentWidget;
 350                     if (!ok && widget) {
 351                         Ext.Error.raise("Layout run failed: " + widget.id);
 352                     }
 353                     return ok;
 354                 }
 355             });
 356         }
 357
 358         console.log("loading widget definitions...");
 359
 360         // Previous to Ext JS 4.2, themes and their manifests where defined differently.
 361         // So pass this along if we are hosting a pre-4.2 theme.
 362         //
 363         if (extjsVer && extjsVer.isLessThan(new Ext.Version("4.2"))) {
 364             globalData.format = "1.0"; // tell the Slicer tool
 365             Ext.theme.legacy = true; // not for our own data collection
 366
 367             // Check for the Cmd3.0/ExtJS4.1 variables:
 368             //
 369             if (Ext.manifest && Ext.manifest.widgets) {
 370                 Ext.theme.addManifest(Ext.manifest.widgets);
 371             }
 372             if (Ext.shortcuts) {
 373                 Ext.theme.addShortcuts(Ext.shortcuts);
 374             }
 375             if (Ext.userManifest && Ext.userManifest.widgets) {
 376                 Ext.theme.addManifest(Ext.userManifest.widgets);
 377             }
 378         }
 379
 380         Ext.theme.setData(document.body, globalData);
 381         Ext.theme.render();
 382         Ext.theme.generateSlicerManifest();
 383     },
 384
 385     generateSlicerManifest: function() {
 386         var now = new Date().getTime(),
 387             me = Ext.theme,
 388         // This function is defined by slicer.js (the framework-independent piece)
 389             gsm = window && window['generateSlicerManifest'],
 390             delta;
 391
 392         me.generateStart = me.generateStart || now;
 393         delta = now - me.generateStart;
 394
 395         if(gsm) {
 396             gsm();
 397         } else if(delta < (10 * 1000)){
 398             // allow the outer script wrapper a chance to inject the capture function
 399             // but stop trying after 10 seconds
 400             Ext.defer(Ext.theme.generateSlicerManifest, 100);
 401         }
 402     },
 403
 404     /**
 405      * Sets the `data-slicer` attribute to the JSON-encoded value of the provided data.
 406      * @private
 407      */
 408     setData: function (el, data) {
 409         if (data) {
 410             var json = Ext.encode(data);
 411             if (json !== '{}') {
 412                 el.setAttribute('data-slicer', json);
 413             }
 414         }
 415     },
 416
 417     /**
 418      * This used to be `loadExtStylesheet`.
 419      * @private
 420      */
 421     loadCss: function  (src, callback) {
 422         var xhr = new XMLHttpRequest();
 423
 424         xhr.open('GET', src);
 425
 426         xhr.onload = function() {
 427             var css = xhr.responseText,
 428                 head = document.getElementsByTagName('head')[0],
 429                 style = document.createElement('style');
 430
 431             // There's bugginess in the next gradient syntax in WebKit r84622
 432             // This might be fixed in a later WebKit, but for now we're going to
 433             // strip it out here since compass generates it.
 434             //
 435             // TODO: Upgrade to later WebKit revision
 436             css = css.replace(/background(-image)?: ?-webkit-linear-gradient(?:.*?);/g, '');
 437
 438             style.type = 'text/css';
 439             style.innerText = css;
 440
 441             head.appendChild(style);
 442             callback();
 443         };
 444
 445         xhr.send(null);
 446     }
 447 });
 448
 449 console.log("registering ready listener...");
 450 Ext.onReady(Ext.theme.run, Ext.theme);