Skip to content

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

gallery/fix: re-factor bindings, fixed item-gallery/thumb reloading

parent 4a951cba
Hide whitespace changes
Inline Side-by-side
Showing with 247 additions and 71 deletions
modules/ui/gallery/gallery.css
View file @ 87e2b117
......@@ -7,9 +7,9 @@
position: relative;
text-align: center;
width: auto;
min-height: 25em;
min-height: 25em; /* global setter for the gallery!!! */
overflow: hidden; /* firefox seems the only browser to properly overflow-hide round corners... */
margin: 0 -15px;
margin-bottom: 0 !important;
}
.ui-carousel-inset {
margin: 1em auto;
......@@ -115,10 +115,133 @@ html .ui-btn.ui-icon-radio-off:after,
html .ui-btn.ui-icon-radio-on:after {
margin: -9px -9px 0;
}
.gallery_thumbnails {
display: inline-block;
text-align: center !important;
width: 100%;
}
.gallery_wrap ul.ui-carousel {
background: white;
border: 1px solid #DDD;
min-height: 30em; /* invidual settings */
max-height: 30em; /* prevent scaling of images with smaller width... */
}
.gallery_wrap ul li.product_img,
.gallery_wrap ul li.product_img a,
.gallery_wrap ul li.product_img a img {
max-height: inherit;
}
.gallery_wrap ul li.product_img a img {
width: auto;
margin: 0 auto;
}
.gallery_thumbnail_wrapper {
background: none;
border: 0 none;
display: inline-block;
}
.gallery_thumbnail_wrapper li {
float: left;
max-width: 5em;
list-style: none;
}
.gallery_thumbnail_wrapper li,
.gallery_thumbnail_wrapper a,
.gallery_thumbnail_wrapper li:hover,
.gallery_thumbnail_wrapper a:hover {
background: white !important;
color: #111 !important;
}
.gallery_thumbnail_wrapper li a {
padding: 0 !important;
min-width: 5em;
border-bottom: 1px solid #DDD !important;
}
.gallery_thumbnail_wrapper li a img {
display: block;
position: static !important;
width: 100%;
margin: 0 auto;
max-height: 5em;
max-width: none !important; /* override listview? */
width: auto;
color: #111 !important;
font-size: .75em;
text-align: center;
padding: .2em 0;
}
.gallery_thumbnail_wrapper li a h3 {
display: block;
font-weight: normal;
line-height: 1.25em;
padding: .5em .1em 0;
white-space: normal;
width: 100%;
text-decoration: none;
text-align: center;
font-size: .8em;
}
/* Corner CSS */
.gallery_thumbnail_wrapper li.ui-first-child:nth-child(4n+1),
.gallery_thumbnail_wrapper li.ui-first-child:nth-child(4n+1) a {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.gallery_thumbnail_wrapper li.ui-first-child:nth-last-child(n+4),
.gallery_thumbnail_wrapper li.ui-first-child:nth-last-child(n+4) a {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.gallery_thumbnail_wrapper li.ui-first-child,
.gallery_thumbnail_wrapper li.ui-first-child a {
}
.gallery_thumbnail_wrapper li.ui-last-child,
.gallery_thumbnail_wrapper li.ui-last-child a {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.gallery_thumbnail_wrapper li.ui-last-child:nth-child(4n+4),
.gallery_thumbnail_wrapper li.ui-last-child:nth-child(4n+4) a {
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.gallery_thumbnail_wrapper li:nth-child(4),
.gallery_thumbnail_wrapper li:nth-child(4) a {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.gallery_thumbnail_wrapper li.ui-last-child:not(:nth-child(4n+4)),
.gallery_thumbnail_wrapper li.ui-last-child:not(:nth-child(4n+4)) a {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
/* Responsive CSS */
@media (max-width: 45em) {
}
@media (max-width: 40em) {
}
@media (max-width: 30em) {
.gallery_thumbnail_wrapper li a h3 {
font-size: .5em;
}
}
@media (max-width: 20em) {
.gallery_thumbnail_wrapper li a h3 {
font-size: .5em;
}
}
\ No newline at end of file
modules/ui/gallery/gallery.html
View file @ 87e2b117
......@@ -5,27 +5,6 @@
<title>Gallery Module</title>
</head>
<body>
<!-- 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>
-->
<!-- gallery -->
</body>
</html>
\ No newline at end of file
modules/ui/gallery/gallery.js
View file @ 87e2b117
......@@ -7,70 +7,115 @@ define([
var that = {};
var priv = {};
// ========================== ATTRIBUTES ==============================
// set response, so it's available across function calls
priv.response;
priv.generateGallery = function (response) {
// expose response (will be overwritten, when next item loads
priv.response = 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
// TODO: 404 fallback images!
// ala photoswipe
var i, j, item, img, gallery, thumbnails, str, obj;
var i, j, item, img, gallery, thumbnails = "", str, obj, variations;
gallery = "<div class='gallery_wrap'><ul data-role='carousel' " +
"data-inset='true' class='" +
"ui-responsive tester' data-captions='true' data-transition='" +
"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 += priv.generateTeaserItems(response);
} else {
// TODO: fetch hash and pass as parameter
gallery += priv.generateGalleryItems();
variations = priv.response.dimensions[0].vars;
if (variations.length > 1) {
thumbnails += "<div class='gallery_thumbnails '><ul data-role='" +
"listview' data-inset='true' class='gallery_thumbnail_wrapper'>";
for (i = 0; i < variations.length; i += 1) {
item = variations[i];
// thumbnails - click on link should trigger the display method
thumbnails += "<li data-icon='false'><a href='#" + item.name + "' class='" +
"display_item'><img src='" + response.media + item.media.img[0]["t"] + "' alt='"
+ item.name + "' /><h3 class='translate gallery_header' data-i18n='" +
item.i18n + "'>" + item.name + "</h3></li>";
}
thumbnails += "</ul></div>";
}
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>";
return str = gallery + thumbnails;
};
// TODO: show some thing
priv.generateError = function () {
return "<p>JIO ERROR</p>";
};
// generate teaser items
priv.generateTeaserItems = function (response) {
var i, obj, str = "";
for (i = 0; i < response.items.length; i += 1) {
obj = response.items[i];
str += "<li class='teaser_img'><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>";
}
return str;
};
// generate gallery list items
priv.generateGalleryItems = function (name) {
var i, j, item, img, str = "";
item = priv.response.dimensions[0].vars[0];
// find item name or default to first variant in dimension
if (name !== undefined) {
for (i = 0; i < priv.response.dimensions[0].vars.length; i += 1) {
item = priv.response.dimensions[0].vars[i];
if (item.name === name || location.hash === name) {
break;
}
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 + "'>" + item.name + "</h3></li>";
// for every variant (colors, size?, foo?)
// TODO: declare a variant that carries images in products JSON!
// build string
for (j = 0; j < item.media.img.length; j += 1) {
img = item.media.img[j];
// TODO: add zoom/photoswipe later!
str += "<li class='product_img'><a href='#'><img src='" + priv.response.media +
img[shortcut] + size + "' alt='" + item.name + "' />" +
"<h3 class='translate gallery_header' data-i18n='" +
item.i18n + "'></h3></a></li>";
}
thumbnails += "</ul></div>";
return str = gallery + thumbnails;
return str;
};
priv.generateError = function () {
return "<p>Foo</p>";
priv.swapGalleryItems = function (name, element) {
var newString = priv.generateGalleryItems(name),
// TODO: if thumbnails are a gallery option, it should be possible
// to reference the gallery from the thumbnail without doing this:
wrap = App.util.closest(element, ".gallery_thumbnails").previousSibling,
gallery = wrap.getElementsByTagName("ul");
$(gallery[0]).empty().append(newString).carousel("refresh");
};
// generate items to display
......@@ -113,11 +158,14 @@ define([
// callback to generate gallery
spec.callback = function(err, response) {
if (err) {
str = priv.generateError();
} else {
str = priv.generateGallery(response);
if (spec.items) {
str = priv.generateGallery(response);
} else {
str = priv.generateGallery(response);
}
}
// TODO: this should not replace the whole gadget content
......@@ -152,7 +200,33 @@ define([
spec.callback_mockup = callback_mockup;
spec.source = source;
priv.generateItems(spec);
// TODO: remove to separate function
if (!spec.page.getAttribute("events_gallery")) {
spec.page.setAttribute("events_gallery", true);
$(document).on("pagebeforeshow.gallery", spec.pageId, function (e) {
// the pointer in the URL may be updated
if (location.search) {
spec.pointer = location.search.split("=");
}
if ($.mobile.firstPage.attr('id') !== spec.pageId.replace("#","")) {
priv.generateItems(spec);
}
})
.on("click.gallery", spec.pageId + " .display_item", function (e) {
var target = e.target,
color;
if (e.target.tagName === "A") {
color = target.href.split("#")[1];
} else {
color = App.util.closest(target, "a").href.split("#")[1];
}
priv.swapGalleryItems(color, e.target);
});
// and run intial
priv.generateItems(spec);
}
};
that.callback = function (self) {
......
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