Skip to content

R
renderjs
Commit 3ace094b authored by Sven Franck's avatar Sven Franck
Browse files
Options

new branch renderjs_require, example using gadgets as modules

parent 22c080ea
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 13023 additions and 19 deletions
examples/render_require/index.html 0 → 100644
View file @ 3ace094b
<!DOCTYPE html>
<html lang="en" class="render">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-main="js/main.js" type="text/javascript" src="js/libs/require/require.js"></script>
</head>
<body class="splash">
<div data-role="page" id="index">
<!-- data-gadget-module > load this gadget as a requireJS module -->
<div id="index" data-gadget="index" data-gadget-module="index" data-gadget="modules/index.html"></div>
</div>
</body>
</html>
\ No newline at end of file
examples/render_require/js/app.js 0 → 100644
View file @ 3ace094b
define([], function () {
var that = this;
that.init = function () {
console.log("application initialized");
};
return that;
});
\ No newline at end of file
examples/render_require/js/libs/jquery/jquery.js 0 → 100644
View file @ 3ace094b
This diff is collapsed.
examples/render_require/js/libs/require/require.js 0 → 100644
View file @ 3ace094b
This diff is collapsed.
examples/render_require/js/main.js 0 → 100644
View file @ 3ace094b
/*jslint browser: true, indent : 2, nomen : true, sloppy : true */
/*global require: false */
(function () {
"use strict";
require.config({
paths: {
app: '../js/app'
// requirejs plugin paths
, text: '../js/text'
, css: '../js/plugins/require-css/css'
, normalize: '../js/plugins/require-css/normalize'
// libs/plugin modules
, jquery: '../js/libs/jquery/jquery'
, renderjs: '../js/plugins/renderjs/renderjs'
// page modules
, index: '../modules/index/index'
}
, shim: {
'renderjs': { deps: ['jquery'], exports: 'RenderJs' }
}
, map: {
'*': {
'css': '../js/plugins/require-css/css'
}
}
});
// initialize application through app.js
require(['require', 'jquery', 'renderjs', 'text'],
function(require, $, App, RenderJs){
App.init();
}
);
}());
\ No newline at end of file
examples/render_require/js/plugins/renderjs/renderjs.js 0 → 100644
View file @ 3ace094b
This diff is collapsed.
require-css @ e83db48b
Subproject commit e83db48b214867870a9965d646d595304f78ed54
examples/render_require/js/text.js 0 → 100644
View file @ 3ace094b
This diff is collapsed.
examples/render_require/modules/index/index.css 0 → 100644
View file @ 3ace094b
.styleMe {border-color: red !important; border-width: 5px !important;}
\ No newline at end of file
examples/render_require/modules/index/index.html 0 → 100644
View file @ 3ace094b
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- recursive modules would go here, for example:
<div id="index_header"
data-gadget-module="header"
data-gadget="gadgets/header.html"
data-gadget-property='{
"self": {
"h1": ["data-i18n", "pages.titles.main"]
},
"translator": {
"a.setIcon": ["href", "#popup_index_lang"],
"div.all_popups": ["id","popup_index_lang"]
}
}'></div>
-->
<p class="styleMe">I'm the text from gadget index.html. Border will be added by module's JS-file. Border-color by this module's CSS file</p>
</body>
</html>
examples/render_require/modules/index/index.js 0 → 100644
View file @ 3ace094b
// 1. If a gadget is defined as a module, the module name plus ".js" will be
// loaded, in this case >>>> index.js <<<<
// 2. The module can have any number of dependencies, all loaded by requireJS
// => html file = original gadget. Loaded via !text plugin, !strip extracts
// contents of <body></body>
// => css file = css for this gadget, loaded via require-css !css plugin
// which also handles appending CSS to the document (vs plain insert)
// 3. Other types of dependencies could also be added (images, json...)
// 4. The advantage of using gadgets as modules is that they can be compiled
// by the r.js optimizer, so all files listed here will be available as
// a single module file, named index.js (uglyify, minified, HTML/CSS/JSON
// inlined, single HTTP request, automatic caching by requireJS).
define([
'text!../modules/index/index.html!strip'
, 'css!../modules/index/index'
],
function (source) {
var response = {};
// 1. CSS will be automatically added
// 2. source = gadget HTML (content of <body>, which we pass back to renderJS
response.data = source;
// 3. JS to be run on the gadget (all "gadget-y" functions work)
response.callback = function () {
var gadget = RenderJs.getSelfGadget();
gadget.dom.find(".styleMe").css("border","1px solid");
};
// return response object to renderJS
return response;
}
);
\ No newline at end of file
renderjs.js
View file @ 3ace094b
......@@ -104,7 +104,7 @@ var RenderJs = (function () {
});
},
setGadgetAndRecurse: function (gadget, data) {
setGadgetAndRecurse: function (gadget, data, callback) {
/*
* Set gadget data and recursively load it in case it holds another
* gadgets.
......@@ -112,6 +112,9 @@ var RenderJs = (function () {
// set current gadget as being loaded so gadget instance itself knows which gadget it is
setSelfGadget(RenderJs.GadgetIndex.getGadgetById(gadget.attr("id")));
gadget.append(data);
if (callback) {
callback();
}
// reset as no longer current gadget
setSelfGadget(undefined);
// a gadget may contain sub gadgets
......@@ -137,7 +140,8 @@ var RenderJs = (function () {
*/
var url, gadget_id, gadget_property, cacheable, cache_id,
i, gadget_index, gadget_index_id,
app_cache, data, gadget_js, is_update_gadget_data_running;
app_cache, data, gadget_js, is_update_gadget_data_running,
gadget_module;
url = gadget.attr("data-gadget");
gadget_id = gadget.attr("id");
......@@ -167,6 +171,7 @@ var RenderJs = (function () {
if (url !== undefined && url !== "") {
cacheable = gadget.attr("data-gadget-cacheable");
cache_id = gadget.attr("data-gadget-cache-id");
gadget_module = gadget.attr("data-gadget-module");
if (cacheable !== undefined && cache_id !== undefined) {
cacheable = Boolean(parseInt(cacheable, 10));
}
......@@ -177,23 +182,36 @@ var RenderJs = (function () {
app_cache = RenderJs.Cache.get(cache_id, undefined);
if (app_cache === undefined || app_cache === null) {
// not in cache so we pull from network and cache
$.ajax({
url: url,
yourCustomData: {
"gadget_id": gadget_id,
"cache_id": cache_id
},
success: function (data) {
cache_id = this.yourCustomData.cache_id;
gadget_id = this.yourCustomData.gadget_id;
RenderJs.Cache.set(cache_id, data);
RenderJs.GadgetIndex.getGadgetById(gadget_id).
setReady();
RenderJs.setGadgetAndRecurse(gadget, data);
RenderJs.checkAndTriggerReady();
RenderJs.updateGadgetData(gadget);
// require-handle - info see below
if (require !== undefined && gadget_module !== undefined) {
require([gadget_module], function (response) {
RenderJs.GadgetIndex.getGadgetById(gadget_id)
.setReady();
RenderJs.setGadgetAndRecurse(gadget, response.data,
response.callback);
RenderJs.checkAndTriggerReady();
RenderJs.updateGadgetData(gadget);
}
});
);
} else {
$.ajax({
url: url,
yourCustomData: {
"gadget_id": gadget_id,
"cache_id": cache_id
},
success: function (data) {
cache_id = this.yourCustomData.cache_id;
gadget_id = this.yourCustomData.gadget_id;
RenderJs.Cache.set(cache_id, data);
RenderJs.GadgetIndex.getGadgetById(gadget_id).
setReady();
RenderJs.setGadgetAndRecurse(gadget, data);
RenderJs.checkAndTriggerReady();
RenderJs.updateGadgetData(gadget);
}
});
}
} else {
// get from cache
data = app_cache;
......@@ -203,6 +221,27 @@ var RenderJs = (function () {
RenderJs.updateGadgetData(gadget);
}
} else {
// INFO: use requireJS to load gadgets as compilable modules
if (require !== undefined && gadget_module !== undefined) {
require([gadget_module], function (response) {
// this will require a module => specified path + .js(!)
// inside this module we can define all dependencies
// (css, js and json), managed by requireJS plugins
// the module returns an object called "response"
// response.data => HTML to be appended
// response.callback => callback for appended source code
// the callback is run from setGadgetAndRecurse - after
// the HTML has been appended to the DOM
RenderJs.GadgetIndex.getGadgetById(gadget_id)
.setReady();
RenderJs.setGadgetAndRecurse(gadget, response.data,
response.callback);
RenderJs.checkAndTriggerReady();
RenderJs.updateGadgetData(gadget);
});
} else {
// not to be cached
$.ajax({
url: url,
......@@ -216,6 +255,7 @@ var RenderJs = (function () {
RenderJs.updateGadgetData(gadget);
}
});
}
}
}
else {
......@@ -892,4 +932,4 @@ var RenderJs = (function () {
};
}())
};
}());
\ No newline at end of file
}());
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