Skip to content

C
coconva2118
Commit 754d3428 authored by Ketan's avatar Ketan
Browse files
Options

remove jquery conflict

parent 924b9066
Hide whitespace changes
Inline Side-by-side
Showing with 1805 additions and 60 deletions
app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/details.phtml
View file @ 754d3428
......@@ -110,7 +110,13 @@ $customtab_content = $_config->getProductDetail('customtab_content');
top: 0;
left: 0;
}
.flip {
transform: rotateY(180deg);
}
</style>
<script>
var DefVal = 350;
......@@ -120,17 +126,19 @@ var positionLabel = 'Image Position';
//jQuery('span:contains("Image Width")').parent().next('div').children('input').val();
require([
'jquery',
'//localhost/coconva2118/pub/static/version1569245418/frontend/Sm/shop4u/en_US/js/jquery.selectareas.js'
], function ($) {
'selectareas'
//'//localhost/coconva2118/pub/static/version1569245418/frontend/Sm/shop4u/en_US/js/jquery.selectareas.js'
], function (jQuery, selectareas) {
jQuery.noConflict();
if (jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').length && jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').length) {
//jQuery('body').loader('show');
jQuery('label:contains("Flip Image")').first().hide();
jQuery(".col2-layout .container .row ").append('<div id="preloader" class="loader-wrapper"><div class="loader"></div></div>');
$("body").trigger('processStart');
function debugQtyAreas (event, id, areas) {
$.each(areas, function (id, area) {
jQuery.each(areas, function (id, area) {
console.log('area====',area);
jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').val('Xpos:'+(area.x).toFixed(2)+' :: Ypos:'+(area.y).toFixed(2));
});
......@@ -138,16 +146,27 @@ require([
function setPrice(p_w,p_h,t_w,t_h,rate,plugin){
var final_price = ((Math.ceil(p_w/t_w)*Math.ceil(p_h/t_h))*rate) + plugin;
$('.price-final_price').html('<div id="prodPrice" style="font-size: 166.67%;color: #e74c3c;">₹'+final_price+'.00 </div>');
jQuery('.price-final_price').html('<div id="prodPrice" style="font-size: 166.67%;color: #e74c3c;">₹'+final_price+'.00 </div>');
}
//----------------------creating checkbox for tiles------------//
$(
jQuery(
'<div style="height: 30px;width: 100%;position: unset;padding-bottom: 35px;"><input type="checkbox" id="tile_checkbox">&nbsp;Show Tiles</div>'
).insertBefore('.product-add-form');
jQuery('label:contains("Flip Image")').first().next('div.control').children('div:nth-child(1)').children().children('input').on('change',function(){
if(jQuery(this).is(':checked')){
jQuery('img.fotorama__img').parent().addClass('flip');
}else{
jQuery('img.fotorama__img').parent().removeClass('flip');
}
});
//-------------------------------------------------------------//
......@@ -160,7 +179,7 @@ jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').v
jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(DefVal);
jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').attr('disabled','disabled');
if($('.gallery-placeholder').html('<img src="'+ $('img.fotorama__img').attr('src') +'" class="fotorama__img"/>')){
if(jQuery('.gallery-placeholder').html('<div><img src="'+ jQuery('img.fotorama__img').attr('src') +'" class="fotorama__img"/></div>')){
var tt = jQuery('img.fotorama__img').selectAreas({
......@@ -216,11 +235,11 @@ function setChangeArea(){
tt.selectAreas('reset');
jQuery('img.fotorama__img').selectAreas('add', areaOptions);
$('.select-areas-resize-handler').remove();
$('.delete-area').remove();
$('#tile_checkbox').prop('checked', false);
jQuery('.select-areas-resize-handler').remove();
jQuery('.delete-area').remove();
jQuery('#tile_checkbox').prop('checked', false);
setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,0);
$('.admin__control-radio').each(function(){$(this).prop('checked', false)});
jQuery('.admin__control-radio').each(function(){jQuery(this).prop('checked', false)});
};
//--------------------------hiding price span--------------------//
jQuery('.price-notice').hide();
......@@ -229,10 +248,10 @@ function setChangeArea(){
jQuery('.fotorama__img').parent().css('top','25px');
//------------------------- hiding price span--------------------//
//----------------------appending price update on material options----------//
$('.admin__control-radio').each(function(){$(this).change(
jQuery('.admin__control-radio').each(function(){jQuery(this).change(
function(){
console.log('price==',$(this).attr('price'));
setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,parseInt($(this).attr('price')));
console.log('price==',jQuery(this).attr('price'));
setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,parseInt(jQuery(this).attr('price')));
});
});
//--------------------------------------------------------------------------//
......@@ -243,12 +262,12 @@ setTimeout(function(){
jQuery(jQuery('span:contains('+heightLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
$('.select-areas-resize-handler').remove();
$('.delete-area').remove();
jQuery('.select-areas-resize-handler').remove();
jQuery('.delete-area').remove();
//------------------creating tiles here---------------------------//
$('#tile_checkbox').on('change',function(){
if($(this).is(':checked')){
jQuery('#tile_checkbox').on('change',function(){
if(jQuery(this).is(':checked')){
var htm = '<div style="background:white;color:white;"><ul>';
var kk=0;
......@@ -273,9 +292,9 @@ $('#tile_checkbox').on('change',function(){
kk +=Math.round((wdPer/100)*wdc);
}
htm += '</ul></div>';
$('.select-areas-background-area').html(htm);
jQuery('.select-areas-background-area').html(htm);
}else{
$('.select-areas-background-area').html(' ');
jQuery('.select-areas-background-area').html(' ');
}
});
......@@ -284,7 +303,7 @@ $('#tile_checkbox').on('change',function(){
jQuery('#preloader').remove();
}, 4000);
}, 2000);
......@@ -294,6 +313,7 @@ jQuery('#preloader').remove();
});
</script>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')): ?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
......
pub/static/frontend/Sm/shop4u/en_US/jquery/selectareas.js 0 → 100755
View file @ 754d3428
/* global window, Image, jQuery */
/**
* @author 360Learning
* @author Catalin Dogaru (https://github.com/cdog - http://code.tutsplus.com/tutorials/how-to-create-a-jquery-image-cropping-plugin-from-scratch-part-i--net-20994)
* @author Adrien David-Sivelle (https://github.com/AdrienDS - Refactoring, Multiselections & Mobile compatibility)
*/
(function($) {
$.imageArea = function(parent, id) {
var options = parent.options,
$image = parent.$image,
$trigger = parent.$trigger,
$outline,
$selection,
$resizeHandlers = {},
$btDelete,
resizeHorizontally = true,
resizeVertically = true,
selectionOffset = [0, 0],
selectionOrigin = [0, 0],
area = {
id: id,
x: 0,
y: 0,
z: 0,
height: 0,
width: 0
},
blur = function () {
area.z = 0;
refresh("blur");
},
focus = function () {
parent.blurAll();
area.z = 100;
refresh();
},
getData = function () {
return area;
},
fireEvent = function (event) {
$image.trigger(event, [area.id, parent.areas()]);
},
cancelEvent = function (e) {
var event = e || window.event || {};
event.cancelBubble = true;
event.returnValue = false;
event.stopPropagation && event.stopPropagation(); // jshint ignore: line
event.preventDefault && event.preventDefault(); // jshint ignore: line
},
off = function() {
$.each(arguments, function (key, val) {
on(val);
});
},
on = function (type, handler) {
var browserEvent, mobileEvent;
switch (type) {
case "start":
browserEvent = "mousedown";
mobileEvent = "touchstart";
break;
case "move":
browserEvent = "mousemove";
mobileEvent = "touchmove";
break;
case "stop":
browserEvent = "mouseup";
mobileEvent = "touchend";
break;
default:
return;
}
if (handler && jQuery.isFunction(handler)) {
$(window.document).on(browserEvent, handler).on(mobileEvent, handler);
} else {
$(window.document).off(browserEvent).off(mobileEvent);
}
},
updateSelection = function () {
// Update the outline layer
$outline.css({
cursor: "default",
width: area.width,
height: area.height,
left: area.x,
top: area.y,
"z-index": area.z
});
// Update the selection layer
$selection.css({
backgroundPosition : ( - area.x - 1) + "px " + ( - area.y - 1) + "px",
cursor : options.allowMove ? "move" : "default",
width: (area.width - 2 > 0) ? (area.width - 2) : 0,
height: (area.height - 2 > 0) ? (area.height - 2) : 0,
left : area.x + 1,
top : area.y + 1,
"z-index": area.z + 2
});
},
updateResizeHandlers = function (show) {
if (! options.allowResize) {
return;
}
if (show) {
$.each($resizeHandlers, function(name, $handler) {
var top,
left,
semiwidth = Math.round($handler.width() / 2),
semiheight = Math.round($handler.height() / 2),
vertical = name[0],
horizontal = name[name.length - 1];
if (vertical === "n") { // ====== North* ======
top = - semiheight;
} else if (vertical === "s") { // ====== South* ======
top = area.height - semiheight - 1;
} else { // === East & West ===
top = Math.round(area.height / 2) - semiheight - 1;
}
if (horizontal === "e") { // ====== *East ======
left = area.width - semiwidth - 1;
} else if (horizontal === "w") { // ====== *West ======
left = - semiwidth;
} else { // == North & South ==
left = Math.round(area.width / 2) - semiwidth - 1;
}
$handler.css({
display: "block",
left: area.x + left,
top: area.y + top,
"z-index": area.z + 1
});
});
} else {
$(".select-areas-resize-handler").each(function() {
$(this).css({ display: "none" });
});
}
},
updateBtDelete = function (visible) {
if ($btDelete) {
$btDelete.css({
display: visible ? "block" : "none",
left: area.x + area.width + 1,
top: area.y - $btDelete.outerHeight() - 1,
"z-index": area.z + 1
});
}
},
updateCursor = function (cursorType) {
$outline.css({
cursor: cursorType
});
$selection.css({
cursor: cursorType
});
},
refresh = function(sender) {
switch (sender) {
case "startSelection":
parent._refresh();
updateSelection();
updateResizeHandlers();
updateBtDelete(true);
break;
case "pickSelection":
case "pickResizeHandler":
updateResizeHandlers();
break;
case "resizeSelection":
updateSelection();
updateResizeHandlers();
updateCursor("crosshair");
updateBtDelete(true);
break;
case "moveSelection":
updateSelection();
updateResizeHandlers();
updateCursor("move");
updateBtDelete(true);
break;
case "blur":
updateSelection();
updateResizeHandlers();
updateBtDelete();
break;
//case "releaseSelection":
default:
updateSelection();
updateResizeHandlers(true);
updateBtDelete(true);
}
},
startSelection = function (event) {
cancelEvent(event);
// Reset the selection size
area.width = options.minSize[0];
area.height = options.minSize[1];
focus();
on("move", resizeSelection);
on("stop", releaseSelection);
// Get the selection origin
selectionOrigin = getMousePosition(event);
if (selectionOrigin[0] + area.width > $image.width()) {
selectionOrigin[0] = $image.width() - area.width;
}
if (selectionOrigin[1] + area.height > $image.height()) {
selectionOrigin[1] = $image.height() - area.height;
}
// And set its position
area.x = selectionOrigin[0];
area.y = selectionOrigin[1];
refresh("startSelection");
},
pickSelection = function (event) {
cancelEvent(event);
focus();
on("move", moveSelection);
on("stop", releaseSelection);
var mousePosition = getMousePosition(event);
// Get the selection offset relative to the mouse position
selectionOffset[0] = mousePosition[0] - area.x;
selectionOffset[1] = mousePosition[1] - area.y;
refresh("pickSelection");
},
pickResizeHandler = function (event) {
cancelEvent(event);
focus();
var card = event.target.className.split(" ")[1];
if (card[card.length - 1] === "w") {
selectionOrigin[0] += area.width;
area.x = selectionOrigin[0] - area.width;
}
if (card[0] === "n") {
selectionOrigin[1] += area.height;
area.y = selectionOrigin[1] - area.height;
}
if (card === "n" || card === "s") {
resizeHorizontally = false;
} else if (card === "e" || card === "w") {
resizeVertically = false;
}
on("move", resizeSelection);
on("stop", releaseSelection);
refresh("pickResizeHandler");
},
resizeSelection = function (event) {
cancelEvent(event);
focus();
var mousePosition = getMousePosition(event);
// Get the selection size
var height = mousePosition[1] - selectionOrigin[1],
width = mousePosition[0] - selectionOrigin[0];
// If the selection size is smaller than the minimum size set it to minimum size
if (Math.abs(width) < options.minSize[0]) {
width = (width >= 0) ? options.minSize[0] : - options.minSize[0];
}
if (Math.abs(height) < options.minSize[1]) {
height = (height >= 0) ? options.minSize[1] : - options.minSize[1];
}
// Test if the selection size exceeds the image bounds
if (selectionOrigin[0] + width < 0 || selectionOrigin[0] + width > $image.width()) {
width = - width;
}
if (selectionOrigin[1] + height < 0 || selectionOrigin[1] + height > $image.height()) {
height = - height;
}
// Test if the selection size is bigger than the maximum size (ignored if minSize > maxSize)
if (options.maxSize[0] > options.minSize[0] && options.maxSize[1] > options.minSize[1]) {
if (Math.abs(width) > options.maxSize[0]) {
width = (width >= 0) ? options.maxSize[0] : - options.maxSize[0];
}
if (Math.abs(height) > options.maxSize[1]) {
height = (height >= 0) ? options.maxSize[1] : - options.maxSize[1];
}
}
// Set the selection size
if (resizeHorizontally) {
area.width = width;
}
if (resizeVertically) {
area.height = height;
}
// If any aspect ratio is specified
if (options.aspectRatio) {
// Calculate the new width and height
if ((width > 0 && height > 0) || (width < 0 && height < 0)) {
if (resizeHorizontally) {
height = Math.round(width / options.aspectRatio);
} else {
width = Math.round(height * options.aspectRatio);
}
} else {
if (resizeHorizontally) {
height = - Math.round(width / options.aspectRatio);
} else {
width = - Math.round(height * options.aspectRatio);
}
}
// Test if the new size exceeds the image bounds
if (selectionOrigin[0] + width > $image.width()) {
width = $image.width() - selectionOrigin[0];
height = (height > 0) ? Math.round(width / options.aspectRatio) : - Math.round(width / options.aspectRatio);
}
if (selectionOrigin[1] + height < 0) {
height = - selectionOrigin[1];
width = (width > 0) ? - Math.round(height * options.aspectRatio) : Math.round(height * options.aspectRatio);
}
if (selectionOrigin[1] + height > $image.height()) {
height = $image.height() - selectionOrigin[1];
width = (width > 0) ? Math.round(height * options.aspectRatio) : - Math.round(height * options.aspectRatio);
}
// Set the selection size
area.width = width;
area.height = height;
}
if (area.width < 0) {
area.width = Math.abs(area.width);
area.x = selectionOrigin[0] - area.width;
} else {
area.x = selectionOrigin[0];
}
if (area.height < 0) {
area.height = Math.abs(area.height);
area.y = selectionOrigin[1] - area.height;
} else {
area.y = selectionOrigin[1];
}
fireEvent("changing");
refresh("resizeSelection");
},
moveSelection = function (event) {
cancelEvent(event);
if (! options.allowMove) {
return;
}
focus();
var mousePosition = getMousePosition(event);
moveTo({
x: mousePosition[0] - selectionOffset[0],
y: mousePosition[1] - selectionOffset[1]
});
fireEvent("changing");
},
moveTo = function (point) {
// Set the selection position on the x-axis relative to the bounds
// of the image
if (point.x > 0) {
if (point.x + area.width < $image.width()) {
area.x = point.x;
} else {
area.x = $image.width() - area.width;
}
} else {
area.x = 0;
}
// Set the selection position on the y-axis relative to the bounds
// of the image
if (point.y > 0) {
if (point.y + area.height < $image.height()) {
area.y = point.y;
} else {
area.y = $image.height() - area.height;
}
} else {
area.y = 0;
}
refresh("moveSelection");
},
releaseSelection = function (event) {
cancelEvent(event);
off("move", "stop");
// Update the selection origin
selectionOrigin[0] = area.x;
selectionOrigin[1] = area.y;
// Reset the resize constraints
resizeHorizontally = true;
resizeVertically = true;
fireEvent("changed");
refresh("releaseSelection");
},
deleteSelection = function (event) {
cancelEvent(event);
$selection.remove();
$outline.remove();
$.each($resizeHandlers, function(card, $handler) {
$handler.remove();
});
$btDelete.remove();
parent._remove(id);
fireEvent("changed");
},
getElementOffset = function (object) {
var offset = $(object).offset();
return [offset.left, offset.top];
},
getMousePosition = function (event) {
var imageOffset = getElementOffset($image);
if (! event.pageX) {
if (event.originalEvent) {
event = event.originalEvent;
}
if(event.changedTouches) {
event = event.changedTouches[0];
}
if(event.touches) {
event = event.touches[0];
}
}
var x = event.pageX - imageOffset[0],
y = event.pageY - imageOffset[1];
x = (x < 0) ? 0 : (x > $image.width()) ? $image.width() : x;
y = (y < 0) ? 0 : (y > $image.height()) ? $image.height() : y;
return [x, y];
};
// Initialize an outline layer and place it above the trigger layer
$outline = $("<div class=\"select-areas-outline\" />")
.css({
opacity : options.outlineOpacity,
position : "absolute"
})
.insertAfter($trigger);
// Initialize a selection layer and place it above the outline layer
$selection = $("<div />")
.addClass("select-areas-background-area")
.css({
background : "#fff url(" + $image.attr("src") + ") no-repeat",
backgroundSize : $image.width() + "px",
position : "absolute"
})
.insertAfter($outline);
// Initialize all handlers
if (options.allowResize) {
$.each(["nw", "n", "ne", "e", "se", "s", "sw", "w"], function (key, card) {
$resizeHandlers[card] = $("<div class=\"select-areas-resize-handler " + card + "\"/>")
.css({
opacity : 0.5,
position : "absolute",
cursor : card + "-resize"
})
.insertAfter($selection)
.mousedown(pickResizeHandler)
.bind("touchstart", pickResizeHandler);
});
}
// initialize delete button
if (options.allowDelete) {
var bindToDelete = function ($obj) {
$obj.click(deleteSelection)
.bind("touchstart", deleteSelection)
.bind("tap", deleteSelection);
return $obj;
};
$btDelete = bindToDelete($("<div class=\"delete-area\" />"))
.append(bindToDelete($("<div class=\"select-areas-delete-area\" />")))
.insertAfter($selection);
}
if (options.allowMove) {
$selection.mousedown(pickSelection).bind("touchstart", pickSelection);
}
focus();
return {
getData: getData,
startSelection: startSelection,
deleteSelection: deleteSelection,
options: options,
blur: blur,
focus: focus,
nudge: function (point) {
point.x = area.x;
point.y = area.y;
if (point.d) {
point.y = area.y + point.d;
}
if (point.u) {
point.y = area.y - point.u;
}
if (point.l) {
point.x = area.x - point.l;
}
if (point.r) {
point.x = area.x + point.r;
}
moveTo(point);
fireEvent("changed");
},
set: function (dimensions, silent) {
area = $.extend(area, dimensions);
selectionOrigin[0] = area.x;
selectionOrigin[1] = area.y;
if (! silent) {
fireEvent("changed");
}
},
contains: function (point) {
return (point.x >= area.x) && (point.x <= area.x + area.width) &&
(point.y >= area.y) && (point.y <= area.y + area.height);
}
};
};
$.imageSelectAreas = function() { };
$.imageSelectAreas.prototype.init = function (object, customOptions) {
var that = this,
defaultOptions = {
allowEdit: true,
allowMove: true,
allowResize: true,
allowSelect: true,
allowDelete: true,
allowNudge: true,
aspectRatio: 0,
minSize: [0, 0],
maxSize: [0, 0],
width: 0,
maxAreas: 0,
outlineOpacity: 0.5,
overlayOpacity: 0.5,
areas: [],
onChanging: null,
onChanged: null
};
this.options = $.extend(defaultOptions, customOptions);
if (! this.options.allowEdit) {
this.options.allowSelect = this.options.allowMove = this.options.allowResize = this.options.allowDelete = false;
}
this._areas = {};
// Initialize the image layer
this.$image = $(object);
this.ratio = 1;
if (this.options.width && this.$image.width() && this.options.width !== this.$image.width()) {
this.ratio = this.options.width / this.$image.width();
this.$image.width(this.options.width);
}
if (this.options.onChanging) {
this.$image.on("changing", this.options.onChanging);
}
if (this.options.onChanged) {
this.$image.on("changed", this.options.onChanged);
}
if (this.options.onLoaded) {
this.$image.on("loaded", this.options.onLoaded);
}
// Initialize an image holder
this.$holder = $("<div />")
.css({
position : "relative",
width: this.$image.width(),
height: this.$image.height()
});
// Wrap the holder around the image
this.$image.wrap(this.$holder)
.css({
position : "absolute"
});
// Initialize an overlay layer and place it above the image
this.$overlay = $("<div class=\"select-areas-overlay\" />")
.css({
opacity : this.options.overlayOpacity,
position : "absolute",
width: this.$image.width(),
height: this.$image.height()
})
.insertAfter(this.$image);
// Initialize a trigger layer and place it above the overlay layer
this.$trigger = $("<div />")
.css({
backgroundColor : "#000000",
opacity : 0,
position : "absolute",
width: this.$image.width(),
height: this.$image.height()
})
.insertAfter(this.$overlay);
$.each(this.options.areas, function (key, area) {
that._add(area, true);
});
this.blurAll();
this._refresh();
if (this.options.allowSelect) {
// Bind an event handler to the "mousedown" event of the trigger layer
this.$trigger.mousedown($.proxy(this.newArea, this)).on("touchstart", $.proxy(this.newArea, this));
}
if (this.options.allowNudge) {
$('html').keydown(function (e) { // move selection with arrow keys
var codes = {
37: "l",
38: "u",
39: "r",
40: "d"
},
direction = codes[e.which],
selectedArea;
if (direction) {
that._eachArea(function (area) {
if (area.getData().z === 100) {
selectedArea = area;
return false;
}
});
if (selectedArea) {
var move = {};
move[direction] = 1;
selectedArea.nudge(move);
}
}
});
}
};
$.imageSelectAreas.prototype._refresh = function () {
var nbAreas = this.areas().length;
this.$overlay.css({
display : nbAreas? "block" : "none"
});
if (nbAreas) {
this.$image.addClass("blurred");
} else {
this.$image.removeClass("blurred");
}
this.$trigger.css({
cursor : this.options.allowSelect ? "crosshair" : "default"
});
};
$.imageSelectAreas.prototype._eachArea = function (cb) {
$.each(this._areas, function (id, area) {
if (area) {
return cb(area, id);
}
});
};
$.imageSelectAreas.prototype._remove = function (id) {
delete this._areas[id];
this._refresh();
};
$.imageSelectAreas.prototype.remove = function (id) {
if (this._areas[id]) {
this._areas[id].deleteSelection();
}
};
$.imageSelectAreas.prototype.newArea = function (event) {
var id = -1;
this.blurAll();
if (this.options.maxAreas && this.options.maxAreas <= this.areas().length) {
return id;
}
this._eachArea(function (area, index) {
id = Math.max(id, parseInt(index, 10));
});
id += 1;
this._areas[id] = $.imageArea(this, id);
if (event) {
this._areas[id].startSelection(event);
}
return id;
};
$.imageSelectAreas.prototype.set = function (id, options, silent) {
if (this._areas[id]) {
options.id = id;
this._areas[id].set(options, silent);
this._areas[id].focus();
}
};
$.imageSelectAreas.prototype._add = function (options, silent) {
var id = this.newArea();
this.set(id, options, silent);
};
$.imageSelectAreas.prototype.add = function (options) {
var that = this;
this.blurAll();
if ($.isArray(options)) {
$.each(options, function (key, val) {
that._add(val);
});
} else {
this._add(options);
}
this._refresh();
if (! this.options.allowSelect && ! this.options.allowMove && ! this.options.allowResize && ! this.options.allowDelete) {
this.blurAll();
}
};
$.imageSelectAreas.prototype.reset = function () {
var that = this;
this._eachArea(function (area, id) {
that.remove(id);
});
this._refresh();
};
$.imageSelectAreas.prototype.destroy = function () {
this.reset();
this.$holder.remove();
this.$overlay.remove();
this.$trigger.remove();
this.$image.css("width", "").css("position", "").unwrap();
this.$image.removeData("mainImageSelectAreas");
};
$.imageSelectAreas.prototype.areas = function () {
var ret = [];
this._eachArea(function (area) {
ret.push(area.getData());
});
return ret;
};
$.imageSelectAreas.prototype.relativeAreas = function () {
var areas = this.areas(),
ret = [],
ratio = this.ratio,
scale = function (val) {
return Math.floor(val / ratio);
};
for (var i = 0; i < areas.length; i++) {
ret[i] = $.extend({}, areas[i]);
ret[i].x = scale(ret[i].x);
ret[i].y = scale(ret[i].y);
ret[i].width = scale(ret[i].width);
ret[i].height = scale(ret[i].height);
}
return ret;
};
$.imageSelectAreas.prototype.blurAll = function () {
this._eachArea(function (area) {
area.blur();
});
};
$.imageSelectAreas.prototype.contains = function (point) {
var res = false;
this._eachArea(function (area) {
if (area.contains(point)) {
res = true;
return false;
}
});
return res;
};
$.selectAreas = function(object, options) {
var $object = $(object);
if (! $object.data("mainImageSelectAreas")) {
var mainImageSelectAreas = new $.imageSelectAreas();
mainImageSelectAreas.init(object, options);
$object.data("mainImageSelectAreas", mainImageSelectAreas);
$object.trigger("loaded");
}
return $object.data("mainImageSelectAreas");
};
$.fn.selectAreas = function(customOptions) {
if ( $.imageSelectAreas.prototype[customOptions] ) { // Method call
var ret = $.imageSelectAreas.prototype[ customOptions ].apply( $.selectAreas(this), Array.prototype.slice.call( arguments, 1 ));
return typeof ret === "undefined" ? this : ret;
} else if ( typeof customOptions === "object" || ! customOptions ) { // Initialization
//Iterate over each object
this.each(function() {
var currentObject = this,
image = new Image();
// And attach selectAreas when the object is loaded
image.onload = function() {
$.selectAreas(currentObject, customOptions);
};
// Reset the src because cached images don"t fire load sometimes
image.src = currentObject.src;
});
return this;
} else {
$.error( "Method " + customOptions + " does not exist on jQuery.selectAreas" );
}
};
}) (jQuery);
pub/static/frontend/Sm/shop4u/en_US/js/darkroom.css 0 → 100644
View file @ 754d3428
.darkroom-container{position:relative}.darkroom-image-container{top:0;left:0}.darkroom-toolbar{display:block;position:absolute;top:-45px;left:0;background:#444;height:40px;min-width:40px;z-index:99;border-radius:2px;white-space:nowrap;padding:0 5px}.darkroom-toolbar:before{content:"";position:absolute;bottom:-7px;left:20px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #444}.darkroom-button-group{display:inline-block;margin:0;padding:0}.darkroom-button-group:last-child{border-right:none}.darkroom-button{box-sizing:border-box;background:transparent;border:none;outline:none;padding:2px 0 0 0;width:40px;height:40px}.darkroom-button:hover{cursor:pointer;background:#555}.darkroom-button:active{cursor:pointer;background:#333}.darkroom-button:disabled .darkroom-icon{fill:#666}.darkroom-button:disabled:hover{cursor:default;background:transparent}.darkroom-button.darkroom-button-active .darkroom-icon{fill:#33b5e5}.darkroom-button.darkroom-button-hidden{display:none}.darkroom-button.darkroom-button-success .darkroom-icon{fill:#99cc00}.darkroom-button.darkroom-button-warning .darkroom-icon{fill:#FFBB33}.darkroom-button.darkroom-button-danger .darkroom-icon{fill:#FF4444}.darkroom-icon{width:24px;height:24px;fill:#fff}
pub/static/frontend/Sm/shop4u/en_US/js/selectareas.js 0 → 100755
View file @ 754d3428
/* global window, Image, jQuery */
/**
* @author 360Learning
* @author Catalin Dogaru (https://github.com/cdog - http://code.tutsplus.com/tutorials/how-to-create-a-jquery-image-cropping-plugin-from-scratch-part-i--net-20994)
* @author Adrien David-Sivelle (https://github.com/AdrienDS - Refactoring, Multiselections & Mobile compatibility)
*/
(function($) {
$.imageArea = function(parent, id) {
var options = parent.options,
$image = parent.$image,
$trigger = parent.$trigger,
$outline,
$selection,
$resizeHandlers = {},
$btDelete,
resizeHorizontally = true,
resizeVertically = true,
selectionOffset = [0, 0],
selectionOrigin = [0, 0],
area = {
id: id,
x: 0,
y: 0,
z: 0,
height: 0,
width: 0
},
blur = function () {
area.z = 0;
refresh("blur");
},
focus = function () {
parent.blurAll();
area.z = 100;
refresh();
},
getData = function () {
return area;
},
fireEvent = function (event) {
$image.trigger(event, [area.id, parent.areas()]);
},
cancelEvent = function (e) {
var event = e || window.event || {};
event.cancelBubble = true;
event.returnValue = false;
event.stopPropagation && event.stopPropagation(); // jshint ignore: line
event.preventDefault && event.preventDefault(); // jshint ignore: line
},
off = function() {
$.each(arguments, function (key, val) {
on(val);
});
},
on = function (type, handler) {
var browserEvent, mobileEvent;
switch (type) {
case "start":
browserEvent = "mousedown";
mobileEvent = "touchstart";
break;
case "move":
browserEvent = "mousemove";
mobileEvent = "touchmove";
break;
case "stop":
browserEvent = "mouseup";
mobileEvent = "touchend";
break;
default:
return;
}
if (handler && jQuery.isFunction(handler)) {
$(window.document).on(browserEvent, handler).on(mobileEvent, handler);
} else {
$(window.document).off(browserEvent).off(mobileEvent);
}
},
updateSelection = function () {
// Update the outline layer
$outline.css({
cursor: "default",
width: area.width,
height: area.height,
left: area.x,
top: area.y,
"z-index": area.z
});
// Update the selection layer
$selection.css({
backgroundPosition : ( - area.x - 1) + "px " + ( - area.y - 1) + "px",
cursor : options.allowMove ? "move" : "default",
width: (area.width - 2 > 0) ? (area.width - 2) : 0,
height: (area.height - 2 > 0) ? (area.height - 2) : 0,
left : area.x + 1,
top : area.y + 1,
"z-index": area.z + 2
});
},
updateResizeHandlers = function (show) {
if (! options.allowResize) {
return;
}
if (show) {
$.each($resizeHandlers, function(name, $handler) {
var top,
left,
semiwidth = Math.round($handler.width() / 2),
semiheight = Math.round($handler.height() / 2),
vertical = name[0],
horizontal = name[name.length - 1];
if (vertical === "n") { // ====== North* ======
top = - semiheight;
} else if (vertical === "s") { // ====== South* ======
top = area.height - semiheight - 1;
} else { // === East & West ===
top = Math.round(area.height / 2) - semiheight - 1;
}
if (horizontal === "e") { // ====== *East ======
left = area.width - semiwidth - 1;
} else if (horizontal === "w") { // ====== *West ======
left = - semiwidth;
} else { // == North & South ==
left = Math.round(area.width / 2) - semiwidth - 1;
}
$handler.css({
display: "block",
left: area.x + left,
top: area.y + top,
"z-index": area.z + 1
});
});
} else {
$(".select-areas-resize-handler").each(function() {
$(this).css({ display: "none" });
});
}
},
updateBtDelete = function (visible) {
if ($btDelete) {
$btDelete.css({
display: visible ? "block" : "none",
left: area.x + area.width + 1,
top: area.y - $btDelete.outerHeight() - 1,
"z-index": area.z + 1
});
}
},
updateCursor = function (cursorType) {
$outline.css({
cursor: cursorType
});
$selection.css({
cursor: cursorType
});
},
refresh = function(sender) {
switch (sender) {
case "startSelection":
parent._refresh();
updateSelection();
updateResizeHandlers();
updateBtDelete(true);
break;
case "pickSelection":
case "pickResizeHandler":
updateResizeHandlers();
break;
case "resizeSelection":
updateSelection();
updateResizeHandlers();
updateCursor("crosshair");
updateBtDelete(true);
break;
case "moveSelection":
updateSelection();
updateResizeHandlers();
updateCursor("move");
updateBtDelete(true);
break;
case "blur":
updateSelection();
updateResizeHandlers();
updateBtDelete();
break;
//case "releaseSelection":
default:
updateSelection();
updateResizeHandlers(true);
updateBtDelete(true);
}
},
startSelection = function (event) {
cancelEvent(event);
// Reset the selection size
area.width = options.minSize[0];
area.height = options.minSize[1];
focus();
on("move", resizeSelection);
on("stop", releaseSelection);
// Get the selection origin
selectionOrigin = getMousePosition(event);
if (selectionOrigin[0] + area.width > $image.width()) {
selectionOrigin[0] = $image.width() - area.width;
}
if (selectionOrigin[1] + area.height > $image.height()) {
selectionOrigin[1] = $image.height() - area.height;
}
// And set its position
area.x = selectionOrigin[0];
area.y = selectionOrigin[1];
refresh("startSelection");
},
pickSelection = function (event) {
cancelEvent(event);
focus();
on("move", moveSelection);
on("stop", releaseSelection);
var mousePosition = getMousePosition(event);
// Get the selection offset relative to the mouse position
selectionOffset[0] = mousePosition[0] - area.x;
selectionOffset[1] = mousePosition[1] - area.y;
refresh("pickSelection");
},
pickResizeHandler = function (event) {
cancelEvent(event);
focus();
var card = event.target.className.split(" ")[1];
if (card[card.length - 1] === "w") {
selectionOrigin[0] += area.width;
area.x = selectionOrigin[0] - area.width;
}
if (card[0] === "n") {
selectionOrigin[1] += area.height;
area.y = selectionOrigin[1] - area.height;
}
if (card === "n" || card === "s") {
resizeHorizontally = false;
} else if (card === "e" || card === "w") {
resizeVertically = false;
}
on("move", resizeSelection);
on("stop", releaseSelection);
refresh("pickResizeHandler");
},
resizeSelection = function (event) {
cancelEvent(event);
focus();
var mousePosition = getMousePosition(event);
// Get the selection size
var height = mousePosition[1] - selectionOrigin[1],
width = mousePosition[0] - selectionOrigin[0];
// If the selection size is smaller than the minimum size set it to minimum size
if (Math.abs(width) < options.minSize[0]) {
width = (width >= 0) ? options.minSize[0] : - options.minSize[0];
}
if (Math.abs(height) < options.minSize[1]) {
height = (height >= 0) ? options.minSize[1] : - options.minSize[1];
}
// Test if the selection size exceeds the image bounds
if (selectionOrigin[0] + width < 0 || selectionOrigin[0] + width > $image.width()) {
width = - width;
}
if (selectionOrigin[1] + height < 0 || selectionOrigin[1] + height > $image.height()) {
height = - height;
}
// Test if the selection size is bigger than the maximum size (ignored if minSize > maxSize)
if (options.maxSize[0] > options.minSize[0] && options.maxSize[1] > options.minSize[1]) {
if (Math.abs(width) > options.maxSize[0]) {
width = (width >= 0) ? options.maxSize[0] : - options.maxSize[0];
}
if (Math.abs(height) > options.maxSize[1]) {
height = (height >= 0) ? options.maxSize[1] : - options.maxSize[1];
}
}
// Set the selection size
if (resizeHorizontally) {
area.width = width;
}
if (resizeVertically) {
area.height = height;
}
// If any aspect ratio is specified
if (options.aspectRatio) {
// Calculate the new width and height
if ((width > 0 && height > 0) || (width < 0 && height < 0)) {
if (resizeHorizontally) {
height = Math.round(width / options.aspectRatio);
} else {
width = Math.round(height * options.aspectRatio);
}
} else {
if (resizeHorizontally) {
height = - Math.round(width / options.aspectRatio);
} else {
width = - Math.round(height * options.aspectRatio);
}
}
// Test if the new size exceeds the image bounds
if (selectionOrigin[0] + width > $image.width()) {
width = $image.width() - selectionOrigin[0];
height = (height > 0) ? Math.round(width / options.aspectRatio) : - Math.round(width / options.aspectRatio);
}
if (selectionOrigin[1] + height < 0) {
height = - selectionOrigin[1];
width = (width > 0) ? - Math.round(height * options.aspectRatio) : Math.round(height * options.aspectRatio);
}
if (selectionOrigin[1] + height > $image.height()) {
height = $image.height() - selectionOrigin[1];
width = (width > 0) ? Math.round(height * options.aspectRatio) : - Math.round(height * options.aspectRatio);
}
// Set the selection size
area.width = width;
area.height = height;
}
if (area.width < 0) {
area.width = Math.abs(area.width);
area.x = selectionOrigin[0] - area.width;
} else {
area.x = selectionOrigin[0];
}
if (area.height < 0) {
area.height = Math.abs(area.height);
area.y = selectionOrigin[1] - area.height;
} else {
area.y = selectionOrigin[1];
}
fireEvent("changing");
refresh("resizeSelection");
},
moveSelection = function (event) {
cancelEvent(event);
if (! options.allowMove) {
return;
}
focus();
var mousePosition = getMousePosition(event);
moveTo({
x: mousePosition[0] - selectionOffset[0],
y: mousePosition[1] - selectionOffset[1]
});
fireEvent("changing");
},
moveTo = function (point) {
// Set the selection position on the x-axis relative to the bounds
// of the image
if (point.x > 0) {
if (point.x + area.width < $image.width()) {
area.x = point.x;
} else {
area.x = $image.width() - area.width;
}
} else {
area.x = 0;
}
// Set the selection position on the y-axis relative to the bounds
// of the image
if (point.y > 0) {
if (point.y + area.height < $image.height()) {
area.y = point.y;
} else {
area.y = $image.height() - area.height;
}
} else {
area.y = 0;
}
refresh("moveSelection");
},
releaseSelection = function (event) {
cancelEvent(event);
off("move", "stop");
// Update the selection origin
selectionOrigin[0] = area.x;
selectionOrigin[1] = area.y;
// Reset the resize constraints
resizeHorizontally = true;
resizeVertically = true;
fireEvent("changed");
refresh("releaseSelection");
},
deleteSelection = function (event) {
cancelEvent(event);
$selection.remove();
$outline.remove();
$.each($resizeHandlers, function(card, $handler) {
$handler.remove();
});
$btDelete.remove();
parent._remove(id);
fireEvent("changed");
},
getElementOffset = function (object) {
var offset = $(object).offset();
return [offset.left, offset.top];
},
getMousePosition = function (event) {
var imageOffset = getElementOffset($image);
if (! event.pageX) {
if (event.originalEvent) {
event = event.originalEvent;
}
if(event.changedTouches) {
event = event.changedTouches[0];
}
if(event.touches) {
event = event.touches[0];
}
}
var x = event.pageX - imageOffset[0],
y = event.pageY - imageOffset[1];
x = (x < 0) ? 0 : (x > $image.width()) ? $image.width() : x;
y = (y < 0) ? 0 : (y > $image.height()) ? $image.height() : y;
return [x, y];
};
// Initialize an outline layer and place it above the trigger layer
$outline = $("<div class=\"select-areas-outline\" />")
.css({
opacity : options.outlineOpacity,
position : "absolute"
})
.insertAfter($trigger);
// Initialize a selection layer and place it above the outline layer
$selection = $("<div />")
.addClass("select-areas-background-area")
.css({
background : "#fff url(" + $image.attr("src") + ") no-repeat",
backgroundSize : $image.width() + "px",
position : "absolute"
})
.insertAfter($outline);
// Initialize all handlers
if (options.allowResize) {
$.each(["nw", "n", "ne", "e", "se", "s", "sw", "w"], function (key, card) {
$resizeHandlers[card] = $("<div class=\"select-areas-resize-handler " + card + "\"/>")
.css({
opacity : 0.5,
position : "absolute",
cursor : card + "-resize"
})
.insertAfter($selection)
.mousedown(pickResizeHandler)
.bind("touchstart", pickResizeHandler);
});
}
// initialize delete button
if (options.allowDelete) {
var bindToDelete = function ($obj) {
$obj.click(deleteSelection)
.bind("touchstart", deleteSelection)
.bind("tap", deleteSelection);
return $obj;
};
$btDelete = bindToDelete($("<div class=\"delete-area\" />"))
.append(bindToDelete($("<div class=\"select-areas-delete-area\" />")))
.insertAfter($selection);
}
if (options.allowMove) {
$selection.mousedown(pickSelection).bind("touchstart", pickSelection);
}
focus();
return {
getData: getData,
startSelection: startSelection,
deleteSelection: deleteSelection,
options: options,
blur: blur,
focus: focus,
nudge: function (point) {
point.x = area.x;
point.y = area.y;
if (point.d) {
point.y = area.y + point.d;
}
if (point.u) {
point.y = area.y - point.u;
}
if (point.l) {
point.x = area.x - point.l;
}
if (point.r) {
point.x = area.x + point.r;
}
moveTo(point);
fireEvent("changed");
},
set: function (dimensions, silent) {
area = $.extend(area, dimensions);
selectionOrigin[0] = area.x;
selectionOrigin[1] = area.y;
if (! silent) {
fireEvent("changed");
}
},
contains: function (point) {
return (point.x >= area.x) && (point.x <= area.x + area.width) &&
(point.y >= area.y) && (point.y <= area.y + area.height);
}
};
};
$.imageSelectAreas = function() { };
$.imageSelectAreas.prototype.init = function (object, customOptions) {
var that = this,
defaultOptions = {
allowEdit: true,
allowMove: true,
allowResize: true,
allowSelect: true,
allowDelete: true,
allowNudge: true,
aspectRatio: 0,
minSize: [0, 0],
maxSize: [0, 0],
width: 0,
maxAreas: 0,
outlineOpacity: 0.5,
overlayOpacity: 0.5,
areas: [],
onChanging: null,
onChanged: null
};
this.options = $.extend(defaultOptions, customOptions);
if (! this.options.allowEdit) {
this.options.allowSelect = this.options.allowMove = this.options.allowResize = this.options.allowDelete = false;
}
this._areas = {};
// Initialize the image layer
this.$image = $(object);
this.ratio = 1;
if (this.options.width && this.$image.width() && this.options.width !== this.$image.width()) {
this.ratio = this.options.width / this.$image.width();
this.$image.width(this.options.width);
}
if (this.options.onChanging) {
this.$image.on("changing", this.options.onChanging);
}
if (this.options.onChanged) {
this.$image.on("changed", this.options.onChanged);
}
if (this.options.onLoaded) {
this.$image.on("loaded", this.options.onLoaded);
}
// Initialize an image holder
this.$holder = $("<div />")
.css({
position : "relative",
width: this.$image.width(),
height: this.$image.height()
});
// Wrap the holder around the image
this.$image.wrap(this.$holder)
.css({
position : "absolute"
});
// Initialize an overlay layer and place it above the image
this.$overlay = $("<div class=\"select-areas-overlay\" />")
.css({
opacity : this.options.overlayOpacity,
position : "absolute",
width: this.$image.width(),
height: this.$image.height()
})
.insertAfter(this.$image);
// Initialize a trigger layer and place it above the overlay layer
this.$trigger = $("<div />")
.css({
backgroundColor : "#000000",
opacity : 0,
position : "absolute",
width: this.$image.width(),
height: this.$image.height()
})
.insertAfter(this.$overlay);
$.each(this.options.areas, function (key, area) {
that._add(area, true);
});
this.blurAll();
this._refresh();
if (this.options.allowSelect) {
// Bind an event handler to the "mousedown" event of the trigger layer
this.$trigger.mousedown($.proxy(this.newArea, this)).on("touchstart", $.proxy(this.newArea, this));
}
if (this.options.allowNudge) {
$('html').keydown(function (e) { // move selection with arrow keys
var codes = {
37: "l",
38: "u",
39: "r",
40: "d"
},
direction = codes[e.which],
selectedArea;
if (direction) {
that._eachArea(function (area) {
if (area.getData().z === 100) {
selectedArea = area;
return false;
}
});
if (selectedArea) {
var move = {};
move[direction] = 1;
selectedArea.nudge(move);
}
}
});
}
};
$.imageSelectAreas.prototype._refresh = function () {
var nbAreas = this.areas().length;
this.$overlay.css({
display : nbAreas? "block" : "none"
});
if (nbAreas) {
this.$image.addClass("blurred");
} else {
this.$image.removeClass("blurred");
}
this.$trigger.css({
cursor : this.options.allowSelect ? "crosshair" : "default"
});
};
$.imageSelectAreas.prototype._eachArea = function (cb) {
$.each(this._areas, function (id, area) {
if (area) {
return cb(area, id);
}
});
};
$.imageSelectAreas.prototype._remove = function (id) {
delete this._areas[id];
this._refresh();
};
$.imageSelectAreas.prototype.remove = function (id) {
if (this._areas[id]) {
this._areas[id].deleteSelection();
}
};
$.imageSelectAreas.prototype.newArea = function (event) {
var id = -1;
this.blurAll();
if (this.options.maxAreas && this.options.maxAreas <= this.areas().length) {
return id;
}
this._eachArea(function (area, index) {
id = Math.max(id, parseInt(index, 10));
});
id += 1;
this._areas[id] = $.imageArea(this, id);
if (event) {
this._areas[id].startSelection(event);
}
return id;
};
$.imageSelectAreas.prototype.set = function (id, options, silent) {
if (this._areas[id]) {
options.id = id;
this._areas[id].set(options, silent);
this._areas[id].focus();
}
};
$.imageSelectAreas.prototype._add = function (options, silent) {
var id = this.newArea();
this.set(id, options, silent);
};
$.imageSelectAreas.prototype.add = function (options) {
var that = this;
this.blurAll();
if ($.isArray(options)) {
$.each(options, function (key, val) {
that._add(val);
});
} else {
this._add(options);
}
this._refresh();
if (! this.options.allowSelect && ! this.options.allowMove && ! this.options.allowResize && ! this.options.allowDelete) {
this.blurAll();
}
};
$.imageSelectAreas.prototype.reset = function () {
var that = this;
this._eachArea(function (area, id) {
that.remove(id);
});
this._refresh();
};
$.imageSelectAreas.prototype.destroy = function () {
this.reset();
this.$holder.remove();
this.$overlay.remove();
this.$trigger.remove();
this.$image.css("width", "").css("position", "").unwrap();
this.$image.removeData("mainImageSelectAreas");
};
$.imageSelectAreas.prototype.areas = function () {
var ret = [];
this._eachArea(function (area) {
ret.push(area.getData());
});
return ret;
};
$.imageSelectAreas.prototype.relativeAreas = function () {
var areas = this.areas(),
ret = [],
ratio = this.ratio,
scale = function (val) {
return Math.floor(val / ratio);
};
for (var i = 0; i < areas.length; i++) {
ret[i] = $.extend({}, areas[i]);
ret[i].x = scale(ret[i].x);
ret[i].y = scale(ret[i].y);
ret[i].width = scale(ret[i].width);
ret[i].height = scale(ret[i].height);
}
return ret;
};
$.imageSelectAreas.prototype.blurAll = function () {
this._eachArea(function (area) {
area.blur();
});
};
$.imageSelectAreas.prototype.contains = function (point) {
var res = false;
this._eachArea(function (area) {
if (area.contains(point)) {
res = true;
return false;
}
});
return res;
};
$.selectAreas = function(object, options) {
var $object = $(object);
if (! $object.data("mainImageSelectAreas")) {
var mainImageSelectAreas = new $.imageSelectAreas();
mainImageSelectAreas.init(object, options);
$object.data("mainImageSelectAreas", mainImageSelectAreas);
$object.trigger("loaded");
}
return $object.data("mainImageSelectAreas");
};
$.fn.selectAreas = function(customOptions) {
if ( $.imageSelectAreas.prototype[customOptions] ) { // Method call
var ret = $.imageSelectAreas.prototype[ customOptions ].apply( $.selectAreas(this), Array.prototype.slice.call( arguments, 1 ));
return typeof ret === "undefined" ? this : ret;
} else if ( typeof customOptions === "object" || ! customOptions ) { // Initialization
//Iterate over each object
this.each(function() {
var currentObject = this,
image = new Image();
// And attach selectAreas when the object is loaded
image.onload = function() {
$.selectAreas(currentObject, customOptions);
};
// Reset the src because cached images don"t fire load sometimes
image.src = currentObject.src;
});
return this;
} else {
$.error( "Method " + customOptions + " does not exist on jQuery.selectAreas" );
}
};
}) (jQuery);
pub/static/frontend/Sm/shop4u/en_US/requirejs-config.js
View file @ 754d3428
......@@ -30,11 +30,19 @@ var config = {
'popupWindow': 'mage/popup-window',
'validation': 'mage/validation/validation',
'welcome': 'Magento_Theme/js/view/welcome',
'breadcrumbs': 'Magento_Theme/js/view/breadcrumbs'
'breadcrumbs': 'Magento_Theme/js/view/breadcrumbs',
// 'selectareas': 'jquery/selectareas'
}
},
paths: {
'jquery/ui': 'jquery/jquery-ui'
'jquery/ui': 'jquery/jquery-ui',
'selectareas': 'jquery/selectareas'
},
shim: {
'selectareas': {
deps: ['jquery']
}
},
deps: [
'jquery/jquery.mobile.custom',
......@@ -890,42 +898,42 @@ var config = {
require.config(config);
})();
(function() {
var config = {
map: {
'*': {
customModal: 'Sm_CartQuickPro/js/custom-modal',
quickView: 'Sm_CartQuickPro/js/custom-quickview',
ajaxCart: 'Sm_CartQuickPro/js/custom-addtocart',
addToCart: 'Sm_CartQuickPro/js/custom-msrp',
sidebar: 'Sm_CartQuickPro/js/custom-sidebar',
compareItems: 'Sm_CartQuickPro/js/custom-compare',
wishlist: 'Sm_CartQuickPro/js/custom-wishlist'
}
},
deps: [
'Magento_Catalog/js/catalog-add-to-cart',
'Magento_Msrp/js/msrp'
]
};
require.config(config);
})();
(function() {
var config = {
map: {
'*': {
jquerybootstrap: "Sm_Shop4u/js/bootstrap/bootstrap.min",
owlcarousel: "Sm_Shop4u/js/owl.carousel",
jqueryfancyboxpack: "Sm_Shop4u/js/jquery.fancybox.pack",
fancybuttons: "Sm_Shop4u/js/helpers/jquery.fancybox-buttons",
fancymedia: "Sm_Shop4u/js/helpers/jquery.fancybox-media",
fancythumbs: "Sm_Shop4u/js/helpers/jquery.fancybox-thumbs",
jqueryunveil: "Sm_Shop4u/js/jquery.unveil",
yttheme: "Sm_Shop4u/js/yttheme"
}
}
var config = {
map: {
'*': {
customModal: 'Sm_CartQuickPro/js/custom-modal',
quickView: 'Sm_CartQuickPro/js/custom-quickview',
ajaxCart: 'Sm_CartQuickPro/js/custom-addtocart',
addToCart: 'Sm_CartQuickPro/js/custom-msrp',
sidebar: 'Sm_CartQuickPro/js/custom-sidebar',
compareItems: 'Sm_CartQuickPro/js/custom-compare',
wishlist: 'Sm_CartQuickPro/js/custom-wishlist'
}
},
deps: [
'Magento_Catalog/js/catalog-add-to-cart',
'Magento_Msrp/js/msrp'
]
};
require.config(config);
})();
(function() {
var config = {
map: {
'*': {
jquerybootstrap: "Sm_Shop4u/js/bootstrap/bootstrap.min",
owlcarousel: "Sm_Shop4u/js/owl.carousel",
jqueryfancyboxpack: "Sm_Shop4u/js/jquery.fancybox.pack",
fancybuttons: "Sm_Shop4u/js/helpers/jquery.fancybox-buttons",
fancymedia: "Sm_Shop4u/js/helpers/jquery.fancybox-media",
fancythumbs: "Sm_Shop4u/js/helpers/jquery.fancybox-thumbs",
jqueryunveil: "Sm_Shop4u/js/jquery.unveil",
yttheme: "Sm_Shop4u/js/yttheme"
}
}
};
require.config(config);
})();
......
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