Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Authors: Baptiste DULAC, Thomas CACQUEVELLE
- * (c) Add+ Design
- */
- // -----------------------------------------------------------------------
- // Defines
- // -----------------------------------------------------------------------
- var $viewGrid = $('.view_grid');
- var $moveGrid = $('.move_grid');
- var $grid = $('#grid');
- var equivalences = {'1515' : 1, '3030' : 2};
- // Grid Size
- var GRID_SIZE = 2400 > $viewGrid.width() ? 2400 : $viewGrid.width();
- var SQUARE_LIMIT = 30;
- var SQUARE_SIZE = GRID_SIZE / SQUARE_LIMIT;
- var VIEW_HEIGHT = $viewGrid.height();
- var VIEW_WIDTH = $viewGrid.width();
- var MOVE_HEIGHT = (GRID_SIZE * 2) - VIEW_HEIGHT;
- var MOVE_WIDTH = (GRID_SIZE * 2) - VIEW_WIDTH;
- // Buttons
- var $remove_all = $('#remove_all');
- var $saveGrid = $('#save_grid');
- var $downloadLink = $('#download-link');
- var $loginModalButton = $('#login-modal-button');
- var $registerModalButton = $('#register-modal-button');
- var $saveGridButton = $('#save-grid-button');
- var $shareGrid = $('#share');
- var $shareGridButton = $('#share-grid-button');
- var $noCapsOrderButton = $('#no-caps-order-button');
- var $withCapsOrderButton = $('#with-caps-order-button');
- var $gridItemPopupColorContainer = $('#grid-item-popup-color-container');
- var $li_item= $('.list_item');
- var $li_item_href= $('.list_item a');
- // Display modules iterator
- var onLine = 0;
- var id = 0;
- var currentIndexColors = 0;
- var backup = {
- x: 0,
- y: 0,
- ref: null,
- rotate: 0,
- base: null
- };
- var ghost = {
- x : 0,
- y : 0,
- item: null
- };
- var loader_module = {};
- var current_save = {
- id : null,
- name : null
- };
- var see_url_save_delete = {
- hasObject : false
- };
- var isHoverBin = false;
- var grid = [];
- var product = {};
- var sortModulesBySize = {};
- var colors = ['whitm','blacm','greym','sandm','navym','olivm','browm','watem','yelom','raspm','turqm','redfm'];
- var arrayColor = {
- 'whitm': '#ECECEC',
- 'blacm': '#424242',
- 'greym': '#A9A9A9',
- 'sandm': '#C6C1AC',
- 'navym': '#32627E',
- 'olivm': '#7A8975',
- 'browm': '#4D3D36',
- 'watem': '#B7D7B2',
- 'yelom': '#E2C83F',
- 'raspm': '#B03244',
- 'turqm': '#428891',
- 'redfm': '#FF352A'
- };
- var arrayColorName = {
- blacm: 'Nuit',
- browm: 'Chocolat',
- greym: 'Anthracite',
- navym: 'Marine',
- olivm: 'Olive',
- raspm: 'Framboise',
- redfm: 'Orange pop',
- sandm: 'Silex',
- turqm: 'Azur',
- watem: 'Aqua',
- whitm: 'Neige',
- yelom: 'Capucine'
- };
- // -----------------------------------------------------------------------
- // Functions
- // -----------------------------------------------------------------------
- function orderButtonClicked(e)
- {
- e.preventDefault();
- showModal('#order-modal');
- }
- function orderComposition(hasCaps)
- {
- addLoader($('#order-modal-caps-choice'));
- saveGrid(current_save.name, hasCaps, false, function(data) {
- window.location = ORDER_URL + '?productId=' + data.publicId;
- });
- }
- function displayGhost()
- {
- $('#ghost').remove();
- var $ghost = $('<div id="ghost"></div>');
- $ghost.css({
- 'width' : SQUARE_SIZE * ghost.item.base,
- 'height' : SQUARE_SIZE * ghost.item.base,
- 'position' : 'absolute',
- 'border': '1px dashed #AAA',
- 'left' : toPosition(ghost.x),
- 'top' : toPosition(ghost.y)
- });
- $grid.append($ghost);
- }
- /**
- * @param item
- * @param code
- * @param rotate
- * @param x
- * @param y
- */
- function addItemToGrid(item, code, rotate, x, y)
- {
- if (!grid.hasOwnProperty(x))
- grid[x] = [];
- grid[x][y] = createItem(code, item.base, rotate, false);
- // Module 3030
- if (item.base == 2)
- {
- if (!grid.hasOwnProperty(x + 1))
- grid[x + 1] = [];
- grid[x +1 ][y] = createItem(code, item.base, rotate, true);
- grid[x][y + 1] = createItem(code, item.base, rotate, true);
- grid[x + 1][y + 1] = createItem(code, item.base, rotate, true);
- }
- Draw();
- }
- /**
- * @param code
- * @param base
- * @param orientation
- * @param virtual
- * @returns {{code: *, base: *, orientation: *, isVirtual: *}}
- */
- function createItem(code, base, orientation, virtual) {
- return {code : code, base: base, orientation: orientation, isVirtual: virtual};
- }
- /**
- * @param pos
- * @returns {number}
- */
- function toGrid(pos) {
- if (pos > (GRID_SIZE - SQUARE_SIZE))
- pos = GRID_SIZE - SQUARE_SIZE;
- return Math.floor(pos / SQUARE_SIZE) + 1;
- }
- function DisplayMenuAction(){
- $li_item.removeClass('disabled');
- $li_item_href.css({'color':'#000'});
- }
- /**
- * @param c
- * @returns {number}
- */
- function toPosition(c)
- {
- return (c - 1) * SQUARE_SIZE;
- }
- function removeModule_all()
- {
- grid = [];
- $grid.empty();
- DisableMenuAction();
- getCompositionPrice(grid);
- Draw();
- }
- function DisableMenuAction()
- {
- $li_item_href.css({'color':'grey'});
- $li_item.addClass('disabled');
- }
- /**
- * @param objX
- * @param objY
- * @returns {boolean|*}
- */
- function itemExistsInGrid(objX, objY)
- {
- return grid.hasOwnProperty(objX) && grid[objX].hasOwnProperty(objY) && grid[objX][objY] != null;
- }
- /**
- * @param item
- * @param x
- * @param y
- * @returns {boolean}
- */
- function canDropModule(item, x, y)
- {
- if (item.base == 2) {
- return !itemExistsInGrid(x, y) && !itemExistsInGrid(x + 1, y) && !itemExistsInGrid(x ,y + 1) && !itemExistsInGrid(x + 1, y + 1);
- }
- return !itemExistsInGrid(x, y);
- }
- /**
- * @param ref
- * @param srcX
- * @param srcY
- * @param destX
- * @param destY
- * @param rotate
- * @constructor
- */
- function moveItemInGrid(ref, srcX, srcY, destX, destY, rotate)
- {
- //if (!product.hasOwnProperty(ref))
- // return;
- var item = product[ref];
- if (!canDropModule(item, destX, destY))
- addItemToGrid(item, item.code, rotate, srcX, srcY);
- else
- addItemToGrid(item, item.code, rotate, destX, destY);
- }
- /**
- * @param srcX
- * @param srcY
- * @constructor
- */
- function deleteModule(srcX, srcY)
- {
- var item = grid[srcX][srcY];
- if (item.base == 2)
- {
- if (!grid.hasOwnProperty(srcX + 1))
- grid[srcX + 1] = [];
- grid[srcX + 1][srcY] = null;
- grid[srcX][srcY + 1] = null;
- grid[srcX + 1][srcY + 1] = null;
- }
- grid[srcX][srcY] = null;
- }
- /**
- * @param ev
- * @param callback
- */
- function handleMouseClick(ev, callback)
- {
- var tPos = $('#grid').offset();
- var view_offset = $('.view_grid').offset();
- var mouse_offset = {posX: ev.pageX, posY: ev.pageY};
- var mouse = {posX: ev.pageX, posY: ev.pageY};
- mouse_offset.posX -= view_offset.left;
- mouse_offset.posY -= view_offset.top;
- mouse.posX -= tPos.left;
- mouse.posY -= tPos.top;
- callback(toGrid(mouse.posX), toGrid(mouse.posY), mouse_offset.posX, mouse_offset.posY);
- }
- function hoverTrash()
- {
- $(".trash").hover(function() {
- $('.trash').addClass('trash-active');
- }, function() {
- $('.trash').removeClass('trash-active');
- }
- );
- }
- function removeModuleInGrid(x, y)
- {
- var $module = getModuleInGrid(x, y);
- $module.remove();
- }
- /**
- * @param x
- * @param y
- * @returns {*|jQuery|HTMLElement}
- */
- function getModuleInGrid(x, y)
- {
- return $('.grid-item[data-x="' + x + '"][data-y="' + y + '"]');
- }
- /**
- * @param x
- * @param y
- * @returns {boolean}
- */
- function moduleIsPresent(x, y)
- {
- return getModuleInGrid(x, y).length > 0;
- }
- /**
- * @param x
- * @param y
- * @param inverse
- */
- function rotateModuleInGrid(x, y, inverse)
- {
- var gridItem = grid[x][y];
- var $module = getModuleInGrid(x, y);
- var oldRotate = gridItem.orientation;
- var rotate = 0;
- if (inverse == true)
- rotate = oldRotate - 90 < 0 ? 270 : oldRotate - 90;
- else
- rotate = oldRotate + 90 > 270 ? 0 : oldRotate + 90;
- // Save to front
- $module.removeClass('rotate-' + oldRotate).addClass('rotate-' + rotate);
- $module.data('rotate', rotate);
- grid[x][y].orientation = rotate;
- }
- /**
- * @param ref
- * @param x
- * @param y
- * @param rotate
- * @constructor
- */
- function addModule(ref, x, y, rotate)
- {
- if (!product.hasOwnProperty(ref))
- return;
- var item = product[ref];
- DisplayMenuAction();
- var $div = $('<div class="grid-item"></div>');
- $div.attr('data-x', x);
- $div.attr('data-y', y);
- $div.attr('data-ref', ref);
- $div.attr('data-rotate', rotate);
- $div.addClass('rotate-' + rotate);
- $div.css({
- 'width': SQUARE_SIZE * item.base,
- 'height': SQUARE_SIZE * item.base,
- 'background': 'url("' + item.imageConfigurator +'")',
- 'top': toPosition(y),
- 'left': toPosition(x)
- });
- $('#grid').append($div);
- $('.grid-item').draggable({
- cursorAt: {top: 20, left: 20},
- start: function(event, ui)
- {
- // Remove tooltips
- $('.grid-item-popup-container.active').remove();
- // Create backup module
- backup.x = parseInt($(this).data('x'));
- backup.y = parseInt($(this).data('y'));
- backup.ref = $(this).data('ref');
- backup.rotate = parseInt($(this).data('rotate'));
- backup.binned = false;
- var item = product[backup.ref];
- ghost.item = item;
- // A bit of css for current drag item
- $(this).css({
- 'opacity' : 0.5,
- 'z-index': 115
- });
- ui.helper.css({
- 'width': SQUARE_SIZE * item.base,
- 'height': SQUARE_SIZE * item.base
- });
- deleteModule(backup.x, backup.y);
- },
- drag: function(ev)
- {
- hoverTrash();
- handleMouseClick(ev, function(x, y) {
- ghost.x = x;
- ghost.y = y;
- $('#ghost').remove();
- if (canDropModule(ghost.item, x, y))
- displayGhost();
- });
- },
- stop: function(ev)
- {
- $(this).remove();
- $('#ghost').remove();
- if (!isHoverBin)
- handleMouseClick(ev, function(x, y, mouseX, mouseY)
- {
- if (mouseX > 0 && mouseX < VIEW_WIDTH && mouseY > 0 && mouseY < VIEW_HEIGHT)
- {
- moveItemInGrid(backup.ref, backup.x, backup.y, x, y, backup.rotate);
- }
- else if (product.hasOwnProperty(backup.ref))
- {
- addItemToGrid(product[backup.ref], backup.ref, backup.rotate, backup.x, backup.y);
- }
- });
- else
- Draw();
- getCompositionPrice();
- }
- });
- }
- /**
- * @param GRID_SIZE
- * @param VIEW_WIDTH
- * @param VIEW_HEIGHT
- * @param MOVE_WIDTH
- * @param MOVE_HEIGHT
- */
- function createGrid(GRID_SIZE,VIEW_WIDTH, VIEW_HEIGHT, MOVE_WIDTH, MOVE_HEIGHT)
- {
- $grid.css({
- 'position': 'absolute',
- 'width' : GRID_SIZE,
- 'height' : GRID_SIZE,
- 'top': (MOVE_HEIGHT - GRID_SIZE) / 2,
- 'left': (MOVE_WIDTH - GRID_SIZE) / 2,
- 'background-color': '#ffffff',
- 'cursor':'move'
- });
- $viewGrid.css({
- 'width' : VIEW_WIDTH,
- 'height' : VIEW_HEIGHT,
- 'border' : '1px solid #D4D4D5'
- });
- $moveGrid.css({
- position: 'relative',
- top : - (MOVE_HEIGHT - VIEW_HEIGHT) / 2,
- left : - (MOVE_WIDTH - VIEW_WIDTH) / 2,
- 'width' : MOVE_WIDTH,
- 'height' : MOVE_HEIGHT,
- 'background' : 'blue'
- });
- }
- function hideLoaderGrid()
- {
- $('#grid-load').removeClass('ui active inverted dimmer').css({'opacity':1}); // Hide loader grid
- $('#grid-load-text').remove(); // Hide loader grid
- }
- function checkDataLoad()
- {
- var data = $('.module-line').data('load');
- if(data == false)
- $('.module-line').attr('data-load', 'true').removeClass('ui loader active');
- }
- /**
- * @param $line
- * @param item
- * @param orientation
- */
- function newImage(item, orientation)
- {
- return $('<img class="dragme lazy rotate-' + orientation + ' size-' + item.size + '">')
- .attr('data-code', item.code)
- .attr('data-src', item.imageConfigurator)
- .attr('data-rotate', orientation)
- .attr('data-content', item.name)
- .attr('data-variation', 'tiny')
- .attr('data-position', 'top center')
- ;
- }
- function loadImages(color)
- {
- var $groupColor = $('.group-color[data-color="' + color + '"]');
- var loaded = $groupColor.data('loaded');
- if (!loaded)
- {
- $groupColor.data('loaded', true);
- var $lazyLoadImages = $groupColor.find('img.lazy');
- $lazyLoadImages.lazy({
- bind: "event",
- delay: 0,
- skip_invisible: false,
- onFinishedAll: function() {
- $groupColor.find('.active.inverted.dimmer').remove();
- ++currentIndexColors;
- if (colors.hasOwnProperty(currentIndexColors))
- loadImages(colors[currentIndexColors]);
- }
- });
- }
- }
- function loadImagesBackground()
- {
- for (var i in colors)
- addLoader($('.group-color[data-color="' + colors[i] + '"]'));
- if (colors.hasOwnProperty(currentIndexColors))
- loadImages(colors[currentIndexColors]);
- }
- /**
- * @param color
- */
- function displayColorGroup(color)
- {
- $('#square-color .square.square-color.border-select').removeClass('border-select');
- $('.hide-off').removeClass('hide-off').addClass('hide-on');
- $('#square-color .square.square-color[data-color="' + color + '"]').addClass('border-select');
- var $groupColor = $('.group-color[data-color="' + color + '"]');
- $groupColor.removeClass('hide-on').addClass('hide-off');
- }
- /**
- * @param $square
- * @param color
- */
- function applySquareColorProperties($square, color)
- {
- $square
- .attr('data-color', color)
- .attr('data-tooltip', arrayColorName[color])
- .attr('data-position', 'top center')
- .css({'background-color' : arrayColor[color], 'cursor' : 'pointer'})
- ;
- }
- function initDisplayColors()
- {
- var $squarePosition = $('<div class="square-position"></div>');
- for (var value in arrayColor)
- {
- if (arrayColor.hasOwnProperty(value))
- {
- var $square = $('<div class="square square-color"></div>');
- var $tooltipSquare = $('<div class="square square-color"></div>');
- applySquareColorProperties($square, value);
- applySquareColorProperties($tooltipSquare, value);
- $squarePosition.append($square);
- $gridItemPopupColorContainer.append($tooltipSquare);
- }
- }
- $('#square-color').append($squarePosition);
- displayColorGroup('whitm');
- checkDataLoad();
- }
- /**
- * @param $colorContainer
- * @param item
- * @param orientation
- */
- function processItem($colorContainer, item, orientation)
- {
- $colorContainer.prepend(newImage(item, orientation));
- }
- function initDisplayModules()
- {
- var $sizeContainer = $('#size-container');
- for (var size in sortModulesBySize)
- {
- $sizeContainer.append('<a id="button-' + size + '" class="item" data-tab="' + size.substring(0, 2) + "x" + size.substring(0, 2) + '" style="left: 22.5%;">' + size.substring(0, 2) + "x" + size.substring(0, 2) + '</button>');
- var $moduleContainer = $('<div id="modules-' + size + '" class="ui bottom attached tab segment objectDrag" data-tab="' + size + '" style="border-top: 0;border-bottom: 0;position: static;"></div>');
- $('#contain-size-product').append($moduleContainer);
- for (var color in sortModulesBySize[size])
- {
- var $colorContainer = $('<div class="group-color hide-on" data-color="' + color + '" data-loaded="false"></div>');
- $moduleContainer.append($colorContainer);
- onLine = 0;
- for (var type in sortModulesBySize[size][color])
- {
- for (var ref in sortModulesBySize[size][color][type])
- {
- var item = sortModulesBySize[size][color][type][ref];
- loader_module[item.id] = true;
- if (item.hasOwnProperty('imageConfigurator'))
- {
- processItem($colorContainer, item, 0);
- if (item.canRotate != false)
- {
- for (var rotate = 90; rotate < 360; rotate += 90)
- {
- processItem($colorContainer, item, rotate);
- }
- }
- }
- }
- }
- }
- }
- $('#contain-size-product img.dragme').popup({
- on: 'hover',
- delay: {
- show: 500,
- hide: 0
- }
- });
- $('#button-1515').addClass('active');
- $('#modules-1515').addClass('active');
- if (loadComposition()) {
- Draw();
- getCompositionPrice();
- DisplayMenuAction();
- }
- else
- DisableMenuAction();
- //if (!is_safari) {
- loadImagesBackground();
- //}
- hideLoaderGrid();
- }
- function Draw() {
- for (var x in grid)
- {
- if (grid.hasOwnProperty(x))
- {
- for (var y in grid[x])
- {
- if (grid[x].hasOwnProperty(y) && itemExistsInGrid(x, y))
- {
- if (!moduleIsPresent(x, y))
- {
- var item = grid[x][y];
- if (!item.isVirtual)
- {
- see_url_save_delete.hasObject = 1;
- addModule(item.code, x, y, item.orientation);
- }
- }
- }
- }
- }
- }
- }
- /**
- * @param name_compo
- * @param hasCaps
- */
- function compositionToJson(name_compo, hasCaps)
- {
- var result = {
- data : {},
- hasCaps : hasCaps,
- name : name_compo
- };
- for (var x in grid) {
- if (grid.hasOwnProperty(x)) {
- for (var y in grid[x]) {
- if (grid[x].hasOwnProperty(y))
- {
- var key = x + ':' + y;
- var item = grid[x][y];
- if (itemExistsInGrid(x, y) && !item.isVirtual)
- result['data'][key] = item;
- }
- }
- }
- }
- return JSON.stringify(result);
- }
- /**
- * @param compositionName
- * @param hasCaps
- * @param isSave
- * @param callback
- */
- function saveGrid(compositionName, hasCaps, isSave, callback)
- {
- var json = compositionToJson(compositionName, hasCaps);
- var endpoint = API_URL + '/compositions/save';
- if (current_save.id != null && IS_EDIT)
- endpoint = endpoint + '/' + current_save.id;
- $.post(
- endpoint,
- {
- data: json,
- isSave: isSave
- },
- null,
- 'json'
- ).done(callback);
- }
- /**
- * @param price
- * @param currencyCode
- * @returns {string}
- */
- function formatPrice(price, currencyCode)
- {
- return parseFloat((Math.round(price) / 100)).toFixed(2) + ' ' + currencyCode;
- }
- /**
- * @param $list
- * @param product
- * @param quantity
- * @param currencyCode
- */
- function addProductInPriceList($list, product, quantity, currencyCode)
- {
- var $line = $('<div class="module-line"></div>');
- var $name = $('<span class="left floated"><span class="square-color" style="background-color: ' + arrayColor[product.color] + ';"></span> ' + product.name + ' x' + quantity + ' </div>');
- var $price = $('<span class="right floated">' + formatPrice((product.price * quantity), currencyCode) + '</div>');
- $line.append($name);
- $line.append($price);
- $list.append($line);
- }
- function handleProducts($list, products, currencyCode)
- {
- for (var key in products)
- {
- if (products.hasOwnProperty(key))
- {
- var productQuantity = products[key];
- addProductInPriceList($list, productQuantity.product, productQuantity.quantity, currencyCode);
- }
- }
- }
- function addTotalPrice($list, trans, formattedPrice)
- {
- $list.append('<div class="total-line"><span class="left floated">' + trans + '</span><span class="right floated">' + formattedPrice + '</span></div>');
- }
- function getCompositionPrice()
- {
- var $loader = $('<div class="ui active inverted dimmer"><div class="ui mini loader"></div></div>');
- $('#configurator-composition-menu').append($loader);
- var json = compositionToJson();
- $.post(API_URL + '/compositions/price', { data: json }, null, 'json')
- .done(function(success) {
- if (success.success)
- {
- var $list = $('#configurator-composition-menu-list');
- var transPriceNoCaps = $list.data('trans-price-no-caps');
- var transPriceWithCaps = $list.data('trans-price-with-caps');
- var transOrder = $list.data('trans-order');
- var data = success.data;
- var currencyCode = data.currencyCode;
- $list.empty();
- handleProducts($list, data.modules, currencyCode);
- if(data.priceNoCaps > 0)
- addTotalPrice($list, transPriceNoCaps, formatPrice(data.priceNoCaps, currencyCode));
- $('#order-modal-no-caps-price').empty().append(formatPrice(data.priceNoCaps, currencyCode));
- handleProducts($list, data.caps, currencyCode);
- if(data.priceWithCaps > 0)
- addTotalPrice($list, transPriceWithCaps, formatPrice(data.priceWithCaps, currencyCode));
- $('#order-modal-with-caps-price').empty().append(formatPrice(data.priceWithCaps, currencyCode));
- var $orderButton = $('<button class="small fluid ui red button" id="configurator-order-button">' + transOrder + '</button>');
- $list.prepend($orderButton);
- $orderButton.click(orderButtonClicked);
- $('#configurator-composition-menu-price').empty().append(formatPrice(data.priceNoCaps, currencyCode));
- $loader.remove();
- }
- })
- }
- /**
- * @returns {boolean}
- */
- function loadComposition()
- {
- if (!IS_LOAD)
- return false;
- if (IS_EDIT)
- {
- current_save.id = COMPOSITION_ID;
- current_save.name = COMPOSITION_NAME;
- }
- for (var posRaw in COMPOSITION_GRID)
- {
- if ( COMPOSITION_GRID.hasOwnProperty(posRaw)) {
- var data = COMPOSITION_GRID[posRaw];
- var code = data.code;
- if (product.hasOwnProperty(code) && data.isVirtual == false)
- {
- var pos = posRaw.split(':');
- addItemToGrid(product[code], code , data.orientation, pos[0], pos[1]);
- }
- }
- }
- return true;
- }
- /**
- * @param target
- * @returns {string}
- */
- function addLoader(target)
- {
- var $loader = $('<div class="ui active inverted dimmer"><div class="ui text loader">Loading</div></div>');
- target.append($loader);
- return $loader;
- }
- /**
- * @param loader
- */
- function removeLoader(loader)
- {
- loader.remove();
- }
- /**
- * @param id
- * @param onApproveCallback
- * @param onDenyCallback
- * @returns {jQuery}
- */
- function showModal(id, onApproveCallback, onDenyCallback)
- {
- return $(id).modal({
- blurring: true,
- inverted: true,
- selector : {
- close: '.close',
- approve: '.actions .positive',
- deny: '.actions .negative'
- },
- onDeny: onDenyCallback !== undefined ? onDenyCallback : function () {},
- onApprove: onApproveCallback !== undefined ? onApproveCallback : function () {}
- }).modal('setting', 'transition', 'vertical flip').modal('show');
- }
- function hideModal(id)
- {
- $(id).modal('setting', 'transition', 'vertical flip').modal('hide');
- }
- /**
- * @param data
- */
- function loginModalHandleError(data)
- {
- if (data.hasOwnProperty('responseJSON'))
- {
- var error = data.responseJSON.error;
- $('#login-modal-content').prepend('<div class="ui negative message" id="login-modal-error-message"><div class="header">' + error + '</div></div>');
- }
- }
- function loginModalHandleSuccess()
- {
- hideModal('#login-modal');
- showModal('#save-modal');
- }
- /**
- * @param e
- * @returns {string}
- */
- function loginModalButtonClicked(e)
- {
- e.preventDefault();
- $('#login-modal-error-message').remove();
- return addLoader($('#login-modal-content'));
- }
- /**
- * @param $target
- * @param x
- * @param y
- * @param ref
- * @param callback
- */
- function handleInPopUpClick($target, x, y, ref, callback)
- {
- $target.data('x', x);
- $target.data('y', y);
- $target.data('code', ref);
- $target.click(callback);
- }
- $(function () {
- $('#composition-name-input').val(COMPOSITION_NAME);
- // -----------------------------------------------------------------------
- // Events
- // -----------------------------------------------------------------------
- $.getJSON(API_URL + '/products', function(json)
- {
- $.each(json, function (i, item) {
- if (item.hasOwnProperty('imageConfigurator') && item.hasOwnProperty('code') && item.hasOwnProperty('size') && item.imageConfigurator != null) {
- if (!(sortModulesBySize.hasOwnProperty(item.size)))
- sortModulesBySize[item.size] = {};
- if (!((sortModulesBySize[item.size]).hasOwnProperty(item.color)))
- sortModulesBySize[item.size][item.color] = {};
- if (!((sortModulesBySize[item.size][item.color]).hasOwnProperty(item.type)))
- sortModulesBySize[item.size][item.color][item.type] = {};
- sortModulesBySize[item.size][item.color][item.type][item.code] = item;
- if (equivalences.hasOwnProperty(item.size))
- item['base'] = equivalences[item.size];
- else
- item['base'] = 1;
- product[item.code] = item;
- }
- });
- initDisplayModules();
- initDisplayColors();
- $('.square-color').click(function() {
- displayColorGroup($(this).data('color'));
- });
- $('#button-1515').click(function(){
- $('#modules-1515').addClass('active');
- $('#button-1515').addClass('active');
- $('.product-configurator').addClass('hide-on');
- $('#modules-3030').removeClass('active');
- $('#button-3030').removeClass('active');
- });
- $('#button-3030').click(function(){
- $('#button-1515').removeClass('active');
- $('#modules-1515').removeClass('active');
- $('.product-configurator').addClass('hide-on');
- $('#modules-3030').addClass('active');
- $('#button-3030').addClass('active');
- });
- var $dragImg = $('.objectDrag img');
- $dragImg.draggable({
- helper: 'clone',
- cursorAt: {top: SQUARE_SIZE / 2, left: SQUARE_SIZE / 2},
- start: function (event, ui) {
- var code = $(this).data('code');
- if (product.hasOwnProperty(code)) {
- var item = product[code];
- ghost.item = item;
- ui.helper.css({
- 'width': SQUARE_SIZE * item.base,
- 'height': SQUARE_SIZE * item.base,
- 'opacity' : .5,
- 'z-index' : 115
- });
- }
- },
- drag: function(ev)
- {
- hoverTrash();
- handleMouseClick(ev, function(x, y)
- {
- ghost.x = x;
- ghost.y = y;
- $('#ghost').remove();
- if (canDropModule(ghost.item, x, y))
- displayGhost();
- });
- },
- stop: function (ev) {
- $('#ghost').remove();
- var $this = $(this);
- if (!isHoverBin)
- handleMouseClick(ev, function(x, y, mouseX, mouseY)
- {
- var code = $this.data('code');
- if (product.hasOwnProperty(code))
- {
- var item = product[code];
- var rotate = $this.data('rotate');
- if (mouseX > 0 && mouseX < GRID_SIZE && mouseY > 0 && mouseY < GRID_SIZE)
- {
- if (canDropModule(item, x, y))
- addItemToGrid(item, code, rotate, x, y);
- }
- }
- });
- getCompositionPrice();
- }
- });
- createGrid(GRID_SIZE,VIEW_WIDTH, VIEW_HEIGHT, MOVE_WIDTH, MOVE_HEIGHT);
- checkDataLoad();
- });
- $('.trash').hover(
- function() { isHoverBin = true },
- function () { isHoverBin = false }
- );
- $noCapsOrderButton.click(function () {
- orderComposition(false);
- });
- $withCapsOrderButton.click(function () {
- orderComposition(true);
- });
- $loginModalButton.click(function(e) {
- var $loader = loginModalButtonClicked(e);
- $.post(API_URL + '/users/login', {
- email: $('#email-login-input').val(),
- password: $('#password-login-input').val()
- }, function () { loginModalHandleSuccess() ; }, 'json')
- .fail(function (data) {
- loginModalHandleError(data)
- })
- .always(function() {
- removeLoader($loader);
- })
- });
- $registerModalButton.click(function (e) {
- var $loader = loginModalButtonClicked(e);
- $.post(API_URL + '/users/register', {
- email: $('#email-register-input').val(),
- password: $('#password-register-input').val(),
- passwordConfirmation : $('#password-confirmation-register-input').val()
- }, function () { loginModalHandleSuccess() ; }, 'json')
- .fail(function (data) {
- loginModalHandleError(data)
- })
- .always(function() {
- removeLoader($loader);
- })
- });
- $downloadLink.click(function(){
- var pdfLink = $('#download-pdf-link');
- pdfLink.addClass('loading');
- showModal('#download-modal', null, null);
- saveGrid(null, false, false, function(data) {
- pdfLink
- .attr('href', API_URL + '/compositions/download/pdf/composition_' + data.publicId + '.pdf')
- .removeClass('loading')
- ;
- });
- });
- $saveGridButton.click(function (e) {
- e.preventDefault();
- $saveGridButton.addClass('loading');
- saveGrid($('#composition-name-input').val(), false, true, function(data) {
- current_save.id = data.id;
- current_save.name = data.name;
- IS_EDIT = true;
- $saveGridButton.removeClass('loading');
- hideModal('#save-modal');
- });
- });
- $shareGrid.click(function () {
- showModal('#share-modal');
- });
- $shareGridButton.click(function(e) {
- e.preventDefault();
- $('#share-modal-error-message').remove();
- $shareGridButton.addClass('loading');
- saveGrid(current_save.name, false, false, function(data) {
- $.post(API_URL + '/compositions/share/' + data.id, {
- email: $('#share-email-input').val(),
- message: $('#share-message-textarea').val()
- }, function() {
- hideModal('#share-modal');
- }, 'json')
- .fail(function (data) {
- if (data.hasOwnProperty('responseJSON'))
- {
- var error = data.responseJSON.error;
- $('#share-modal-content').prepend('<div class="ui negative message" id="share-modal-error-message"><div class="header">' + error + '</div></div>');
- }
- })
- .always(function () {
- $shareGridButton.removeClass('loading');
- })
- ;
- });
- });
- $saveGrid.click(function(e){
- if (IS_LOGGED)
- {
- $('#composition-name-input').val(current_save.name);
- showModal('#save-modal');
- }
- else
- showModal('#login-modal');
- return e.preventDefault();
- });
- $remove_all.click(function(){
- showModal('#delete-modal', function() {
- removeModule_all();
- });
- });
- $grid.draggable({
- containment: '.move_grid'
- });
- $(document).on('click', '.grid-item', function(ev) {
- var $popUp = $('#grid-item-popup-container').clone();
- $popUp.addClass('active');
- var $target = $(this);
- var $gridItemPopupColorContainer = $popUp.find('#grid-item-popup-color-container');
- var x = $target.data('x');
- var y = $target.data('y');
- if (itemExistsInGrid(x, y))
- {
- var item = grid[x][y];
- var p = product[item.code];
- $popUp.data('code', item.code);
- // Change color
- $gridItemPopupColorContainer.find('.square-color[data-color="' + p.color + '"]').addClass('border-select');
- // Hide rotate icons
- if (!p.canRotate)
- {
- $popUp.find('.rotate').remove();
- $popUp.find('.rotate-inverse').remove();
- }
- $('.grid-item-popup-container.active').remove();
- $grid.prepend($popUp);
- var popup = $target.popup({
- popup: $popUp,
- exclusive: true,
- hoverable: true,
- on: 'manual',
- inline: true,
- variation: 'wide',
- position: 'top center'
- }).popup('show');
- handleInPopUpClick($('.grid-item-popup-container.active button.rotate'), x, y, item.code, function () {
- var $this = $(this);
- rotateModuleInGrid($this.data('x'), $this.data('y'), false);
- });
- handleInPopUpClick($('.grid-item-popup-container.active button.rotate-inverse'), x, y, item.code, function () {
- var $this = $(this);
- rotateModuleInGrid($this.data('x'), $this.data('y'), true);
- });
- handleInPopUpClick($('.grid-item-popup-container.active button.delete'), x, y, item.code, function () {
- var $this = $(this);
- var x = $this.data('x');
- var y = $this.data('y');
- popup.popup('hide');
- deleteModule(x, y);
- removeModuleInGrid(x ,y);
- Draw();
- getCompositionPrice();
- });
- handleInPopUpClick($('.grid-item-popup-container.active .square.square-color'), x, y, item.code, function() {
- var $this = $(this);
- var code = $this.data('code');
- var color = $this.data('color');
- var rotate = (getModuleInGrid(x ,y)).data('rotate');
- var newRef = (p.size + '-' + p.type + '-' + color).toUpperCase();
- $gridItemPopupColorContainer.find('.square-color').removeClass('border-select');
- $gridItemPopupColorContainer.find('.square-color[data-color="' + color + '"]').addClass('border-select');
- deleteModule(x, y);
- removeModuleInGrid(x, y);
- addItemToGrid(p, newRef, rotate, x, y);
- Draw();
- getCompositionPrice();
- });
- }
- });
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement