Commit 4a8de7e4 authored by Ivan Tyagov's avatar Ivan Tyagov

Use a gagdet based layout.

parent a98cfc80
var ERP5={
bootstrap: function (root){
// load application gadget
ERP5.load(root);
},
load: function (root) {
// Load gadget layout by traversing DOM
gadget_list = root.find("[gadget]");
// Load siblings
gadget_list.each(function(i,v){ERP5.loadGadgetFromUrl($(this));});
},
loadGadgetFromUrl: function(gadget) {
// Load gadget's SPECs from URL
url = gadget.attr("gadget")
//console.log(url);
$.ajax({url:url,
success: function (data) {
ERP5.parse (data);
gadget.append(data);
// a gadget may contain sub gadgets
ERP5.load(gadget);
//console.log(url+ data);
gadget.find("a").each(
function(){
$(this).click(
function(){
alert("disabled link, do action on *same* page"); return false;})}
)
},
});
},
// XXX: finish below
save: function () {
// XXX: Save gadget layoyut by traversing DOM and using some kind of storage
console.log("XXX: save");
},
parse: function (data){
// XXX: Parse an HTML document and get out .js and .css
// XXX: load .css
// XXX: load .jss (see requirejs)
// $.ajax({url:"jquery-ui.js",
// type: "script"});
},
}
// init all when DOM is ready
$(document).ready(function() {
ERP5.bootstrap($("#application"));
});
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head id="www-sitename-com" data-template-set="html5-reset">
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="title" content="">
<meta name="description" content="">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<meta name="author" content="Your Name Here">
<meta name="Copyright" content="Copyright Your Name Here 2011. All Rights Reserved.">
<!-- Dublin Core Metadata : http://dublincore.org/ -->
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<!-- Mobile Viewport Fix
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<!-- Uncomment to use use thoughtfully!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
-->
<link rel="shortcut icon" href="_/img/favicon.ico">
<!-- This is the traditional favicon.
- size: 16x16 or 32x32
- transparency is OK
- see wikipedia for info on browser support: http://mky.be/favicon/ -->
<link rel="apple-touch-icon" href="_/img/apple-touch-icon.png">
<!-- The is the icon for iOS's Web Clip.
- size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
<!-- CSS: screen, mobile & print are all in the same file -->
<link rel="stylesheet" href="_/css/core.css">
<!-- all our JS is at the bottom of the page, except for Modernizr. -->
<script src="_/js/modernizr-1.7.min.js"></script>
<!--[if IE]><link rel="stylesheet" href="_/css/_patches/win-ie-all.css" media="all" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="_/css/_patches/win-ie7.css" media="all" /><![endif]-->
<!--[if lte IE 6]><script src="_/js/ieupgrade/warning.js"></script><script>window.onload=function(){e("_/js/ieupgrade/")}</script><![endif]-->
</head>
<body>
<!-- Gadget work start here -->
<div id="application" gadget="portal_gadgets/application/gadget.html"
gadget:property="{}">
<div id="top_menu" gadget="portal_gadgets/top_menu/gadget.html"
gadget:property="{}"></div>
<div id="header" gadget="portal_gadgets/header/gadget.html"
gadget:property="{}"></div>
<div id="content" gadget="portal_gadgets/content/gadget.html"
gadget:property="{}"></div>
<div id="footer" gadget="portal_gadgets/footer/gadget.html"
gadget:property="{}"></div>
</div>
<!-- EOF: Gadget work start here -->
<!-- here comes the javascript -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='_/js/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="_/js/jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<!-- this is where we put our custom functions -->
<script src="_/js/functions.js"></script>
<!-- Gadget library goes here -->
<script src="_/js/renderjs/render.js"></script>
<!-- Asynchronous google analytics; this is the official snippet.
Replace UA-XXXXXX-XX with your site's ID and uncomment to enable.
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->
</body>
</html>
\ No newline at end of file
<div id="sidebar" gadget="portal_gadgets/sidebar/gadget.html"
gadget:property="{}"></div>
<div id="feed" gadget="portal_gadgets/feed/gadget.html"
gadget:property="{}"></div>
<div id="secondary" gadget="portal_gadgets/secondary/gadget.html"
gadget:property="{}"></div>
\ No newline at end of file
<div class="feed">
<ul class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">path</a></li>
<li><a href="#">to</a></li>
<li>page</li>
</ul>
<br>
<article class="productdetail">
<h3>Bar Stud Stool (bar stools)</h3>
<div class="product-gallery tabber">
<ul>
<li><a href="#pic-1"><img src="img/product-dummy-small-1.jpg"></a></li>
<li><a href="#pic-2"><img src="img/product-dummy-small-2.jpg"></a></li>
</ul>
<div id="pic-1">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
<div id="pic-2">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
</div>
<div class="product-action">
<form action="#" method="post">
<ol>
<li>Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. </li>
<li><a href="#" class="more">more details &raquo;</a></li>
<li class="swatches">
select a color:
<ul>
<li><a href="#"><img src="img/swatch-1.jpg"></a></li>
<li><a href="#"><img src="img/swatch-2.jpg"></a></li>
<li><a href="#"><img src="img/swatch-3.jpg"></a></li>
</ul>
</li>
<li>
<strong class="price">299,99 &euro;</strong>
<span class="old">499,99 &euro;</span>
</li>
<li>
<label for="select-option-1">Option1:</label>
<select name="option-1" id="select-option-1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="select-option-2">Option2:</label>
<select name="option-2" id="select-option-2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="input-amount">Amount:</label>
<input type="text" name="amount" id="input-amount" value="1">
</li>
<li class="availability">
<label>Availability:</label>
<strong class="ok">In Stock</strong>
<!--<strong class="no">Out of Stock</strong>//-->
</li>
<li>
<button type="submit">Add to Cart</button>
</li>
</ol>
</form>
</div>
<ul class="tools">
<li><a href="#">zoom </a></li>
<li class="last"><a href="#">print this page</a></li>
</ul>
</article>
<article class="product-description">
<div class="tabber">
<ul>
<li><a href="#desc-1">Description</a></li>
<li class="current"><a href="#desc-2">Technical Details</a></li>
</ul>
<div id="desc-1">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
<div id="desc-2">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
</div>
</article>
</div>
\ No newline at end of file
<footer>
<p><small>Copyright &copy; 2011</p>
<ul>
<li><a href="#">YourCompany.com</a>&nbsp;|&nbsp;</li>
<li><a href="#">About Us</a>&nbsp;|&nbsp;</li>
<li><a href="#">Shipping</a>&nbsp;|&nbsp;</li>
<li><a href="#">Terms and Conditions</a>&nbsp;|&nbsp;</li>
<li><a href="#">Contact Us</a></li>
</ul>
</footer>
\ No newline at end of file
<header>
<h1><a href="/"><img src="img/logo.gif" alt="Default Online Shop"></a></h1>
<nav>
<ol>
<li><a href="">Brands</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Customer Service</a></li>
<li><a href="">User Page 1</a></li>
<li><a href="">User Page 2</a></li>
</ol>
</nav>
</header>
\ No newline at end of file
<div class="secondary">
<ol>
<li>
<form action="#" method="get">
<fieldset id="fieldset-quicksearch">
<ol>
<li>
<input type="text" name="q" id="input-quicksearch" value="Search Product">
<button type="submit">Go</button>
</li>
</ol>
</fieldset>
</form>
</li>
<li>
<a href="#"><img src="img/teaser-contact.jpg" alt="teaser-contact" width="170" height="82" /></a>
</li>
<li class="info">
<h4>Further Information</h4>
<ol>
<li><a href="#">Terms and Conditions</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Payment Options</a></li>
</ol>
</li>
<li>
<a href="#"><img src="img/teaser-small-dummy.jpg"></a>
</li>
</ol>
</div>
<div class="sidebar">
<ol>
<li><h3>Filter by Brand</h3>
<ol>
<li class="selected"><a href="#">Acuvue (12)</a></li>
<li><a href="#">Air Optix (1)</a></li>
<li><a href="#">Biofinity (34)</a></li>
<li><a href="#">Biomedics (2)</a></li>
<li><a href="#">Focus (3)</a></li>
<li><a href="#">Frequency (5)</a></li>
<li><a href="#">FreshLook (4)</a></li>
<li><a href="#">Proclear (5)</a></li>
<li><a href="#">PureVision (3)</a></li>
<li><a href="#">SofLens (3)</a></li>
</ol>
</li>
<li><h3>Filter by Color</h3>
<ol>
<li><a href="#">Red (1)</a></li>
<li><a href="#">Pink (12)</a></li>
<li><a href="#">Blue (21)</a></li>
<li><a href="#">Black (3)</a></li>
<li><a href="#">Grey (3)</a></li>
<li><a href="#">Ebony (5)</a></li>
<li><a href="#">White (1)</a></li>
<li><a href="#">Silver (5)</a></li>
<li><a href="#">Transparent (1)</a></li>
<li><a href="#">Invisible (0)</a></li>
</ol>
</li>
<li><h3>Filter by Manufacturer</h3>
<ol>
<li><a href="#">Siemens (23)</a></li>
<li><a href="#">Bosch (34)</a></li>
<li><a href="#">Unilever (2)</a></li>
<li><a href="#">Philips (2)</a></li>
<li><a href="#">Sony (0)</a></li>
<li><a href="#">Nintendo (2)</a></li>
<li><a href="#">Apple (4)</a></li>
<li><a href="#">Honda (1)</a></li>
</ol>
</li>
<li class="tags"><h3>Tags</h3>
<ol>
<li>
<a href="#" class="tc-1">Full</a>
<a href="#" class="tc-2">Product List</a>
<a href="#" class="tc-3">Weekly</a>
<a href="#" class="tc-4">Disposables</a>
<a href="#" class="tc-5">Tables</a>
<a href="#" class="tc-6">Toric</a>
<a href="#" class="tc-7">Lenses</a>
<a href="#" class="tc-8">Store</a>
<a href="#" class="tc-9">Brands</a>
<a href="#" class="tc-10">Accessories</a></li>
</ol>
</li>
</ol>
</div>
<div id="meta">
<div class="inner">
<ol id="languageselector">
<li>language:</li>
<li><a href="#">english</a>&nbsp;|&nbsp;</li>
<li><a href="#">francais</a>&nbsp;|&nbsp;</li>
<li><a href="#">nederland</a></li>
</ol>
<ol id="cart">
<li class="meta-1"><a href="#">my account</a></li>
<li class="meta-2"><a href="#"><img src="img/icon-cart.gif" alt="icon-cart" width="17" height="14" /> 22</a></li>
<li class="meta-3"><a href="#">view cart &raquo;</a></li>
</ol>
</div>
</div>
\ 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