Skip to content

Instantly share code, notes, and snippets.

@nfriend21

nfriend21/gist:6928510

Created October 11, 2013 01:57
Show Gist options
  • Save nfriend21/6928510 to your computer and use it in GitHub Desktop.
Save nfriend21/6928510 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
function updateItemSummary() {
var size = $('form.build-product-form input[name=size]:checked').val(),
medium = $('input[name=medium_id]:checked').next().children('span').html(),
option = ($('input[name=medium_option]:checked').val() == 'none') ? 'not applicable' : $('input[name=medium_option]:checked').next().children('span').html(),
style = $('input[name=style]:checked').next().children('span').html(),
frame = $('input[name=frame_id]:checked').next().children('span').html(),
summary = '<b>Size:</b> ' + size +
'<br /><b>Medium:</b> ' + medium +
'<br /><b>Option:</b> ' + option +
'<br /><b>Style:</b> ' + style +
'<br /><b>Frame:</b> ' + frame;
$('#item_review').html('').append(summary);
}
function updatePrice() {
var productID = $('form.build-product-form').data('product-id'),
sizeVal = $('form.build-product-form input[name=size]:checked').val(),
mediumVal = $('input[name=medium_id]:checked').val(),
styleVal = $('input[name=style]:checked').val(),
frameVal = $('input[name=frame_id]:checked').val();
$.ajax({
type: "POST",
url: "/site_manager/stores/update_price",
data: { product_id: productID, size: sizeVal, medium_id: mediumVal, style: styleVal, frame_id: frameVal }
});
}
function adjustProductColumnWidth(sourceWidth, totalWidth) {
$('.product-photos').css('width', sourceWidth)
if ( $( window ).width() < 900 ) {
$('#product_form_container').css({
'width': '100%',
'height': '100%'
})
}
else {
$('#product_form_container').css('width', totalWidth - sourceWidth)
}
}
function adjustProductColumnHeight() {
if ( $( window ).width() < 900 ) {
$('.product-photos, #product_form_container').css('height', '100%')
}
else {
$('.product-photos, #product_form_container').css('min-height', $('div.art-store').height())
}
}
function toggleArtPreviews(imageHeight, imageWidth, modalWidth) {
var mediumType = $('input[name=medium_id]:checked').data('medium-type'),
style = $('input[name=style]:checked').val(),
frameImagePath = $('input[name=frame_id]:checked').data('image-path'),
marginLeftCalc = (((modalWidth - 100) - imageWidthforModal) / 2),
framedImage,
framedImageModal;
$('.art-preview').hide(); // hides all art previews in one swoop.
$('.shows-frame img').removeAttr('style');
if (style != 'frame') {
if (mediumType == 'canvas') {
var mediumOption = $('input[name=medium_option]:checked').val();
if (mediumOption == 'border_color') {
displayCanvasBorderColor(marginLeftCalc)
centerProductPreview($('#canvas_wrap_border_preview'), $('.canvas-main-border img').width())
}
else if (mediumOption == 'mirror') {
displayCanvasMirror(marginLeftCalc)
centerProductPreview($('#canvas_wrap_preview'), $('#canvas_wrap_preview img').width())
}
else {
displayCanvasOverflowed(marginLeftCalc)
centerProductPreview($('#canvas_wrap_overflowed_preview'), $('#canvas_wrap_overflowed_preview img').width())
}
}
else if (mediumType == 'paper') {
displayPaper();
centerProductPreview($('#paper_preview'), $('div.product-inner-container').width())
// adjustProductColumnWidth(imageWidth, 900);
}
}
else { // a frame is selected.
if (mediumType == 'canvas') {
console.log('here')
// display canvas with no wrap because it is more ideal for viewing with a frame.
framedImage = $('#canvas_no_wrap_preview').fadeIn()
framedImageModal = $('#canvas_no_wrap_preview_modal').show()
}
else if (mediumType == 'paper') {
// display paper with frame.
framedImage = $('#paper_preview').fadeIn()
framedImageModal = $('#paper_preview_modal').show()
}
framedImage.find('img').hide().css({
'border-width': '42px',
'-moz-border-image': 'url(' + frameImagePath + ') 27 repeat',
'-webkit-border-image': 'url(' + frameImagePath + ') 27 repeat',
'-o-border-image': 'url(' + frameImagePath + ') 27 repeat',
'border-image': 'url(' + frameImagePath + ') 27 repeat'
}).fadeIn()
framedImageModal.find('img').show().css({
'border-width': '42px',
'-moz-border-image': 'url(' + frameImagePath + ') 27 repeat',
'-webkit-border-image': 'url(' + frameImagePath + ') 27 repeat',
'-o-border-image': 'url(' + frameImagePath + ') 27 repeat',
'border-image': 'url(' + frameImagePath + ') 27 repeat'
})
}
}
function centerProductPreview(source, imageWidth) {
// centers the image within the display area
if ( $( window ).width() > 800 ) {
source.css({
'margin-left': ( $('div.product-photos').width() - imageWidth ) / 2 - 5 + 'px'
})
}
}
function displayPaper() {
$('#paper_preview').fadeIn();
$('#paper_preview_modal').show();
}
function displayCanvasBorderColor(marginLeftCalc) {
$('#canvas_wrap_border_preview')
.fadeIn()
.css({
'height': $('#canvas_wrap_border_preview div.canvas-main-border img').height() + 35,
'width': $('#canvas_wrap_border_preview div.canvas-main-border img').width() + 35
});
$('#canvas_wrap_border_preview_modal')
.css({
'height': imageHeight,
'max-width': '540px', 'margin-left': marginLeftCalc
})
.show();
// thin wrap
$('.canvas-main-border').addClass('depth-small')
$('.canvas-top-border').css({'margin-top': '11px', 'margin-left': '14px'})
$('.canvas-top-border div.clip').css({
'clip': 'rect(0px ' + canvasOverflowWidth + ' 10px 0px)',
'width': $('.canvas-main-border img').width() + 'px',
'height': $('.canvas-main-border img').height() + 'px',
'position': 'absolute',
'opacity': '.8'
})
$('.canvas-left-border').css({'left': '15px', 'top': '10px'})
$('.canvas-left-border div.clip').css({
'clip': 'rect(0px 15px ' + canvasOverflowHeight + ' 0px)',
'width': $('.canvas-main-border img').width() + 'px',
'height': $('.canvas-main-border img').height() + 'px',
'position': 'absolute',
'opacity': '.9'
})
// adjustProductColumnWidth($('#canvas_wrap_border_preview div.canvas-main-border img').width() + 50, 900);
}
function displayCanvasMirror(marginLeftCalc) {
$('#canvas_wrap_preview')
.fadeIn()
.css({
'height': $('#canvas_wrap_preview img').height() + 30,
'width': $('#canvas_wrap_preview img').width() + 30
});
$('#canvas_wrap_preview_modal').css({ 'height': imageHeight, 'max-width': '540px', 'margin-left': marginLeftCalc }).show();
// thin wrap
$('.canvas-main').addClass('depth-small')
$('.canvas-top').css({'margin-top': '11px', 'margin-left': '14px'})
$('.canvas-top div.clip').css({'clip': 'rect(0px ' + canvasOverflowWidth + ' 10px 0px)', 'position': 'absolute'})
$('.canvas-left').css({'left': '15px', 'top': '11px'})
$('.canvas-left div.clip').css({'clip': 'rect(0px 15px ' + canvasOverflowHeight + ' 0px)', 'position': 'absolute'})
$('#canvas_wrap_preview_modal div.canvas-main').css('top', '11px')
// end thin wrap
// centers the image within the area
// .css({
// 'margin-left': ( productContainerWidth - $('#canvas_wrap_preview img').width() ) / 2 + 'px'
// })
// adjustProductColumnWidth($('#canvas_wrap_preview div.canvas-main img').width() + 50, 900);
}
function displayCanvasOverflowed(marginLeftCalc) {
$('#canvas_wrap_overflowed_preview').fadeIn().css('height', $('#canvas_wrap_overflowed_preview img').height() + 10);
$('#canvas_wrap_overflowed_preview_modal').css({ 'height': imageHeight, 'max-width': '540px', 'margin-left': marginLeftCalc }).show();
// adjustProductColumnWidth($('#canvas_wrap_overflowed_preview div.canvas-main-overflowed img').width() + 40, 920);
}
function toggleCompatibleStyles() {
var mediumType = $('input[name=medium_id]:checked').data('medium-type'),
optionsToHide = $("input[name=style]:not([data-compatible-mediums*='" + mediumType + "'])"),
optionsToShow = $("input[name=style][data-compatible-mediums*='" + mediumType + "']");
optionsToHide.hide() // hide inputs when data-compatible-medium doesn't contain 'paper'
optionsToHide.next().hide(); // hide the input's div, which contains the picture and label.
optionsToShow.show();
optionsToShow.next().show();
}
function toggleCompatibleOptions() {
var mediumType = $('input[name=medium_id]:checked').data('medium-type');
$('.medium-options').hide();
if (mediumType == 'canvas') {
$('#canvas_options').fadeIn();
}
else {
$('input[name=medium_option][value=none]').prop("checked", true)
}
Foundation.libs.section.reflow(); // after adding/removing a Foundation section, this reloads them and fixes positioning.
}
function toggleFrames() {
var styleType = $('input[name=style]:checked').val();
if (styleType == 'frame') {
$('#frames').fadeIn();
$('input[name=frame_id][data-default-frame=true]').prop("checked", true)
}
else {
$('#frames').hide();
$('input[name=frame_id][value=none]').prop("checked", true)
}
updateItemSummary();
Foundation.libs.section.reflow(); // after adding/removing a Foundation section, this reloads them and fixes positioning.
}
function buildCanvasOverflowPreview(canvasOverflowHeight, canvasOverflowWidth) {
$('.canvas-main-overflowed div.clip').css({'clip': 'rect(15px ' + canvasOverflowWidth + ' ' + canvasOverflowHeight + ' 15px)'})
$('.canvas-top-overflowed div.clip').css({'clip': 'rect(0px ' + canvasOverflowWidth + ' 10px 15px)'})
$('.canvas-left-overflowed div.clip').css({'clip': 'rect(15px 15px ' + canvasOverflowHeight + ' 0px)'})
$('#canvas_wrap_overflowed_preview').css('height', canvasOverflowHeight)
if ( $( window ).width() < 900 ) {
$('.canvas-overflow-shade').css({
'height': $('.canvas-main-overflowed img').height() - 15,
'width': $('.canvas-main-overflowed img').width() - 15
});
}
else {
$('.canvas-overflow-shade').css({
'height': $('.canvas-main-overflowed img').height() - 30,
'width': $('.canvas-main-overflowed img').width() - 30
});
}
}
function initiateSpectrumColorPicker(source, onChangeFunc) {
source.spectrum({
color: "#000",
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxPaletteSize: 10,
preferredFormat: "hex",
localStorageKey: "spectrum.demo",
move: function (color) {
},
show: function () {
},
beforeShow: function () {
console.log('beforeshow')
},
hide: function () {
},
change: function(color) {
onChangeFunc(color)
},
palette: [
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
"rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
]
});
}
$(document).ready(function() {
imageHeight = 0,
imageWidth = 0,
modalWidth = 0;
var changeModalBackgroundColor = function(color) {
$("#modal_see_on_your_wall").hide().css('background', color).fadeIn('slow');
}
var changeCanvasBorderColor = function(color) {
$(".canvas-top-border div.clip").css('background', color)
$('.canvas-left-border div.clip').css('background', color)
$('#border_color_option').val('border_color:' + color)
}
initiateSpectrumColorPicker($("#spectrum_color_picker"), changeModalBackgroundColor)
initiateSpectrumColorPicker($("#canvas_border_color_picker"), changeCanvasBorderColor)
$(window).load(function() {
imageHeight = $('div.product-photos div.product-inner-container').height() + 35,
imageWidth = $('div.product-photos div.product-inner-container').width() + 15,
imageWidthforModal = $('div.product-photos div.product-inner-container img.frame-medium').width(),
modalWidth = $('#modal_see_on_your_wall').width(),
canvasOverflowHeight = $('.canvas-main-overflowed img').height() - 15 + 'px',
canvasOverflowWidth = $('.canvas-main-overflowed img').width() - 15 + 'px',
productContainerWidth = $('div.product-photos').width() -15;
if ( $( window ).width() < 900 ) {
canvasOverflowHeight = $('.canvas-main-overflowed img').height() + 15 + 'px'
canvasOverflowWidth = $('.canvas-main-overflowed img').width() + 15 + 'px'
}
adjustProductColumnHeight()
buildCanvasOverflowPreview(canvasOverflowHeight, canvasOverflowWidth);
$('#canvas_options').hide()
$('input[name=frame_id]').on('change', function() {
toggleArtPreviews(imageHeight, imageWidth, modalWidth);
})
if ($('div.product-photos .fancybox-button').length > 0) {
toggleArtPreviews(imageHeight, imageWidth, modalWidth);
// shows the art store section after all images have been loaded and adjusted properly.
// .product-photos and #product_form_container opacity are set to 0 in the global.css
$('div.art-store').css('opacity', '1')
updateItemSummary();
updatePrice();
toggleFrames();
$('input[name=medium_id]').on('change', function() {
$('input[name=style][value=none]').prop('checked', true)
toggleCompatibleOptions();
toggleArtPreviews(imageHeight, imageWidth, modalWidth);
toggleCompatibleStyles();
});
}
$('input[name=medium_option]').on('change', function() {
toggleCompatibleOptions();
toggleArtPreviews(imageHeight, imageWidth, modalWidth);
})
$('input[name=style]').on('change', function() {
toggleFrames();
toggleArtPreviews(imageHeight, imageWidth, modalWidth);
})
$('#product_builder_tabs section').each(function() {
var section = $(this)
section.find('a.continue').on('click', function(e) {
e.preventDefault();
section.nextAll('section:visible').first().find('a.art-store-tab-text').trigger('click')
})
})
$('#product_builder_tabs section').each(function() {
var section = $(this)
section.find('a.go-back').on('click', function(e) {
e.preventDefault();
section.prevAll('section:visible').first().find('a.art-store-tab-text').trigger('click')
})
})
});
toggleCompatibleStyles();
$('#product_builder_tabs input').on('change', function() {
updateItemSummary();
updatePrice();
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment