Skip to content

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

added more features in canvas desging.

parent 0187c4ad
Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 90 deletions
app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/gallery.phtml
View file @ 954e9f8f
...@@ -32,8 +32,43 @@ $breakpoints = $_config->getProductDetail('breakpoints_width'); ...@@ -32,8 +32,43 @@ $breakpoints = $_config->getProductDetail('breakpoints_width');
?> ?>
<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>
<link rel="Stylesheet" type="text/css" href="https://foliotek.github.io/Croppie/croppie.css" />
<iframe name="my_iframe" src="" style="display: none"></iframe> <iframe name="my_iframe" src="" style="display: none"></iframe>
<?php <?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
...@@ -48,11 +83,20 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -48,11 +83,20 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
$dimension = explode(':', $option); $dimension = explode(':', $option);
$hv = explode('X', $dimension[0]); $hv = explode('X', $dimension[0]);
$xy = explode('X', $dimension[1]); $xy = explode('X', $dimension[1]);
$path = str_ireplace('/index.php', '/', $_SERVER['SCRIPT_NAME']);
?> ?>
<div style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px; <div style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px;
position: absolute;border: 2px solid red;z-index: 9999; position: absolute;z-index: 9999;
margin-left: <?php echo $xy[0]; ?>px; margin-top: <?php echo $xy[1]; ?>px;"> margin-left: <?php echo $xy[0]; ?>px; margin-top: <?php echo $xy[1]; ?>px;">
<form name="image_form_<?php echo $optionKey; ?>" id="image_form_<?php echo $optionKey; ?>" action="/shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data"> <button class="removeBut" id="image_remove_<?php echo $optionKey; ?>" style="
float: right;
position: absolute;
z-index: 99;
display:none;
opacity:0.5;
/* width: 4%; */
">X</button>
<form name="image_form_<?php echo $optionKey; ?>" id="image_form_<?php echo $optionKey; ?>" action="<?php echo $path; ?>shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data">
<input type="file" name="file" id="imgupload<?php echo $optionKey; ?>" style="display:none"/> <input type="file" name="file" id="imgupload<?php echo $optionKey; ?>" style="display:none"/>
<input type="hidden" name="image_identifire" value="<?php echo $optionKey; ?>"> <input type="hidden" name="image_identifire" value="<?php echo $optionKey; ?>">
<input type="hidden" name="image_width" value="<?php echo $hv[0]; ?>"> <input type="hidden" name="image_width" value="<?php echo $hv[0]; ?>">
...@@ -63,39 +107,135 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -63,39 +107,135 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
</form> </form>
<script> <script>
var valJson = {};
require([ require([
'jquery', 'jquery',
], function ($) { ], function ($) {
'use strict'; 'use strict';
setTimeout(function () { setTimeout(function () {
var IT = setInterval(function(){
var src3 = jQuery('img.fotorama__img').attr('src');
var tmpImg3 = new Image();
tmpImg3.src=src3;
jQuery(tmpImg3).one('load',function(){
jQuery('.fotorama-item').remove();
jQuery('.magnifier-preview').remove();
clearInterval(IT);
});
},1000);
jQuery('span:contains("Canvas Images")').parent().next().children().attr('readonly','readonly'); 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 () {
if(typeof vanilla !=='undefined'){jQuery(vanilla).remove();}
if (jQuery('.image-upload-custom<?php echo $optionKey; ?>').find('.cr-image').length) {
return;
}
jQuery('#imgupload<?php echo $optionKey; ?>').trigger('click'); jQuery('#imgupload<?php echo $optionKey; ?>').trigger('click');
}); });
jQuery('#image_remove_<?php echo $optionKey; ?>').click(function () {
jQuery('.image-upload-custom<?php echo $optionKey; ?>').removeClass('croppie-container').html("");
jQuery('#imgupload<?php echo $optionKey; ?>').val('');
jQuery(this).hide();
});
jQuery('#imgupload<?php echo $optionKey; ?>').change(function () { jQuery('#imgupload<?php echo $optionKey; ?>').change(function () {
if (jQuery(this).val() != '') { if (jQuery(this).val() != '') {
jQuery("#image_form_<?php echo $optionKey; ?>").submit(); jQuery("#image_form_<?php echo $optionKey; ?>").submit();
jQuery(".col2-layout .container .row ").append('<div id="preloader" class="loader-wrapper"><div class="loader"></div></div>');
} }
}); });
}, 1500); }, 2000);
}); });
function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) { function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) {
if (status) { if (status) {
require([ require([
'jquery' 'jquery',
], function ($) { 'Croppie'
], function ($, Croppie) {
if (jQuery('#imgupload<?php echo $optionKey; ?>').length) { if (jQuery('#imgupload<?php echo $optionKey; ?>').length) {
jQuery('#image_remove_<?php echo $optionKey; ?>').show();
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:100%; height:100%'>");
var imgSpl = imageUrl.split('/'); 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,''));
var tmpImg = new Image();
tmpImg.src=imageUrl; //or document.images[i].src;
var orgWidth,orgHeight;
$(tmpImg).one('load',function(){
orgWidth = parseInt(tmpImg.width);
orgHeight = parseInt(tmpImg.height);
var putdragWidth = parseInt(<?php echo $hv[0]; ?>);
var putdragHeight = parseInt(<?php echo $hv[1]; ?>);
if(orgWidth > orgHeight){
var percent = (putdragHeight/orgHeight)*100;
orgHeight = putdragHeight;
orgWidth = orgWidth*(percent/100);
}else{
var percent = (putdragWidth/orgWidth)*100;
orgWidth = putdragWidth;
orgHeight = orgHeight*(percent/100);
}
});
//----------------calculation---------------//
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');
$('.image-upload-custom<?php echo $optionKey; ?>').removeClass('croppie-container').html("");
var el = document.getElementsByClassName('image-upload-custom<?php echo $optionKey; ?>');
$('.image-upload-custom<?php echo $optionKey; ?>').attr('rel',<?php echo $optionKey; ?>);
console.log("-----------------------ELEMENT------------------", el[0]);
var vanilla = new Croppie(el[0], {
viewport: { width: <?php echo $hv[0]; ?>, height: <?php echo $hv[1]; ?> },
boundary: { width: orgWidth, height: orgHeight },
showZoomer: false,
enableOrientation: true
});
console.log("vanilla", vanilla);
vanilla.bind({
url: imageUrl,
orientation: 1
});
//on button click
vanilla.result('blob').then(function(blob) {
console.log("vanilla", vanilla);
// do something with cropped blob
var getVal = jQuery('span:contains("Custom Image Canvas")').parent().next('div').children('input').val();
jQuery('span:contains("Canvas Images")').parent().next().children().attr('readonly','readonly'); // var info = $('.croppie-image').croppie('get');
// consoel.log("------------------------", info);
// console.log('image size==',size);
valJson={<?php echo $optionKey; ?>:{'image':imageUrl,'width':<?php echo $hv[0]; ?>,'height':<?php echo $hv[1]; ?>,'left':vanilla.element.clientLeft,'top':vanilla.element.clientTop}};
jQuery('span:contains("Custom Image Canvas")').parent().next('div').children('input').val(Object.assign(getVal,valJson));
//Above code to be continued by Ramesh
console.log('valJson=========',valJson,"===clientLeft=",vanilla.element.clientLeft,'=======clientTop==',vanilla.element.clientTop);
// set value in input from here for all images
});
$('#preloader').remove();
jQuery('.fotorama-item').remove();
jQuery('.magnifier-preview').remove();
} }
}); });
...@@ -114,7 +254,7 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon ...@@ -114,7 +254,7 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
<?php /* <?php /* ?>
<div style="width: 120px;height: 300px;position: absolute;border: 2px solid red;z-index: 99999;margin: auto;margin-left: 106px;"> <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"> <form action="/shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data">
<input type="file" name="file" id="imgupload" style="display:none"/> <input type="file" name="file" id="imgupload" style="display:none"/>
...@@ -144,20 +284,20 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon ...@@ -144,20 +284,20 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
}); });
function imageHolder(status, message, imageUrl) { function imageHolder(status, message, imageUrl) {
if (status) { if (status) {
require([ require([
'jquery', 'jquery',
], function ($) { ], function ($) {
if (jQuery('#imgupload').length) { if (jQuery('#imgupload').length) {
jQuery('.image-upload-custom').append("<img src='" + imageUrl + "' style='width:1000%; height:100%'>"); jQuery('.image-upload-custom').append("<img src='" + imageUrl + "' style='width:1000%; height:100%'>");
} }
}); });
} }
} }
</script> </script>
</div> </div>
*/ ?> <?php */ ?>
...@@ -200,55 +340,55 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon ...@@ -200,55 +340,55 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
"mage/gallery/gallery": { "mage/gallery/gallery": {
<?php /* ?> "mixins":["magnifier/magnify"], <?php /* ?> "mixins":["magnifier/magnify"],
"magnifierOpts": { "magnifierOpts": {
<?php if ($zoom_enable) { ?> <?php if ($zoom_enable) { ?>
"enabled": true, "enabled": true,
<?php } else { ?> <?php } else { ?>
"enabled": false, "enabled": false,
<?php } ?> <?php } ?>
"fullscreenzoom":"20", "fullscreenzoom":"20",
"top":"", "top":"",
"left":"", "left":"",
"height":"", "height":"",
"eventType":"hover", "eventType":"hover",
"width": <?php echo $zoom_width; ?>, "width": <?php echo $zoom_width; ?>,
"mode": "outside" "mode": "outside"
}, },
<?php */ ?> <?php */ ?>
"data": <?php /* @escapeNotVerified */ "data": <?php /* @escapeNotVerified */
echo $block->getGalleryImagesJson(); ?>, echo $block->getGalleryImagesJson(); ?>,
"options": { "options": {
<?php if ($thumbstyle == 'horizontal' || $thumbstyle == 'vertical') { ?> <?php if ($thumbstyle == 'horizontal' || $thumbstyle == 'vertical') { ?>
"nav": "thumbs", "nav": "thumbs",
"navdir": "<?php echo $thumbstyle; ?>", "navdir": "<?php echo $thumbstyle; ?>",
<?php } else { ?> <?php } else { ?>
"nav": "dots", "nav": "dots",
<?php } ?> <?php } ?>
<?php if ($loop) { ?> <?php if ($loop) { ?>
"loop": true, "loop": true,
<?php } else { ?> <?php } else { ?>
"loop": false, "loop": false,
<?php } ?> <?php } ?>
<?php if ($keyboard) { ?> <?php if ($keyboard) { ?>
"keyboard": true, "keyboard": true,
<?php } else { ?> <?php } else { ?>
"keyboard": false, "keyboard": false,
<?php } ?> <?php } ?>
<?php if ($bigNav) { ?> <?php if ($bigNav) { ?>
"arrows": true, "arrows": true,
<?php } else { ?> <?php } else { ?>
"arrows": false, "arrows": false,
<?php } ?> <?php } ?>
<?php if ($fullscreen) { ?> <?php if ($fullscreen) { ?>
"allowfullscreen": true, "allowfullscreen": true,
<?php } else { ?> <?php } else { ?>
"allowfullscreen": false, "allowfullscreen": false,
<?php } ?> <?php } ?>
...@@ -258,16 +398,16 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon ...@@ -258,16 +398,16 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
"showCaption": <?php /* @escapeNotVerified */ "showCaption": <?php /* @escapeNotVerified */
echo $block->getVar("gallery/caption"); ?>, echo $block->getVar("gallery/caption"); ?>,
<?php endif; ?> <?php endif; ?>
"width": "<?php /* @escapeNotVerified */ "width": "<?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>", echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>",
<?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?> <?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
"height": <?php /* @escapeNotVerified */ "height": <?php /* @escapeNotVerified */
echo $block->getImageAttribute('product_page_image_medium', 'height') echo $block->getImageAttribute('product_page_image_medium', 'height')
?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>, ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
<?php endif; ?> <?php endif; ?>
"thumbwidth": "<?php echo $thumbs_width; ?>", "thumbwidth": "<?php echo $thumbs_width; ?>",
"thumbheight": "<?php echo $thumbs_height; ?>", "thumbheight": "<?php echo $thumbs_height; ?>",
...@@ -277,20 +417,20 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon ...@@ -277,20 +417,20 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
<?php endif; ?> <?php endif; ?>
"transition": "<?php /* @escapeNotVerified */ "transition": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/transition/effect"); ?>", echo $block->getVar("gallery/transition/effect"); ?>",
<?php if ($thumbs_nav) { ?> <?php if ($thumbs_nav) { ?>
"navarrows": true, "navarrows": true,
<?php } else { ?> <?php } else { ?>
"navarrows": false, "navarrows": false,
<?php } ?> <?php } ?>
"navtype": "<?php /* @escapeNotVerified */ "navtype": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/navtype"); ?>", echo $block->getVar("gallery/navtype"); ?>",
"thumbmargin": <?php echo $_config->getProductDetail('thumbs_margin'); ?>, "thumbmargin": <?php echo $_config->getProductDetail('thumbs_margin'); ?>,
"thumbborderwidth": <?php echo $_config->getProductDetail('thumbs_borderwidth'); ?> "thumbborderwidth": <?php echo $_config->getProductDetail('thumbs_borderwidth'); ?>
}, },
"fullscreen": { "fullscreen": {
"nav": "thumbs", "nav": "thumbs",
<?php if ($block->getVar("gallery/fullscreen/loop")): ?> <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
...@@ -320,28 +460,27 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon ...@@ -320,28 +460,27 @@ jQuery('span:contains("Canvas Images")').parent().next().children().attr('readon
"transition": "<?php /* @escapeNotVerified */ "transition": "<?php /* @escapeNotVerified */
echo $block->getVar("gallery/fullscreen/transition/effect"); ?>" echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
}, },
"breakpoints":{ "breakpoints":{
"mobile":{ "mobile":{
"conditions":{ "conditions":{
"max-width":"<?php echo $breakpoints . 'px' ?>" "max-width":"<?php echo $breakpoints . 'px' ?>"
}, },
"options":{ "options":{
"options":{ "options":{
"nav":"dots" "nav":"dots"
}, },
"magnifierOpts": { "magnifierOpts": {
"enabled": false "enabled": false
} }
} }
} }
} }
} }
} }
} }
</script> </script>
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