Skip to content

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

made gallery gadget work, updated all related files

parent c624472c
Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 48 deletions
js/app.js
View file @ b69f46dd
......@@ -2,6 +2,7 @@ define([
'overrides'
, 'jquery'
, 'jqm'
, 'extensions'
, 'polyfill'
, 'text'
, 'json'
......@@ -143,21 +144,34 @@ define([
// @method initializeRenderJs
//
priv.initializeRenderJs = function () {
var setFalse = false;
var root, rootId, setFalse = false, rootUndefined = true;
// TODO: try to live without all bindings... in renderjs 2
priv.doc.on('pagebeforeshow', 'div.ui-page', function () {
var page = $(this);
// need to call this every time a page is shown...
RenderJs.init(page);
var page = $(this),
pageId = page.attr('id');
RenderJs.bindReady(function () {
var gadget = RenderJs.GadgetIndex.getGadgetById(page.attr('id'));
if (gadget.isEnhanced() === false) {
// page.trigger("create");
gadget.setEnhanced(true);
if (rootUndefined) {
root = RenderJs.GadgetIndex.getRootGadget();
if (root) {
rootId = root.id;
rootUndefined = false;
}
});
}
// need to call this every time a page is shown...
// unless we go to the root page, which is always in the GadgetIndex
if (rootId !== pageId) {
RenderJs.init(page);
RenderJs.bindReady(function () {
var gadget = RenderJs.GadgetIndex.getGadgetById(page.attr('id'));
if (gadget.isEnhanced() === false) {
//page.trigger("create");
gadget.setEnhanced(true);
}
});
}
})
.on('pagebeforehide', 'div.ui-page', function(e, data) {
// pagebeforehide triggers before remove and data includes the new
......
js/main.js
View file @ b69f46dd
......@@ -7,10 +7,14 @@
waitSeconds : (IS_LOCAL? 10 : 45)
, paths: {
// requireJs
// core
app: '../js/app'
, polyfill: '../js/polyfill'
, overrides: '../js/overrides'
, utilities: '../js/utilities'
, extensions: '../js/extensions'
// requireJs
, almond: '../js/libs/require/almond'
, text: '../js/libs/require/text'
, css: '../js/plugins/require-css/require-css'
......@@ -51,7 +55,7 @@
, payment: '../modules/payment/payment'
, refine: '../modules/refine/refine'
, register: '../modules/register/register'
, search: '../modules/search/search'
, products: '../modules/products/products'
, searchbar: '../modules/searchbar/searchbar'
, seo: '../modules/seo/seo'
, shipment: '../modules/shipment/shipment'
......
js/utilities.js 0 → 100644
View file @ b69f46dd
define([
'app'
], function (App) {
"use strict";
// this module provides generic methods usable across all gadgets/modules
var that = {};
// Javascript closest()
that.closest = function (elem, selector) {
var matchesSelector = elem.matches ||
elem.webkitMatchesSelector ||
elem.mozMatchesSelector ||
elem.msMatchesSelector;
while (elem) {
if (matchesSelector.bind(elem)(selector)) {
return elem;
} else {
elem = elem.parentNode;
}
}
return false;
};
App.util = that;
return undefined;
}
);
\ No newline at end of file
modules/config/config.js
View file @ b69f46dd
define([
'app'
, 'storage'
, 'utilities'
, 'async'
],
function (App, storage) {
......
modules/details/details.html
View file @ b69f46dd
......@@ -7,35 +7,60 @@
<body>
<!-- header -->
<div id="header"
data-role="header"
data-theme="a"
data-position="fixed"
data-gadget="modules/header/header.html"
data-gadget-module="header"
data-gadget-property='{
"state": [
{
"header": {
"_elements": [
["header_title", "attr", "data-i18n", "details.title"]
]
}
data-role="header"
data-theme="a"
data-position="fixed"
data-gadget="modules/header/header.html"
data-gadget-module="header"
data-gadget-property='{
"state": [
{
"header": {
"_elements": [
["header_title", "attr", "data-i18n", "details.title"]
]
}
]
}'
></div>
}
]
}'>
</div>
<!-- content -->
<div data-role="content" class="ui-content">
<!-- browse items -->
<div id="browser" data-gadget="modules/browser/browser.html" data-gadget-module="browser"></div>
<div id="browser"
data-gadget="modules/browser/browser.html"
data-gadget-module="browser">
</div>
<!-- gallery with zoom -->
<div id="media" data-gadget="modules/media/media.html" data-gadget-module="media"></div>
<div id="media"
data-gadget="modules/media/media.html"
data-gadget-module="media">
</div>
<!-- item info -->
<div id="item" data-gadget="modules/item/item.html" data-gadget-module="item"></div>
<div id="item"
data-gadget="modules/item/item.html"
data-gadget-module="item">
</div>
<!-- item details -->
<div id="description" data-gadget="modules/description/description.html" data-gadget-module="description">
<div id="description"
data-gadget="modules/description/description.html"
data-gadget-module="description">
</div>
</div>
<!-- footer -->
<div id="footer" data-role="footer" data-position="fixed" data-gadget="modules/footer/footer.html" data-gadget-module="footer"></div>
<div id="footer"
data-role="footer"
data-position="fixed"
data-gadget="modules/footer/footer.html"
data-gadget-module="footer">
</div>
</body>
</html>
\ No newline at end of file
modules/gallery/gallery.html
View file @ b69f46dd
......@@ -5,12 +5,27 @@
<title>Gallery Module</title>
</head>
<body>
<div data-role="fieldcontain" class="gallery_wrap">
<!-- gallery -->
<!--
<div class="gallery_wrap">
<ul data-role="carousel" data-inset="true" class="ui-responsive tester" data-captions="true" data-transition="fade">
<li><a href="#"><img src="img/1.jpg" alt="" /><h3>Hello 1 Caption</h3></a></li>
<li><a href="#"><img src="img/2.jpg" alt="" /><h3>Hello 2 Caption</h3></a></li>
<li><a href="#"><img src="img/3.jpg" alt="" /><h3>Hello 3 Caption</h3></a></li>
</ul>
</div>
<ul data-role='carousel' data-inset='true' class='ui-responsive tester' data-captions='true' data-transition='slide'>
<li>
<img src='http://www.weinparis.com/en/product_module/186/15/default_image?format=jpg&display=medium' alt='blue' />
<h3 class='translate gallery_header' data-i18n='custom.colors.blue'></h3>
</li>
<li>
<img src='http://www.weinparis.com/en/product_module/186/15/1?format=jpg&display=medium' alt='blue' />
<h3 class='translate gallery_header' data-i18n='custom.colors.blue'></h3>
</li>
</ul>
-->
</body>
</html>
\ No newline at end of file
modules/gallery/gallery.js
View file @ b69f46dd
......@@ -4,10 +4,158 @@ define([
, 'css!gallery'
],
function (App, source) {
var response = {};
var that = {};
var priv = {};
response.data = source;
response.callback = function (self) {
priv.generateGallery = function (response) {
// TODO: we will generate two listviews now, until the gallery widget
// also has a thumbnail option
// TODO: allow the gallery to exist without links...
// TODO: zoom is missing, this should also be a feature of gallery
// ala photoswipe
var i, j, item, img, gallery, thumbnails, str, obj;
gallery = "<div class='gallery_wrap'><ul data-role='carousel' " +
"data-inset='true' class='" +
"ui-responsive tester' data-captions='true' data-transition='" +
"slide'>";
thumbnails = "<div class='gallery_thumbnails'><ul data-role='" +
"listview' data-inset='true' class='gallery_thumbnail_wrapper'>";
if (response.items) {
for (i = 0; i < response.items.length; i += 1) {
obj = response.items[i];
gallery += "<li><a href='" + obj.href + "'><img src='" + obj.src +
"' alt='" + obj.caption + "' />" +
"<h3 class='translate gallery_header' data-i18n='" +
obj.i18n + "'>" + obj.caption + "</h3></a></li>";
}
gallery += "</ul></div>";
return str = gallery;
}
// for every variant (colors, size?, foo?)
// TODO: declare a variant that carries images in products JSON!
for (i = 0; i < response.dimensions[0].vars.length; i += 1) {
item = response.dimensions[0].vars[i];
// add elements to container only if name is provided
if (item.name !== undefined) {
// TODO: allow to pick color to display first or most-sold or...
if (i === 0) {
for (j = 0; j < item.media.img.length; j += 1) {
img = item.media.img[j];
// TODO: add zoom/photoswipe later!
gallery += "<li><a href='#'><img src='" + response.media +
img[shortcut] + size + "' alt='" + item.name + "' />" +
"<h3 class='translate gallery_header' data-i18n='" +
item.i18n + "'></h3></a></li>";
}
}
gallery += "</ul></div>";
}
// thumbnails - click on link should trigger the display method
thumbnails += "<li data-icon='false'><a href='#' class='" +
"display_item'><img src='" + response.media + item.media.img[0]["t"] + "' alt='"
+ item.name + "' /><h3 class='translate gallery_header' data-i18n='" +
item.i18n + "'></h3></li>";
}
thumbnails += "</ul></div>";
return str = gallery + thumbnails;
};
priv.generateError = function () {
return "<p>Foo</p>";
};
// generate items to display
priv.generateItems = function (params) {
var markup, spec, response;
id = params.gadget.dom.attr('id').split("__").splice(-1)[0],
config = params.gadget.state[0][id]._config,
module = config.datasource.module,
urlPointer = params.pointer.length > 1,
jsonPointer = config.datasource.pointer,
// TODO: settable options
screen = App.settings.screen_format,
size = screen === "small" ? "small" : "medium",
shortcut = size.substring(0, 1);
// if we have a pointer-array passed, query that
// TODO: this is not flexible yet, because "items" and "get" are hardcoded
// TODO: also, jIO GET only allows to query by id, so that should be
// what is stored on the image links...
if (urlPointer) {
spec = {};
spec.storage = "items"
spec.method = "get"
spec.doc = {"_id": params.pointer[1]}
}
if (jsonPointer) {
spec = {};
// TODO: no time to get items form somewhere now. This should be passed
// in the configuration file, as it's something the user can use or not
// also - should be possible to make this fullscreen by supplying the
// carousel options!
spec.items = [
{"src":"img/stella.jpg", "caption":"Stella", "i18n": "custom.teaser.stella", "href": "products.html?search=stella"},
{"src":"img/nannin.jpg", "caption":"Nan", "i18n": "custom.teaser.nan", "href": "products.html?search=nan"},
{"src":"img/vila.jpg", "caption":"Vila", "i18n": "custom.teaser.vila", "href": "products.html?search=vila"}
]
}
// callback to generate gallery
spec.callback = function(err, response) {
if (err) {
str = priv.generateError();
} else {
str = priv.generateGallery(response);
}
// TODO: this should not replace the whole gadget content
markup = params.source.replace(/<!-- gallery -->/g, str);
// this is not response.callback(!!)
params.callback_mockup(markup);
};
if (urlPointer) {
// query for items
App[module].switchboard(spec);
}
if (jsonPointer) {
// TODO: image pictures should also be fetched and stored in JIO
// just run callback now and generate gallery
spec.callback(undefined, spec);
}
}
// response object
that.data = source;
that.mockup = function (source, callback_mockup) {
var spec = {};
spec.gadget = RenderJs.getSelfGadget();
spec.page = App.util.closest(spec.gadget.dom.get(0), "div[data-role='page']");
spec.pageId = "#" + spec.page.id;
// TODO: retrieving pointers should be a generic method that retrieves
// pointers either from the URL or from a JSON config object passed!
spec.pointer = location.search.split("=");
spec.callback_mockup = callback_mockup;
spec.source = source;
priv.generateItems(spec);
};
that.callback = function (self) {
if (App === undefined) {
def = new $.Deferred;
......@@ -25,6 +173,6 @@ define([
};
// return response object
return response;
return that;
}
);
modules/index/index.html
View file @ b69f46dd
......@@ -30,7 +30,10 @@
<div data-role="content" class="ui-content">
<!-- teaser -->
<div id="teaser" data-gadget="modules/teaser/teaser.html" data-gadget-module="teaser"></div>
<div id="teaser"
data-gadget="modules/teaser/teaser.html"
data-gadget-module="teaser">
</div>
<!-- quicksearch -->
<div id="quicksearch"
......@@ -60,7 +63,21 @@
</div>
<!-- gallery widget -->
<div id="gallery" data-gadget="modules/gallery/gallery.html" data-gadget-module="gallery"></div>
<div id="gallery"
data-gadget="modules/gallery/gallery.html"
data-gadget-module="gallery"
data-gadget-property='{
"state": [
{
"gallery": {
"_config": {
"datasource": {"module": "storage", "pointer": "teasers"}
}
}
}
]
}'>
</div>
<!-- top sellers -->
<div id="topsellers"
......
modules/items/items.js
View file @ b69f46dd
......@@ -132,15 +132,16 @@ define([
// set binding for opening a detailed view
// TODO: this should also be a link-method call
self.dom.find("ul").on("click", "a", function (e) {
var key;
var target, search = {};
e.preventDefault();
key = priv.closest(e.target, "a").getAttribute("href").split("?")[1];
target = App.util.closest(e.target, "a").getAttribute("href").split("?")[1].split("=");
search[target[0]] = target[1];
// show this item
$.mobile.changePage("details.html", {
"transition": "slide",
"data": {
"product": key
}
"data": search
});
});
......
modules/media/media.css
View file @ b69f46dd
/* scope CSS? */
.media_wrap {
width: 50%;
display: inline-block;
}
@media (max-width: 40em) {
.media_wrap{
width: 100%;
}
}
\ No newline at end of file
modules/media/media.html
View file @ b69f46dd
......@@ -5,12 +5,34 @@
<title>Media Module</title>
</head>
<body>
<div class="media_wrap" data-role="fieldcontain">
<div data-role="collapsible-set" data-type="horizontal">
<!-- TODO: replace this with tabs -->
<div class="media_wrap">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" class="images">
<h1>Images</h1>
<!-- gallery widget -->
<div id="gallery" data-gadget="../gallery/gallery.html" data-gadget-module="gallery"></div>
<div id="imageGallery"
data-gadget="../gallery/gallery.html"
data-gadget-module="gallery"
data-gadget-property='{
"state": [
{
"imageGallery": {
"_config": {
"datasource": {"module": "storage"}
},
"_links": {
"self": {"href": ""},
"datasource": {"href": "modules/storage/storage.html#queryStorage?method=singleItem"},
"show": {"href": "search.html#queryStorage?method=singleItem"}
}
}
}
]
}'>
</div>
</div>
</div>
</div>
......
products.html 0 → 100644
View file @ b69f46dd
<!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></title>
<link rel="stylesheet" href="js/main.css">
<script data-main="js/main.js" src="js/libs/require/require.js"></script>
</head>
<body>
<div id="products"
data-role="page"
data-gadget="modules/products/products.html"
data-gadget-module="products">
</div>
</body>
</html>
\ 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