Skip to content

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

upgraded to JQM 1.4.0, updated filterable widget/searchbar gadget

parent 5dfeca3b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2034 additions and 5939 deletions
css/jquery-mobile/jquery-mobile.latest.css
View file @ f144c000
This diff is collapsed.
css/jquery-mobile/jquery-mobile.structure.css deleted 100644 → 0
View file @ 5dfeca3b
This source diff could not be displayed because it is too large. You can view the blob instead.
css/jquery-mobile/jquery-mobile.themes.css deleted 100644 → 0
View file @ 5dfeca3b
This diff is collapsed.
js/libs/jquery-mobile/jquery-mobile.gallery.js deleted 100644 → 0
View file @ 5dfeca3b
/* ============================ CAROUSEL WIDGET ========================== */
(function( $, undefined ) {
"use strict";
$.widget("mobile.carousel", $.mobile.widget, {
options: {
bullets: null,
bulletsPos: null,
inset: null,
captions: null,
captionpos: null,
captiontheme: null,
carouseltransition: null,
heading: "h1,h2,h3,h4,h5,h6,legend"
},
_transitionEndEvents : "webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd",
_create: function () {
var el = this.element[0],
o = this.options,
getAttrFixed = $.mobile.getAttribute;
// only time we read the DOM config
o.inset = getAttrFixed(el, "inset", true) || false;
o.carouseltransition = getAttrFixed(el, "transition", true) || "slide";
o.bullets = getAttrFixed(el, "bullets", true) || true;
o.captions = getAttrFixed(el, "captions", true) || false;
if (o.captions) {
o.captionspos = getAttrFixed(el, "captions-pos", true) || "bottom";
o.captionstheme = getAttrFixed(el, "captions-theme", true) || "a";
}
if (o.bullets) {
o.bulletsPos = getAttrFixed(el, "bulletsPos", true) || "bottom";
}
this.refresh(true);
},
refresh: function (create) {
var o = this.options,
el = this.element,
items = el.children(),
fragment = document.createDocumentFragment(),
classes = "ui-carousel",
label,
radio,
barrel,
item,
i,
transition,
containsLinks,
captionsContent,
captionsHeading;
// loop over images
for (i = 0; i < items.length; i += 1) {
var item = items[i];
// create captions
if (o.captions) {
containsLinks = item.children.length === 1 && item.children[0].tagName === "A";
captionsContent = $( item )
.find(containsLinks ? "a *" : "*")
.not("img")
.wrap( "<div class='ui-carousel-captions-content ui-bar-" + o.captionstheme + " ui-carousel-captions-" + o.captionspos + "'></div>")
.parent();
captionsHeading = captionsContent.find(o.heading).addClass("ui-carousel-captions-heading");
}
// create radios
if (o.bullets) {
// TODO: do this in jQuery...
radio = document.createElement("input");
radio.setAttribute("type", 'radio');
radio.setAttribute("name", 'radio-' + this.uuid );
radio.setAttribute("value",'radio-' + this.uuid + '-' + i);
if (i === 0) {
radio.checked = true;
$(item).addClass("ui-carousel-active");
}
// and use data()
radio.reference = $(item);
label = document.createElement("label");
label.setAttribute("data-" + $.mobile.ns + "iconpos", "notext");
label.appendChild( radio );
fragment.appendChild( label )
}
}
if (o.inset) {
classes += " ui-carousel-inset";
}
if (o.captions) {
classes += " ui-carousel-captions";
}
if (o.bullets) {
classes += " ui-carousel-bullets";
barrel = $("<div class='ui-carousel-controls ui-carousel-controls-" + o.bulletPos +"' />");
while ( fragment.firstChild ) {
// browser hangs up if calling this inside append()
$(fragment.firstChild).children().checkboxradio();
barrel.append(
fragment.firstChild
);
}
// this always needs to go before the slider
el[o.bulletPos === "top" ? "before" : "after"](barrel);
this._on(barrel.find("input"), { change: "_onChange"});
}
// all set, add classes
el.addClass(classes);
},
// _handleKeydown: function( event ) {
// var index = this._value();
// if ( this.options.disabled ) {
// return;
// }
//
// // In all cases prevent the default and mark the handle as active
// switch ( event.keyCode ) {
// case $.mobile.keyCode.RIGHT:
// case $.mobile.keyCode.LEFT:
// event.preventDefault();
//
// if ( !this._keySliding ) {
// this._keySliding = true;
// this.handle.addClass( "ui-state-active" ); /* TODO: We don't use this class for styling. Do we need to add it? */
// }
//
// break;
// }
//
// // move the slider according to the keypress
// switch ( event.keyCode ) {
// case $.mobile.keyCode.RIGHT:
// this.refresh( index + this.step );
// break;
// case $.mobile.keyCode.LEFT:
// this.refresh( index - this.step );
// break;
// }
// }, // remove active mark
//
// _handleKeyup: function(/* event */) {
// if ( this._keySliding ) {
// this._keySliding = false;
// this.handle.removeClass( "ui-state-active" ); /* See comment above. */
// }
// },
// _bindSwipeEvents: function() {
// var self = this,
// area = self.element;
//
// // on swipe, change to the next/previous image
// if( !!self.options.swipeClose ) {
// if ( self.options.position === "left" ) {
// area.on( "swipeleft.carousel", function(/* e */) {
// // self.close();
// });
// } else {
// area.on( "swiperight.carousel", function(/* e */) {
// // self.close();
// });
// }
// }
// },
_completeTransition: function (current, next, events) {
var self = this,
o = self.options;
console.log("3. NEXT: removing 'in out slide'")
next.removeClass("in out " + o.carouseltransition)
.off( events );
console.log("4. CURRENT: setting bindings");
current
.on( events, self._cleanupTransition(current, events) )
},
_cleanupTransition: function (current, events) {
var self = this,
o = self.options;
var classes = o.carouseltransition + " out in";
console.log("5. CURRENT: removing 'in out slide'");
current.removeClass(classes)
console.log("6. CURRENT: removing 'active'");
current.removeClass("ui-carousel-active").off(events);
},
_onChange: function (e) {
var self = this,
events = self._transitionEndEvents,
el = self.element,
o = self.options,
// elements
currentActive = el.children().filter(".ui-carousel-active"),
nextActive = e.target.reference,
classes = o.carouseltransition + " out in",
transition = $.mobile._maybeDegradeTransition( o.carouseltransition );
// click on active radio
if (nextActive.hasClass("ui-carousel-active")) {
return;
}
// initialize
nextActive
.on( events, self._completeTransition(currentActive, nextActive, events));
console.log("2. NEXT: adding 'slide in active'");
nextActive
.addClass(transition + " ui-carousel-active in ");
}
});
$.mobile.carousel.initSelector = ":jqmData(role='carousel')";
//auto self-init widgets
$.mobile._enhancer.add( "mobile.carousel" );
})( jQuery );
/* tranistion workflow
// first slide
if (init) {
current.removeClass("ui-carousel-active in out reverse slide")
next.css('z-index','-10')
.addClass("ui-carousel-active ui-carousel-opaque")
.css('z-index','')
if (transition !== "none") {
// > once animation is complete!
// current.removeClass("ui-carousel-active in out reverse slide")
// next.removeClass("out in reverse slide")
next.removeClass("ui-carousel-opaque")
.addClass("slide in reverse")
} else {
current.removeClass("ui-carousel-active in out reverse slide")
next.removeClass("out in reverse slide")
}
} else {
// > once animation is complete
current.removeClass("ui-carousel-active in out reverse slide")
next.css('z-index','-10')
.addClass("ui-carousel-active ui-carousel-opaque")
.css('z-index','')
if (transition !== "none") {
// > once animation is complete!
// current.removeClass("ui-carousel-active in out reverse slide")
// next.removeClass("out in reverse slide")
next.removeClass("ui-carousel-opaque")
.addClass("slide in reverse")
} else {
current.removeClass("ui-carousel-active in out reverse slide")
next.removeClass("out in reverse slide")
}
current.addClass("slide out reverse");
}
*/
\ No newline at end of file
js/libs/jquery-mobile/jquery-mobile.js
View file @ f144c000
This diff is collapsed.
js/main.js
View file @ f144c000
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
, polyfill: '../js/polyfill' , polyfill: '../js/polyfill'
, overrides: '../js/overrides' , overrides: '../js/overrides'
, utilities: '../js/utilities' , utilities: '../js/utilities'
, extensions: '../js/extensions' , extensions: '../modules/extensions/extensions'
// requireJs // requireJs
, almond: '../js/libs/require/almond' , almond: '../js/libs/require/almond'
......
modules/searchbar/searchbar.css
View file @ f144c000
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
padding-right: 4.5em; padding-right: 4.5em;
} }
.searchbar_wrap .ui-input-search .ui-input-clear { .searchbar_wrap .ui-input-search .ui-input-clear {
right: 2em; right: 2em !important;
} }
.searchbar_wrap .ui-filter { .searchbar_wrap .ui-filter {
margin: 0; margin: 0;
......
modules/searchbar/searchbar.js
View file @ f144c000
...@@ -12,6 +12,7 @@ define([ ...@@ -12,6 +12,7 @@ define([
value, runSearch; value, runSearch;
runSearch = function (value) { runSearch = function (value) {
console.log("running search with value ="+value);
$.mobile.changePage( "products.html", { $.mobile.changePage( "products.html", {
"transition": "slide", "transition": "slide",
"allowSamePageTransition": true, "allowSamePageTransition": true,
...@@ -21,7 +22,7 @@ define([ ...@@ -21,7 +22,7 @@ define([
}); });
}; };
filter.on("filterbarbeforefilter", function (e, data) { filter.on("filterablebeforefilter", function (e, data) {
value = data.input.value; value = data.input.value;
// stop JQM // stop JQM
e.preventDefault(); e.preventDefault();
...@@ -48,11 +49,10 @@ define([ ...@@ -48,11 +49,10 @@ define([
} }
}) })
.on( "filterbarcreate", function( e, ui ) { .on( "filterablecreate", function( e, ui ) {
var uuid = $(e.target).data("mobileFilterbar").uuid, var $el = $( e.target.previousSibling ),
target = $("#ui-filter-"+uuid), input = $el.find("input"),
action = target.find(".ui-input-action"), action = $el.find("a.ui-input-action");
input = target.find("input");
// TODO: search should be run here and results should be passed to // TODO: search should be run here and results should be passed to
// items or ?. Otherwise items has to listen for ... something, grab // items or ?. Otherwise items has to listen for ... something, grab
...@@ -63,6 +63,7 @@ define([ ...@@ -63,6 +63,7 @@ define([
input.on("keypress", function (e) { input.on("keypress", function (e) {
if (e.which == 13) { if (e.which == 13) {
e.preventDefault();
runSearch(input.val()); runSearch(input.val());
} }
}); });
......
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