Skip to content

O
officejs
Commit 407b819b authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

Add simple navigation between 2 pages.

parent acde619f
Hide whitespace changes
Inline Side-by-side
Showing with 566 additions and 170 deletions
src/gadget/about.html 0 → 100644
View file @ 407b819b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>About</title>
<!-- Jquery -->
<script src="../lib/jquery.js" type="text/javascript"></script>
<!-- renderjs -->
<script src="../lib/jschannel.js" type="text/javascript"></script>
<script src="../lib/renderjs.js" type="text/javascript"></script>
</head>
<body>
<div class="content_element content_element_fullscreen">
<h2>About OfficeJS</h2>
<p>
OfficeJS is designed by the ERP5 company Nexedi.
</p>
<h3>License</h3>
<p>
Under the GPL license.
</p>
<h3>See</h3>
<ul>
<li><a href="http://www.officejs.org/">OfficeJS</a></li>
<li><a href="http://www.renderjs.org/">RenderJS</a></li>
<li><a href="http://jquery.com/">jQuery</a></li>
<li><a href="http://jquerymobile.com/">jQuery Mobile</a></li>
<li><a href="http://fortawesome.github.io/Font-Awesome/"
>Font Awesome</a></li>
</ul>
</div>
</body>
</html>
src/gadget/contact.html 0 → 100644
View file @ 407b819b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Contact Us</title>
<!-- Jquery -->
<script src="../lib/jquery.js" type="text/javascript"></script>
<!-- renderjs -->
<script src="../lib/jschannel.js" type="text/javascript"></script>
<script src="../lib/renderjs.js" type="text/javascript"></script>
</head>
<body>
<div class="content_element content_element_fullscreen">
<h2>Contact us</h2>
<h3>E-mail</h3>
<p>
Jean-Paul Smets &lt;<a>jp@nexedi.com</a>&gt;
</p>
<h3>Address</h3>
<p>
Nexedi<br />
270, Boulevard Georges Clemenceau<br />
59700 MARCQ EN BAROEUL<br />
FRANCE
</p>
</div>
</body>
</html>
src/gadget/error.html 0 → 100644
View file @ 407b819b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Error</title>
<!-- Jquery -->
<script src="../lib/jquery.js" type="text/javascript"></script>
<!-- renderjs -->
<script src="../lib/jschannel.js" type="text/javascript"></script>
<script src="../lib/renderjs.js" type="text/javascript"></script>
</head>
<body>
<div class="content_element content_element_fullscreen">
<h2>:/</h2>
<p>
An error occured.
Try reloading or go back to the <a href="#">home</a>.
</p>
</div>
</body>
</html>
src/gadget/footer.html
View file @ 407b819b
......@@ -22,25 +22,6 @@
<body>
<!-- footer -->
<div data-role="navbar" class="navbar">
<ul>
<li>
<a href="#" data-rel="popup" data-icon="compass">Browse</a>
</li>
<li>
<a class="new_item" href="computer.html?mode=add"
data-rel="popup" data-icon="plus">
<span class="navbar_add">Add</span>/<span
class="navbar_clone">Clone</span>
</a>
</li>
<li><a class="remove_item" href="#" data-rel="popup"
data-icon="minus">Remove</a></li>
<li><a href="#" data-rel="popup" data-icon="cog">Action</a></li>
<li><a href="#" data-rel="popup"
data-icon="share">Import/Export</a></li>
</ul>
</div>
</body>
</html>
src/gadget/header.html deleted 100644 → 0
View file @ acde619f
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Headers</title>
<!-- TODO: gadget mobile meta -->
<!-- TODO: schema.org? -->
<!-- TODO: all JQM widgets should have enhanced markup vs
letting JQM enhance -->
<!-- normalize -->
<link rel="stylesheet" href="../lib/normalize.css">
<!-- JQM structure -->
<link rel="stylesheet" href="../lib/jquery.mobile.css">
<!-- JQM extensions -->
<link rel="stylesheet" href="../css/extensions.css">
<!-- fontawesome icons -->
<link rel="stylesheet" href="../css/fontawesome.css">
<!-- JQM custom themes (slapos-white, slapos-black, slapos-active) -->
<link rel="stylesheet" href="../css/themes.css">
<!-- generic CSS -->
<link rel="stylesheet" href="../css/css.css">
</head>
<body>
<div class="wrap left">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#menu_computers" data-rel="panel" data-role="button"
data-icon="reorder" class="responsive">Navigate</a>
<a href="#menu_computers" data-role="button">foo</a>
</div>
</div>
<h1 class="ui-title">Computers</h1>
<div class="wrap right">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#popup_computers" data-rel="popup" data-transition="pop"
data-position-to="window" data-role="button" data-icon="user"
class="responsive">Login</a>
<a href="#communicate_computers" data-rel="panel" data-role="button"
data-icon="comments" class="responsive">Communicate</a>
</div>
</div>
</body>
</html>
src/gadget/index.html
View file @ 407b819b
......@@ -22,6 +22,26 @@
<!-- generic CSS -->
<link rel="stylesheet" href="../css/css.css">
<!-- Jquery, JQM, JQM extensions -->
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.mobile.js" type="text/javascript"></script>
<script src="../lib/extensions.js" type="text/javascript"></script>
<!-- renderjs -->
<script src="../lib/jschannel.js" type="text/javascript"></script>
<script src="../lib/renderjs.js" type="text/javascript"></script>
<!-- route -->
<script src="../lib/route.js" type="text/javascript"></script>
<script src="../lib/url.js" type="text/javascript"></script>
<!-- JIO -->
<!--script src="../lib/md5.amd.js" type="text/javascript"></script>
<script src="../lib/jio.js" type="text/javascript"></script>
<script src="../lib/complex_queries.js" type="text/javascript"></script>
<script src="../lib/erp5storage.js" type="text/javascript"></script-->
<!-- custom script -->
<!--script src="../js/erp5_loader.js" type="text/javascript"></script-->
<script src="../js/gadget_index.js" type="text/javascript"></script>
</head>
<body>
......@@ -30,51 +50,124 @@
<!-- left panel -->
<div data-role="panel" id="menu_computers" data-theme="slapos-black"
class="panel" data-position="left" data-display="push">
<div class="panel_element panel_element_first panel_header">
<!--input type="search" data-role="button" value=""
placeholder="Search" class="panel_search" /-->
<a href="#menu" class="panel-close" data-role="button"
data-iconpos="notext" data-icon="remove"
data-rel="close">Close</a>
</div>
<!--div class="panel_element">
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">Modules</li>
<li class="listview_item listview_icon">
<a href="webpages.html">
<span
class="ui-li-icon ui-li-icon-custom ui-icon-file-alt ui-icon"
>&nbsp;</span>
<h3>Webpages</h3>
<p>Generated Webpages</p>
</a>
</li>
</ul>
</div-->
<div class="panel_element">
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">General</li>
<li class="listview_item listview_icon">
<a href="#/about/">
<span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
>&nbsp;</span>
<h3>About</h3>
</a>
</li>
<li class="listview_item listview_icon">
<a href="#/contact/">
<span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
>&nbsp;</span>
<h3>Contact Us</h3>
</a>
</li>
<!--li class="listview_item listview_icon">
<a href="">
<span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
>&nbsp;</span>
<h3>Software</h3>
</a>
</li>
<li class="listview_item listview_icon">
<a href="">
<span class="ui-li-icon ui-li-icon-custom ui-icon-book ui-icon"
>&nbsp;</span>
<h3>Documentation</h3>
</a>
</li>
<li class="listview_item listview_icon">
<a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-cloud-download ui-icon"
>&nbsp;</span><h3>Download</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-comments ui-icon"
>&nbsp;</span><h3>Forum</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-microphone ui-icon"
>&nbsp;</span><h3>Blog</h3></a></li-->
</ul>
</div>
<div class="panel_element" data-theme="slapos-black">
<ul class="list mini">
<li><a href="http://nexedi.com/">Nexedi &copy; 2013</a></li>
</ul>
</div>
</div>
<!-- gadget header -->
<div id="headergadget" data-role="header" data-position="fixed"></div>
<!-- popup login -->
<!--div data-role="popup" id="popup_computers"
data-overlay-theme="slapos-black" data-tolerance="30,30,30,30"
data-shadow="false" data-theme="slapos-white"
class="popup login ui-content">
</div-->
<div id="headergadget" data-role="header" data-position="fixed">
<div class="wrap left">
<div data-role="controlgroup" data-type="horizontal"
class="buttongroup">
<a href="#menu_computers" data-rel="panel" data-role="button"
data-icon="reorder" class="responsive">Navigate</a>
</div>
</div>
<h1 class="ui-title"></h1>
</div>
<!-- content -->
<div class="ui-content">
<div class="content_element content_element_fullscreen">
<table class="erp5_table" data-type="Computer">
<!-- dynamic -->
</table>
</div>
<!--table class="erp5_table" data-type="Computer">
</table-->
</div>
<!-- footer -->
<div id="footergadget" data-role="footer" data-position="fixed"></div>
<!-- IO manager -->
<div id="iogadget"></div>
<!-- Interactor -->
<div id="interactorgadget"></div>
<!-- right panel -->
<div data-role="panel" id="communicate_computers"
data-theme="slapos-black" class="panel" data-position="right"
data-display="push">
<!-- footer -->
<div id="footergadget" data-role="footer" data-position="fixed">
<div data-role="navbar" class="navbar">
<!--ul>
<li>
<a href="#" data-rel="popup" data-icon="compass">Browse</a>
</li>
<li>
<a class="new_item" href="computer.html?mode=add"
data-rel="popup" data-icon="plus">
<span class="navbar_add">Add</span>/<span
class="navbar_clone">Clone</span>
</a>
</li>
<li><a class="remove_item" href="#" data-rel="popup"
data-icon="minus">Remove</a></li>
<li><a href="#" data-rel="popup" data-icon="cog">Action</a></li>
<li><a href="#" data-rel="popup"
data-icon="share">Import/Export</a></li>
</ul-->
</div>
</div>
</div>
<!-- Jquery, JQM, JQM extensions -->
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery.mobile.js"></script>
<script src="../lib/extensions.js"></script>
<!-- renderjs -->
<script src="../lib/jschannel.js" type="text/javascript"></script>
<script src="../lib/renderjs.js"></script>
<!-- JIO -->
<script src="../lib/md5.amd.js"></script>
<script src="../lib/jio.js"></script>
<script src="../lib/complex_queries.js"></script>
<script src="../lib/erp5storage.js"></script>
<!-- custom script -->
<script src="../js/erp5_loader.js"></script>
<script src="../js/gadget_index.js"></script>
</body>
</html>
src/gadget/left_panel.html
View file @ 407b819b
......@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Nexedi ERP5 | Computers</title>
<title></title>
<!-- TODO: gadget mobile meta -->
<!-- TODO: schema.org? -->
......@@ -24,64 +24,6 @@
</head>
<body>
<div class="panel_element panel_element_first panel_header">
<input type="search" data-role="button" value=""
placeholder="Search" class="panel_search" />
<a href="#menu" class="panel-close" data-role="button"
data-iconpos="notext" data-icon="remove"
data-rel="close">Close</a>
</div>
<div class="panel_element">
<!-- gadget modules -->
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">Modules</li>
<li class="listview_item listview_icon">
<a href="webpages.html">
<span
class="ui-li-icon ui-li-icon-custom ui-icon-file-alt ui-icon"
>&nbsp;</span>
<h3>Webpages</h3>
<p>Generated Webpages</p>
</a>
</li>
</ul>
</div>
<div class="panel_element">
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">General</li>
<li class="listview_item listview_icon">
<a href="">
<span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
>&nbsp;</span>
<h3>Software</h3>
</a>
</li>
<li class="listview_item listview_icon">
<a href="">
<span class="ui-li-icon ui-li-icon-custom ui-icon-book ui-icon"
>&nbsp;</span>
<h3>Documentation</h3>
</a>
</li>
<li class="listview_item listview_icon">
<a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-cloud-download ui-icon"
>&nbsp;</span><h3>Download</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-comments ui-icon"
>&nbsp;</span><h3>Forum</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-microphone ui-icon"
>&nbsp;</span><h3>Blog</h3></a></li>
</ul>
</div>
<div class="panel_element" data-theme="slapos-black">
<ul class="list mini">
<li><a href="http://nexedi.com/">Nexedi &copy; 2013</a></li>
</ul>
</div>
</body>
</html>
src/js/gadget_index.js
View file @ 407b819b
......@@ -2,20 +2,72 @@
"use strict";
(function (window, $, rJS, undefined) {
var gk = rJS(window);
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
// Set the header title
gk.declareMethod('setTitle', function (title) {
var g = rJS(this);
g.context.find("#headergadget").find("h1").text(title);
$('title').text(title);
});
rJS(window).ready(function () {
var g = rJS(this),
footer_context = g.context.find("#footergadget").last(),
header_context = g.context.find("#headergadget").last(),
left_panel_context = g.context.find(".panel").first();
$.when(
g.declareGadget('./header.html', header_context),
g.declareGadget('./left_panel.html', left_panel_context),
g.declareGadget('./footer.html', footer_context)
).done(function (footer_gadget, header_gadget, left_panel_gadget) {
footer_gadget.context.enhanceWithin();
header_gadget.context.enhanceWithin();
left_panel_gadget.context.enhanceWithin();
body = g.context,
main_context = g.context.find('.ui-content').first();
function setTitle(title) {
return g.setTitle(title);
}
function initializeRoute() {
body
.route("add", "", 1)
.done(function () {
$.url.redirect('/about/');
});
body
.route("add", "/about/", 1)
.done(function () {
g.declareGadget('./about.html', main_context)
.done(function (main_gadget) {
main_gadget.context.enhanceWithin();
main_gadget.getTitle()
.then(setTitle);
});
});
body
.route("add", "/contact/", 1)
.done(function () {
g.declareGadget('./contact.html', main_context)
.done(function (main_gadget) {
main_gadget.context.enhanceWithin();
main_gadget.getTitle()
.then(setTitle);
});
});
}
// Trigger route change
initializeRoute();
$.url.onhashchange(function () {
body.route("go", $.url.getPath())
.fail(function () {
g.declareGadget('./error.html', main_context)
.done(function (main_gadget) {
main_gadget.context.enhanceWithin();
main_gadget.getTitle()
.then(setTitle);
initializeRoute();
});
});
});
});
......
src/lib/route.js 0 → 100644
View file @ 407b819b
/*global jQuery */
/*!
* route.js v1.0.0
*
* Copyright 2012, Romain Courteaud
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Date: Mon Jul 16 2012
*/
"use strict";
(function ($) {
$.extend({
StatelessDeferred: function () {
var doneList = $.Callbacks("memory"),
promise = {
done: doneList.add,
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function (obj) {
var i,
keys = ['done', 'promise'];
if (obj === undefined) {
obj = promise;
} else {
for (i = 0; i < keys.length; i += 1) {
obj[keys[i]] = promise[keys[i]];
}
}
return obj;
}
},
deferred = promise.promise({});
deferred.resolveWith = doneList.fireWith;
// All done!
return deferred;
}
});
var routes = [],
current_priority = 0,
methods = {
add: function (pattern, priority) {
var i = 0,
inserted = false,
length = routes.length,
dfr = $.StatelessDeferred(),
context = $(this),
escapepattern,
matchingpattern;
if (priority === undefined) {
priority = 0;
}
if (pattern !== undefined) {
// http://simonwillison.net/2006/Jan/20/escape/
escapepattern = pattern.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,
"\\$&");
matchingpattern = escapepattern
.replace(/<int:\w+>/g, "(\\d+)")
.replace(/<path:\w+>/g, "(.+)")
.replace(/<\w+>/g, "([^/]+)");
while (!inserted) {
if ((i === length) || (priority >= routes[i][2])) {
routes.splice(i, 0, [new RegExp('^' + matchingpattern + '$'),
dfr, priority, context]);
inserted = true;
} else {
i += 1;
}
}
}
return dfr.promise();
},
go: function (path, min_priority) {
var dfr = $.Deferred(),
context = $(this),
result;
if (min_priority === undefined) {
min_priority = 0;
}
setTimeout(function () {
var i = 0,
found = false,
slice_index = -1,
slice_priority = -1;
for (i = 0; i < routes.length; i += 1) {
if (slice_priority !== routes[i][2]) {
slice_priority = routes[i][2];
slice_index = i;
}
if (routes[i][2] < min_priority) {
break;
} else if (routes[i][0].test(path)) {
result = routes[i][0].exec(path);
dfr = routes[i][1];
context = routes[i][3];
current_priority = routes[i][2];
found = true;
break;
}
}
if (i === routes.length) {
slice_index = i;
}
if (slice_index > -1) {
routes = routes.slice(slice_index);
}
if (found) {
dfr.resolveWith(
context,
result.slice(1)
);
} else {
dfr.rejectWith(context);
}
});
return dfr.promise();
},
};
$.routereset = function () {
routes = [];
current_priority = 0;
};
$.routepriority = function () {
return current_priority;
};
$.fn.route = function (method) {
var result;
if (methods.hasOwnProperty(method)) {
result = methods[method].apply(
this,
Array.prototype.slice.call(arguments, 1)
);
} else {
$.error('Method ' + method +
' does not exist on jQuery.route');
}
return result;
};
}(jQuery));
src/lib/url.js 0 → 100644
View file @ 407b819b
/*global window, jQuery */
/*!
* url.js v1.0.0
*
* Copyright 2012, Romain Courteaud
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Date: Mon Jul 16 2012
*/
"use strict";
(function (window, $) {
var hashchangeinitialized = false,
previousurl,
currentcallback,
getRawHash = function () {
return window.location.toString().split('#')[1];
},
callbackwrapper = function () {
if (previousurl !== window.location.hash) {
previousurl = window.location.hash;
if (currentcallback !== undefined) {
currentcallback();
}
}
},
timeoutwrapper = function () {
callbackwrapper();
window.setTimeout(timeoutwrapper, 500);
};
function UrlHandler() {}
UrlHandler.prototype = {
'generateUrl': function (path, options) {
var pathhash,
hash = '#',
key;
if (path !== undefined) {
hash += encodeURIComponent(path);
}
hash = hash.replace(/%2F/g, '/');
pathhash = hash;
for (key in options) {
if (options.hasOwnProperty(key)) {
if (hash === pathhash) {
hash = hash + '?';
} else {
hash = hash + '&';
}
hash += encodeURIComponent(key) +
'=' + encodeURIComponent(options[key]);
}
}
return hash;
},
'go': function (path, options) {
window.location.hash = this.generateUrl(path, options);
},
'redirect': function (path, options) {
var host = window.location.protocol + '//' +
window.location.host +
window.location.pathname +
window.location.search;
window.location.replace(host + this.generateUrl(path, options));
// window.location.replace(window.location.href.replace(/#.*/, ""));
},
'getPath': function () {
var hash = getRawHash(),
result = '';
if (hash !== undefined) {
result = decodeURIComponent(hash.split('?')[0]);
}
return result;
},
'getOptions': function () {
var options = {},
hash = getRawHash(),
subhashes,
subhash,
index,
keyvalue;
if (hash !== undefined) {
hash = hash.split('?')[1];
if (hash !== undefined) {
subhashes = hash.split('&');
for (index in subhashes) {
if (subhashes.hasOwnProperty(index)) {
subhash = subhashes[index];
if (subhash !== '') {
keyvalue = subhash.split('=');
if (keyvalue.length === 2) {
options[decodeURIComponent(keyvalue[0])] =
decodeURIComponent(keyvalue[1]);
}
}
}
}
}
}
return options;
},
'onhashchange': function (callback) {
previousurl = undefined;
currentcallback = callback;
if (!hashchangeinitialized) {
if (window.onhashchange !== undefined) {
$(window).bind('hashchange', callbackwrapper);
window.setTimeout(callbackwrapper);
} else {
timeoutwrapper();
}
hashchangeinitialized = true;
}
},
};
// Expose to the global object
$.url = new UrlHandler();
}(window, jQuery));
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