Skip to content

E
ecommerce-ui
Commit 75741309 authored by Sven Franck's avatar Sven Franck
Browse files
Options

fixed loading gadgets via renderjs and requirejs in Chrome/Opera

parent 7beb14fb
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 188 deletions
js/app.js
View file @ 75741309
define([], function () {
define([
'overrides'
, 'jquery'
, 'jqm'
, 'polyfill'
, 'text'
, 'json'
, 'renderjs'
, 'i18next'
, 'css!../css/jquery-mobile/jquery-mobile.latest'
, 'css!../css/css'
, 'css!../css/normalize/normalize'
], function () {
"use strict";
var priv = {};
......@@ -9,7 +21,7 @@ define([], function () {
======================================================================== */
// document
priv.doc = $.mobile.document;
priv.doc = $.mobile.document || $(document);
/* ========================================================================
FLAGS
......@@ -72,7 +84,7 @@ define([], function () {
// ============================ RenderJs related ========================
//
// get elements inside a popup
// get elements inside a gadget
// @method getElements
// @param {object} gadget to search for recursive gadgets
//
......@@ -213,30 +225,29 @@ define([], function () {
// @param {object} gadget to be rendered
//
that.renderGadgets = function (gadget) {
var spec = {};
spec.gadget_id = gadget.dom.attr('id');
spec.gadget_props = gadget["state"];
spec.gadget_cleaned_id = spec.gadget_id.split("__").slice(-1)[0];
spec.propsToSet;
spec.fwd = [];
spec.i;
var gadget_id = gadget.dom.attr('id'),
gadget_parent = gadget.dom.parents("div[data-gadget]"),
gadget_props = gadget["state"],
gadget_cleaned_id = gadget_id.split("__").slice(-1)[0],
propsToSet,
fwd = [],
i;
// JSON property API
// "state": [
// {"gadget-id" {"element": ["method", "key/value", "value"] } },
// ...
// ]
if (spec.gadget_props !== undefined) {
for (spec.i = 0; spec.i < spec.gadget_props.length; spec.i += 1) {
spec.propsToSet = spec.gadget_props[spec.i][spec.gadget_cleaned_id];
if (gadget_props !== undefined) {
for (i = 0; i < gadget_props.length; i += 1) {
propsToSet = gadget_props[i][gadget_cleaned_id];
if (spec.propsToSet !== undefined) {
if (propsToSet !== undefined) {
// properties for this gadget
priv.setAttributesOnGadgetElements(gadget, spec.propsToSet);
priv.setAttributesOnGadgetElements(gadget, propsToSet);
} else {
// fwd to new data-gadget-property object
spec.fwd.push(spec.gadget_props[spec.i]);
fwd.push(gadget_props[i]);
}
}
// should we clean up?
......@@ -246,32 +257,36 @@ define([], function () {
priv.getElements(
gadget, "a[data-rel='popup'], a[data-rel='panel']"
).each(function () {
spec.href = this.getAttribute('href').replace("#", '');
spec.prefixedHref = priv.prefixElement(spec.href, spec.gadget_id);
var href = this.getAttribute('href').replace("#", ''),
prefixedHref = priv.prefixElement(href, gadget_id);
this.setAttribute("href", "#" + spec.prefixedHref);
this.setAttribute("href", "#" + prefixedHref);
// not nice... prevents panel getting prefix__prefix__gadget_id
// TODO: find better way
if (this.getAttribute("data-rel") !== "panel") {
document
.getElementById(spec.href)
.setAttribute("id", spec.prefixedHref);
.getElementById(href)
.setAttribute("id", prefixedHref);
}
});
priv.getElements(gadget, "div[data-gadget]").each(function () {
spec.id = this.getAttribute('id');
spec.prefixId = priv.prefixElement(spec.id, spec.gadget_id);
if (spec.fwd.length > 0) {
// beware: need to get children only to prevent selecting gadgets
// multiple levels deep
priv.getElements(gadget, "> div[data-gadget]").each(function () {
if (fwd.length > 0) {
this.setAttribute(
'data-gadget-property', JSON.stringify({
"state": spec.fwd
"state": fwd
})
);
}
this.setAttribute('id', spec.prefixId);
});
// update this gadgets id with the parent gadget id
if (gadget_parent.length > 0) {
gadget.dom.attr('id', gadget_parent.attr('id') + "__" + gadget_id);
}
};
// ========================================================================
......
js/main.js
View file @ 75741309
......@@ -65,8 +65,7 @@
, pagefooter: '../modules/pagefooter/pagefooter'
}
, shim: {
'overrides': { deps: ['jquery'] }
, 'jqm': { deps: ['jquery'], exports: 'mobile' }
'jqm': { deps: ['jquery'], exports: 'mobile' }
, 'jio': { deps: ['md5'] }
, 'complex_queries': { exports: 'complex_queries' }
, 'localstorage': { deps: ['jio', 'complex_queries'] }
......@@ -82,52 +81,51 @@
}
});
define(
[
'require'
, 'overrides'
, 'jquery'
, 'jqm'
, 'jio'
, 'polyfill'
, 'text'
, 'json'
, 'renderjs'
, 'i18next'
, 'localstorage'
, 'complex_queries'
, 'md5'
, 'css!../css/jquery-mobile/jquery-mobile.latest'
, 'css!../css/css'
, 'css!../css/normalize/normalize'
],
function (require) {
require(['app', 'config'], function(App, Config) {
var setup = new $.Deferred();
var spec = {};
spec.app = App;
spec.config = Config;
spec.setup = setup;
// expose App once everything is loaded
spec.setup.done(function(App, Config) {
window.App = App;
// expose configuration - settings
window.App.settings = Config.settings;
// expose configuration - storages
window.App.storage = Config.storage;
});
spec.configuration_setter = function (spec) {
spec.config.set(spec);
};
// initialize
App.initialize(spec);
require(['app', 'config'], function(App, Config) {
var setup = new $.Deferred();
var spec = {};
var i;
var def;
spec.app = App;
spec.config = Config;
spec.setup = setup;
// fallback for fast browsers...
spec.fallbackLoader = {
deferreds: [],
args: [],
};
// expose App once everything is loaded
spec.setup.done(function(App, Config) {
window.App = App;
// expose configuration - settings
window.App.settings = Config.settings;
// expose configuration - storages
window.App.storage = Config.storage;
for (i = 0; i < window.fallbackLoader.deferreds.length; i += 1) {
window.fallbackLoader.deferreds[i]
.resolve(window.fallbackLoader.args[i]);
}
// cleanup
delete window.fallbackLoader;
});
}
);
spec.configuration_setter = function (spec) {
spec.config.set(spec);
};
// expose fallback
window.fallbackLoader = spec.fallbackLoader;
// initialize
App.initialize(spec);
});
}());
\ No newline at end of file
js/overrides.js
View file @ 75741309
(function ($, document) {
define(['jquery'], function ($) {
"use strict";
// we will trigger manually
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
});
}(jQuery, document));
\ No newline at end of file
return undefined;
});
\ No newline at end of file
modules/config/config.js
View file @ 75741309
define([
"storage"
, "async"
'storage'
, 'async'
],
function (storage) {
"use strict";
......
modules/header/header.js
View file @ 75741309
......@@ -3,12 +3,33 @@ define([
, 'css!header'
],
function (source) {
var response = {};
var response = {}, def;
response.data = source;
response.callback = function (self) {
// prefix instance-ids, pass JSON
window.App.renderGadgets(self);
// TODO: this should be inside renderJs, although its application-specific
// but the problem with using async-render-require will be everything
// being loaded at the same time, so the user should have the opportunity
// to run his callback no matter where. Still not sure where to wait
// (app-init or render-init), but it would be nice if a renderjs application
// would allow for a first page load deferred on all gadgets until some
// flag is set. In rjs2, we will not have to set globals, but we will
// have the problem of trying to access methods published by other gadgets
// BEFORE they have been published, so it's pretty much the same thing.
if (window.App === undefined) {
def = new $.Deferred;
def.done(function(zzz) {
// prefix instance-ids, pass JSON
window.App.renderGadgets(zzz);
});
window.fallbackLoader.deferreds.push(def);
window.fallbackLoader.args.push(self);
} else {
// prefix instance-ids, pass JSON
window.App.renderGadgets(self);
}
};
// return response object
......
modules/index/index.html
View file @ 75741309
......@@ -26,100 +26,5 @@
}'>
</div>
<!-- content -->
<div data-role="content" class="ui-content">
<!-- teaser -->
<div id="teaser" data-gadget="modules/teaser/teaser.html" data-gadget-module="teaser"></div>
<!-- quicksearch -->
<div id="quicksearch"
class="searchbar_wrap"
data-gadget="modules/searchbar/searchbar.html"
data-gadget-module="searchbar"
data-gadget-property='{
"state": [
{
"quicksearch": {
"_elements": [
["ui-filter", "attr", "data-i18n", "[placeholder]quicksearch.browse"],
["ui-filter", "attr", "data-i18n-target", "input"]
],
"_config": {
"datasource": {"module": "storage"}
},
"_links": {
"self": {"href": ""},
"datasource": {"href": "modules/storage/storage.html#queryStorage?method=default"},
"show": {"href": "search.html#queryStorage?method=default"}
}
}
}
]
}'>
</div>
<!-- gallery widget -->
<div id="gallery" data-gadget="modules/gallery/gallery.html" data-gadget-module="gallery"></div>
<!-- top sellers -->
<div id="topsellers"
data-gadget="modules/items/items.html"
data-gadget-module="items"
data-gadget-property='{
"state": [
{
"topsellers": {
"_elements": [
["items_title", "attr", "data-i18n", "topsellers.info"],
["items_show", "attr", "data-i18n", "topsellers.show"],
["items_show", "attr", "href", "search.html?show=topsellers"]
],
"_config": {
"datasource": {"module": "storage", "pointer": "topsellers"}
},
"_links": {
"self": {"href": ""},
"datasource": {"href": "modules/storage/storage.html#queryStorage?method=topsellers"},
"show": {"href": "search.html#queryStorage?method=topsellers"}
}
}
}
]
}'>
</div>
<!-- top brands
<div id="topbrands"
data-gadget="modules/items/items.html"
data-gadget-module="items"
data-gadget-property='{
"state": [
{
"topbrands": {
"_elements": [
["items_title", "attr", "data-i18n", "topbrands.info"],
["items_show", "attr", "data-i18n", "topbrands.show"],
["items_show", "attr", "href", "search.html?show=topbrands"]
],
"_config": {
"datasource": {"module": "storage", "pointer": "topbrands"}
},
"_links": {
"self": {"href": ""},
"datasource": {"href": "modules/storage/storage.html#queryStorage?method=topbrands"},
"show": {"href": "search.html#queryStorage?method=topsellers"}
}
}
}
]
}'
></div>-->
<!-- seo story -->
<div id="seo" data-gadget="modules/seo/seo.html" data-gadget-module="seo"></div>
</div>
<!-- footer -->
<div id="footer" data-role="footer" data-position="fixed" data-gadget="modules/footer/footer.html" data-gadget-module="footer"></div>
</body>
</body>
</html>
\ No newline at end of file
modules/index/index.js
View file @ 75741309
......@@ -3,12 +3,24 @@ define([
, 'css!index'
],
function (source) {
var response = {};
var response = {}, def;
response.data = source;
response.callback = function (self) {
// prefix instance-ids, pass JSON
window.App.renderGadgets(self);
if (window.App === undefined) {
def = new $.Deferred;
def.done(function(gadget) {
// prefix instance-ids, pass JSON
window.App.renderGadgets(gadget);
});
window.fallbackLoader.deferreds.push(def);
window.fallbackLoader.args.push(self);
} else {
// prefix instance-ids, pass JSON
window.App.renderGadgets(self);
}
};
// return response object
......
modules/translate/translate.js
View file @ 75741309
......@@ -10,6 +10,7 @@ define([
var that = {};
var priv = {};
var def;
// ====================================================================
// ATTRIBUTES
......@@ -132,19 +133,36 @@ define([
});
});
priv.deferred_setup_translations = function (gadget) {
// ====================================================================
// PUBLISH METHODS
// ====================================================================
// TODO: remove once callable via link
window.App.translate = priv.translate;
// TODO: remove once callable via link
window.App.translate = priv.translate;
// prefix instance-ids, pass JSON, trigger("create")
window.App.renderGadgets(priv.gadget);
// prefix instance-ids, pass JSON, trigger("create")
window.App.renderGadgets(gadget);
// ====================================================================
// INITIALIZE
// ====================================================================
priv.initialize(window.App.settings.language_current);
priv.initialize(window.App.settings.language_current);
};
if (window.App === undefined) {
def = new $.Deferred;
def.done(function(gadget) {
// prefix instance-ids, pass JSON
priv.deferred_setup_translations(gadget)
});
window.fallbackLoader.deferreds.push(def);
window.fallbackLoader.args.push(priv.gadget);
} else {
// prefix instance-ids, pass JSON
priv.deferred_setup_translations(priv.gadget);
}
}
// return response object
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7