Skip to content

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

commit files latest

parent 35eac5b1
Hide whitespace changes
Inline Side-by-side
Showing with 1224 additions and 7 deletions
app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/details.phtml
View file @ dd377e0e
...@@ -36,6 +36,7 @@ $tabStyle = $_config->getProductDetail('tab_style'); ...@@ -36,6 +36,7 @@ $tabStyle = $_config->getProductDetail('tab_style');
jQuery('#product_addtocart_form #select_3 option, #product_addtocart_form #select_2 option, #product_addtocart_form #select_4 option').each(function(){ jQuery('#product_addtocart_form #select_3 option, #product_addtocart_form #select_2 option, #product_addtocart_form #select_4 option').each(function(){
var $this = $(this); var $this = $(this);
var value = $this.text().trim(); var value = $this.text().trim();
var percent = parseInt(config[value.split(' ')[0]]); var percent = parseInt(config[value.split(' ')[0]]);
console.log("------------------------", `==${value}==`, percent, config, config[value], baseHeight, baseWidth); console.log("------------------------", `==${value}==`, percent, config, config[value], baseHeight, baseWidth);
if (percent && percent > 0) { if (percent && percent > 0) {
...@@ -44,18 +45,255 @@ $tabStyle = $_config->getProductDetail('tab_style'); ...@@ -44,18 +45,255 @@ $tabStyle = $_config->getProductDetail('tab_style');
$this.text(`${value.split(' ')[0]} (${heigth}x${width} CM)`); $this.text(`${value.split(' ')[0]} (${heigth}x${width} CM)`);
} }
}); });
}, 1500); }, 1500);
} }
}); });
</script> </script>
<?php } ?>
<?php }
<?php
} }
$show_custom_tab = $_config->getProductDetail('show_custom_tab'); $show_custom_tab = $_config->getProductDetail('show_custom_tab');
$custom_tab_name = $_config->getProductDetail('custom_tab_name'); $custom_tab_name = $_config->getProductDetail('custom_tab_name');
$customtab_content = $_config->getProductDetail('customtab_content'); $customtab_content = $_config->getProductDetail('customtab_content');
?> ?>
<link rel="stylesheet" type="text/css" media="all" href="//localhost/coconva2118/pub/static/version1569245418/frontend/Sm/shop4u/en_US/js/jquery.selectareas.css">
<?php if(!empty($product->getCustomAttribute('tile_price'))){?>
<script type="text/javascript">
var tile_desc='<?php echo $product->getCustomAttribute('tile_price')->getValue();?>';
tile_desc = tile_desc.split('-');
var tile_width = parseInt(tile_desc[0]);
var tile_height = parseInt(tile_desc[1]);
var tile_price = parseInt(tile_desc[2]);
</script>
<?php } ?>
<style type="text/css">
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #eeeeee;
border-bottom: 16px solid #eeeeee;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
z-index: 99999;
left: 50%;
transform: translate(-50%,-50%);
top: 50%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader-wrapper{
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
z-index: 999;
top: 0;
left: 0;
}
</style>
<script>
var DefVal = 350;
var widthLabel = 'Width For Wall Mural';
var heightLabel = 'Height For Wall Mural';
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 ($) {
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(".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) {
console.log('area====',area);
jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').val('Xpos:'+(area.x).toFixed(2)+' :: Ypos:'+(area.y).toFixed(2));
});
};
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>');
}
//----------------------creating checkbox for tiles------------//
$(
'<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');
//-------------------------------------------------------------//
setTimeout(function(){
var f_tile_width = (typeof tile_width !== 'undefined')?tile_width:50;
var f_tile_height = (typeof tile_height !== 'undefined')?tile_height:50;
var f_tile_price = (typeof tile_price !== 'undefined')?tile_price:50;
jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(DefVal);
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"/>')){
var tt = jQuery('img.fotorama__img').selectAreas({
// minSize: [500, 500],
onChanged: debugQtyAreas,
width: DefVal,
height: DefVal,
maxAreas: 1,
areas: [
{
x: 0,
y: 0,
width: DefVal,
height: DefVal,
}
]
});
setPrice(DefVal,DefVal,f_tile_width,f_tile_height,f_tile_price,0);
}
function setChangeArea(){
var w = jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val();
var h = jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val();
var xpos=0; var ypos=0;
if(parseInt(w) < 100 || parseInt(h) < 100){
alert("Minimum Value for Height and Width should be 100.");
return false;
}
if(parseInt(w) > parseInt(h)){ console.log('come in wid greater');
h = DefVal * (h/w);
w = DefVal;
ypos = (DefVal - h)/2;
}else if(parseInt(h) > parseInt(w)){
w = DefVal * (w/h);
h = DefVal;
xpos = (DefVal - w)/2;
}else{
w = DefVal;
h = DefVal;
}
console.log('h=',h,', w=',w,', xpos=',xpos,', ypos=',ypos);
var areaOptions = {
x: xpos,
y: ypos,
width: w,
height: h,
};
tt.selectAreas('reset');
jQuery('img.fotorama__img').selectAreas('add', areaOptions);
$('.select-areas-resize-handler').remove();
$('.delete-area').remove();
$('#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)});
};
//--------------------------hiding price span--------------------//
jQuery('.price-notice').hide();
jQuery('.price-container.tax.weee').hide();
jQuery('.fotorama__img').parent().css('left','34px');
jQuery('.fotorama__img').parent().css('top','25px');
//------------------------- hiding price span--------------------//
//----------------------appending price update on material options----------//
$('.admin__control-radio').each(function(){$(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')));
});
});
//--------------------------------------------------------------------------//
setTimeout(function(){
jQuery(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
jQuery(jQuery('span:contains('+heightLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
$('.select-areas-resize-handler').remove();
$('.delete-area').remove();
//------------------creating tiles here---------------------------//
$('#tile_checkbox').on('change',function(){
if($(this).is(':checked')){
var htm = '<div style="background:white;color:white;"><ul>';
var kk=0;
var wh = jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val();
var hh = jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val();
var wdc = DefVal;
if(parseInt(wh) > parseInt(hh)){
wdc = DefVal;
}else if(parseInt(hh) > parseInt(wh)){
wdc = DefVal * (wh/hh);
}
for(i=0; i < parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()); i +=f_tile_width){
var wd = f_tile_width;
if((parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()) - i) < f_tile_width){
wd = parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()) - i;
}
var wdPer = (wd/parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()))*100;
htm += '<li style="left:'+kk+'px;width:'+Math.round((wdPer/100)*wdc)+'px;height:100%;position:absolute;background:grey;opacity:0.5;border:solid 1px"><div style="box-sizing:border-box;position:relative;height:100%;padding-top:5px;font-size:13px;text-align:center"><span style="transform:translateX(-50%) translateY(-50%) rotate(90deg);display:block;text-align:center;position:absolute;padding-left:'+(hh/10)*4+'px;padding-bottom:90%;">'+Math.round((wdPer/100)*wh)+'cm</span></div></li>';
kk +=Math.round((wdPer/100)*wdc);
}
htm += '</ul></div>';
$('.select-areas-background-area').html(htm);
}else{
$('.select-areas-background-area').html(' ');
}
});
//----------------------------------------------------------------//
},1000);
jQuery('#preloader').remove();
}, 4000);
}
});
</script>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')): ?> <?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')): ?>
<div class="product info detailed"> <div class="product info detailed">
<?php $layout = $block->getLayout(); ?> <?php $layout = $block->getLayout(); ?>
......
app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/gallery.phtml
View file @ dd377e0e
...@@ -16,9 +16,8 @@ $_config = $this->helper('Sm\Shop4u\Helper\Data'); ...@@ -16,9 +16,8 @@ $_config = $this->helper('Sm\Shop4u\Helper\Data');
$zoom_enable = $_config->getProductDetail('use_zoom_image'); $zoom_enable = $_config->getProductDetail('use_zoom_image');
$zoom_width = $_config->getProductDetail('zoom_width'); $zoom_width = $_config->getProductDetail('zoom_width');
$thumbstyle = "vertical";
//$thumbstyle = $_config->getProductDetail('thumbs_style'); //$thumbstyle = $_config->getProductDetail('thumbs_style');
$thumbstyle = 'vertical';
$loop = $_config->getProductDetail('image_loop'); $loop = $_config->getProductDetail('image_loop');
$keyboard = $_config->getProductDetail('image_keyboard'); $keyboard = $_config->getProductDetail('image_keyboard');
$bigNav = $_config->getProductDetail('image_navigation'); $bigNav = $_config->getProductDetail('image_navigation');
...@@ -29,9 +28,8 @@ $thumbs_nav = $_config->getProductDetail('thumbs_navigation'); ...@@ -29,9 +28,8 @@ $thumbs_nav = $_config->getProductDetail('thumbs_navigation');
$breakpoints = $_config->getProductDetail('breakpoints_width'); $breakpoints = $_config->getProductDetail('breakpoints_width');
?>
?>
...@@ -70,6 +68,8 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -70,6 +68,8 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
], function ($) { ], function ($) {
'use strict'; 'use strict';
setTimeout(function () { setTimeout(function () {
jQuery('span:contains("Canvas Images")').parent().next().children().attr('readonly','readonly');
jQuery('.image-upload-custom<?php echo $optionKey; ?>').click(function () { jQuery('.image-upload-custom<?php echo $optionKey; ?>').click(function () {
jQuery('#imgupload<?php echo $optionKey; ?>').trigger('click'); jQuery('#imgupload<?php echo $optionKey; ?>').trigger('click');
}); });
...@@ -82,6 +82,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -82,6 +82,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
}, 1500); }, 1500);
}); });
function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) { function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) {
if (status) { if (status) {
require([ require([
...@@ -90,6 +91,12 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -90,6 +91,12 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
if (jQuery('#imgupload<?php echo $optionKey; ?>').length) { if (jQuery('#imgupload<?php echo $optionKey; ?>').length) {
jQuery('.image-upload-custom<?php echo $optionKey; ?>').html(""); jQuery('.image-upload-custom<?php echo $optionKey; ?>').html("");
jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:1000%; height:100%'>"); jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:1000%; height:100%'>");
var imgSpl = imageUrl.split('/');
jQuery('span:contains("Canvas Images")').parent().next().children().val((jQuery('span:contains("Canvas Images")').parent().next().children().val()+','+imgSpl[imgSpl.length - 1]).replace(/^,|,$/g,''));
jQuery('span:contains("Canvas Images")').parent().next().children().attr('readonly','readonly');
} }
}); });
} }
...@@ -105,6 +112,60 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -105,6 +112,60 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
<?php /*
<div style="width: 120px;height: 300px;position: absolute;border: 2px solid red;z-index: 99999;margin: auto;margin-left: 106px;">
<form action="/shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data">
<input type="file" name="file" id="imgupload" style="display:none"/>
<div class='image-upload-custom' style="width: 120px;height: 300px;border: 3px solid gray;"></div>
</form>
<iframe name="my_iframe" src="" style="display: none"></iframe>
<script>
require([
'jquery',
], function ($) {
'use strict';
setTimeout(function () {
jQuery('.image-upload-custom').click(function () {
jQuery('#imgupload').trigger('click');
});
jQuery('#imgupload').change(function() {
if (jQuery(this).val() != '') {
jQuery(this).parents('form').submit();
}
});
}, 1500);
});
function imageHolder(status, message, imageUrl) {
if (status) {
require([
'jquery',
], function ($) {
if (jQuery('#imgupload').length) {
jQuery('.image-upload-custom').append("<img src='" + imageUrl + "' style='width:1000%; height:100%'>");
}
});
}
}
</script>
</div>
*/ ?>
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
<div data-role="loader" class="loading-mask"> <div data-role="loader" class="loading-mask">
<div class="loader"> <div class="loader">
...@@ -137,7 +198,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -137,7 +198,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
{ {
"[data-gallery-role=gallery-placeholder]": { "[data-gallery-role=gallery-placeholder]": {
"mage/gallery/gallery": { "mage/gallery/gallery": {
"mixins":["magnifier/magnify"], <?php /* ?> "mixins":["magnifier/magnify"],
"magnifierOpts": { "magnifierOpts": {
<?php if ($zoom_enable) { ?> <?php if ($zoom_enable) { ?>
"enabled": true, "enabled": true,
...@@ -154,7 +215,8 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -154,7 +215,8 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
"width": <?php echo $zoom_width; ?>, "width": <?php echo $zoom_width; ?>,
"mode": "outside" "mode": "outside"
}, },
"data": <?php /* @escapeNotVerified */ <?php */ ?>
"data": <?php /* @escapeNotVerified */
echo $block->getGalleryImagesJson(); ?>, echo $block->getGalleryImagesJson(); ?>,
"options": { "options": {
<?php if ($thumbstyle == 'horizontal' || $thumbstyle == 'vertical') { ?> <?php if ($thumbstyle == 'horizontal' || $thumbstyle == 'vertical') { ?>
...@@ -282,3 +344,4 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -282,3 +344,4 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
} }
</script> </script>
pub/static/frontend/Sm/shop4u/en_US/js/jquery.selectareas.css 0 → 100644
View file @ dd377e0e
.select-areas-overlay {
background-color: #000;
overflow: hidden;
position: absolute;
}
.blurred {
filter: url("/filters.svg#blur3px");
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
}
.select-areas-outline {
background: #fff url('outline.gif');
overflow: hidden;
}
.select-areas-resize-handler {
background-color: #000;
border: 1px #fff solid;
height: 8px;
width: 8px;
overflow: hidden;
}
.select-areas-delete-area {
background: url('bt-delete.png');
cursor: pointer;
height: 16px;
width: 16px;
}
.delete-area {
position: absolute;
cursor: pointer;
padding: 5px;
}
pub/static/frontend/Sm/shop4u/en_US/js/jquery.selectareas.ie8.css 0 → 100644
View file @ dd377e0e
.select-areas-overlay {
background: none;
}
.select-areas-outline {
background: none;
visibility: hidden;
}
.select-areas-outline {
visibility: hidden;
}
.select-areas-background-area {
background: none !important;
margin: -1px 0 0 -1px;
border: 2px solid green;
}
.blurred {
filter: none;
-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
}
pub/static/frontend/Sm/shop4u/en_US/js/jquery.selectareas.js 0 → 100755
View file @ dd377e0e
/* 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);
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