297 lines
7.5 KiB
JavaScript
297 lines
7.5 KiB
JavaScript
var IqAboOneTime = {
|
|
card: "#onetime_order_card",
|
|
holder: "#insert_show_onetime_order",
|
|
abo_holder: "#insert_show_products_order",
|
|
summary_card: "#combined_summary_card",
|
|
comp_holder: "#holder_html_view_comp_product",
|
|
modal: "#modals-load-content",
|
|
oTable: null,
|
|
url: null,
|
|
|
|
btn_modal_add: ".add-onetime-product-basket",
|
|
btn_add: ".onetime-add-from-basket",
|
|
btn_remove: ".onetime-remove-from-basket",
|
|
input_change: ".onetime-input-onchange",
|
|
remove_item: ".remove_onetime_from_cart",
|
|
confirm_changes: ".onetime-confirm-changes",
|
|
discard_changes: ".onetime-discard-changes",
|
|
|
|
summary_col: "#combined_summary_col",
|
|
sticky_gap: 16,
|
|
_stickyTicking: false,
|
|
|
|
init: function () {
|
|
var _self = this;
|
|
_self.url = $(_self.card).data("onetime-route");
|
|
_self.reInitCart();
|
|
_self.initSticky();
|
|
return _self;
|
|
},
|
|
|
|
initSticky: function () {
|
|
var _self = this;
|
|
var card = document.querySelector(_self.summary_card);
|
|
var col = document.querySelector(_self.summary_col);
|
|
if (!card || !col) {
|
|
return;
|
|
}
|
|
|
|
var onScrollOrResize = function () {
|
|
if (_self._stickyTicking) {
|
|
return;
|
|
}
|
|
_self._stickyTicking = true;
|
|
window.requestAnimationFrame(function () {
|
|
_self.updateSticky(card, col);
|
|
_self._stickyTicking = false;
|
|
});
|
|
};
|
|
|
|
// Capture-Phase, damit Scroll-Events beliebiger Scroll-Container erfasst werden.
|
|
window.addEventListener("scroll", onScrollOrResize, true);
|
|
window.addEventListener("resize", onScrollOrResize);
|
|
_self.updateSticky(card, col);
|
|
},
|
|
|
|
resetSticky: function (card) {
|
|
card.style.position = "";
|
|
card.style.top = "";
|
|
card.style.left = "";
|
|
card.style.width = "";
|
|
card.style.zIndex = "";
|
|
},
|
|
|
|
updateSticky: function (card, col) {
|
|
var _self = this;
|
|
|
|
// Nur im zweispaltigen Layout (lg+) kleben.
|
|
if (window.innerWidth < 992) {
|
|
_self.resetSticky(card);
|
|
return;
|
|
}
|
|
|
|
var colStyle = window.getComputedStyle(col);
|
|
var padLeft = parseFloat(colStyle.paddingLeft) || 0;
|
|
var padRight = parseFloat(colStyle.paddingRight) || 0;
|
|
var colRect = col.getBoundingClientRect();
|
|
var contentLeft = colRect.left + padLeft;
|
|
var contentWidth = col.clientWidth - padLeft - padRight;
|
|
var cardHeight = card.offsetHeight;
|
|
var gap = _self.sticky_gap;
|
|
|
|
if (colRect.top >= gap) {
|
|
// Noch nicht über den oberen Rand gescrollt -> normaler Fluss.
|
|
_self.resetSticky(card);
|
|
return;
|
|
}
|
|
|
|
// Oben anheften, aber maximal bis zum Ende der Spalte.
|
|
var topPos = gap;
|
|
var maxTop = colRect.bottom - cardHeight;
|
|
if (maxTop < gap) {
|
|
topPos = maxTop;
|
|
}
|
|
|
|
card.style.position = "fixed";
|
|
card.style.top = topPos + "px";
|
|
card.style.left = contentLeft + "px";
|
|
card.style.width = contentWidth + "px";
|
|
card.style.zIndex = "1020";
|
|
},
|
|
|
|
setDatabase: function (oTable) {
|
|
this.oTable = oTable;
|
|
},
|
|
|
|
reInitModal: function () {
|
|
var _self = this;
|
|
$(_self.oTable)
|
|
.find(_self.btn_modal_add)
|
|
.off("click")
|
|
.on("click", function () {
|
|
_self.addFromModal($(this));
|
|
});
|
|
},
|
|
|
|
reInitCart: function () {
|
|
var _self = this;
|
|
var $holder = $(_self.holder);
|
|
|
|
$holder
|
|
.find(_self.btn_add)
|
|
.off("click")
|
|
.on("click", function () {
|
|
_self.changeQty($(this), 1);
|
|
});
|
|
$holder
|
|
.find(_self.btn_remove)
|
|
.off("click")
|
|
.on("click", function () {
|
|
_self.changeQty($(this), -1);
|
|
});
|
|
$holder
|
|
.find(_self.input_change)
|
|
.off("change")
|
|
.on("change", function () {
|
|
_self.updateInput($(this));
|
|
});
|
|
$holder
|
|
.find(_self.remove_item)
|
|
.off("click")
|
|
.on("click", function (event) {
|
|
event.preventDefault();
|
|
_self.removeItem($(this));
|
|
});
|
|
$holder
|
|
.find(_self.confirm_changes)
|
|
.off("click")
|
|
.on("click", function () {
|
|
_self.confirmChanges();
|
|
});
|
|
$holder
|
|
.find(_self.discard_changes)
|
|
.off("click")
|
|
.on("click", function () {
|
|
_self.discardChanges();
|
|
});
|
|
},
|
|
|
|
addFromModal: function (_obj) {
|
|
var _self = this;
|
|
var $modal = $(_self.modal);
|
|
$modal.one("hidden.bs.modal", function () {
|
|
_self
|
|
.performRequest({
|
|
action: "add",
|
|
product_id: _obj.data("product-id"),
|
|
})
|
|
.done(_self.refreshView);
|
|
});
|
|
$modal.modal("hide");
|
|
},
|
|
|
|
changeQty: function (_obj, delta) {
|
|
var _self = this;
|
|
var itemId = _obj.data("onetime-item-id");
|
|
var input = $(_self.holder).find(
|
|
'input[name="onetime_qty_' + itemId + '"]'
|
|
);
|
|
var qty = _self.checkNumber(parseInt(input.val(), 10) + delta);
|
|
input.val(qty);
|
|
_self
|
|
.performRequest({
|
|
action: "update",
|
|
one_time_item_id: itemId,
|
|
qty: qty,
|
|
})
|
|
.done(_self.refreshView);
|
|
},
|
|
|
|
updateInput: function (_obj) {
|
|
var _self = this;
|
|
var qty = _self.checkNumber(parseInt(_obj.val(), 10));
|
|
_obj.val(qty);
|
|
_self
|
|
.performRequest({
|
|
action: "update",
|
|
one_time_item_id: _obj.data("onetime-item-id"),
|
|
qty: qty,
|
|
})
|
|
.done(_self.refreshView);
|
|
},
|
|
|
|
removeItem: function (_obj) {
|
|
var _self = this;
|
|
_self
|
|
.performRequest({
|
|
action: "remove",
|
|
one_time_item_id: _obj.data("onetime-item-id"),
|
|
})
|
|
.done(_self.refreshView);
|
|
},
|
|
|
|
confirmChanges: function () {
|
|
var _self = this;
|
|
_self
|
|
.performRequest({
|
|
action: "confirm",
|
|
})
|
|
.done(_self.refreshView);
|
|
},
|
|
|
|
discardChanges: function () {
|
|
var _self = this;
|
|
_self
|
|
.performRequest({
|
|
action: "discard",
|
|
})
|
|
.done(_self.refreshView);
|
|
},
|
|
|
|
refreshView: function (data) {
|
|
var _self = IqAboOneTime;
|
|
if (data.html_onetime) {
|
|
$(_self.holder).html(data.html_onetime);
|
|
}
|
|
if (data.html_abo) {
|
|
$(_self.abo_holder).html(data.html_abo);
|
|
}
|
|
if (data.html_summary) {
|
|
$(_self.summary_card).html(data.html_summary);
|
|
}
|
|
if (data.html_comp !== undefined) {
|
|
$(_self.comp_holder).html(data.html_comp);
|
|
}
|
|
$(_self.modal).modal("hide");
|
|
_self.reInitCart();
|
|
if (typeof iqModalCart !== "undefined" && iqModalCart.reInitCart) {
|
|
iqModalCart.reInitCart($(_self.abo_holder));
|
|
iqModalCart.reInitCart($(_self.comp_holder));
|
|
}
|
|
var card = document.querySelector(_self.summary_card);
|
|
var col = document.querySelector(_self.summary_col);
|
|
if (card && col) {
|
|
_self.updateSticky(card, col);
|
|
}
|
|
},
|
|
|
|
performRequest: function (data) {
|
|
var _self = this;
|
|
return $.ajax({
|
|
url: _self.url,
|
|
data: data,
|
|
type: "POST",
|
|
dataType: "json",
|
|
cache: false,
|
|
headers: {
|
|
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
|
|
},
|
|
}).fail(function (jqXHR) {
|
|
var msg =
|
|
jqXHR.responseJSON && jqXHR.responseJSON.message
|
|
? jqXHR.responseJSON.message
|
|
: "Error";
|
|
var errorEl = document.getElementById("insert_onetime_error_message");
|
|
if (!errorEl) {
|
|
errorEl = document.createElement("div");
|
|
errorEl.id = "insert_onetime_error_message";
|
|
errorEl.className = "alert alert-danger mt-2";
|
|
var holder = document.querySelector("#insert_show_onetime_order");
|
|
if (holder) {
|
|
holder.insertBefore(errorEl, holder.firstChild);
|
|
}
|
|
}
|
|
errorEl.textContent = msg;
|
|
});
|
|
},
|
|
|
|
checkNumber: function (number) {
|
|
if (number < 1 || isNaN(number)) {
|
|
return 1;
|
|
}
|
|
if (number > 100) {
|
|
return 100;
|
|
}
|
|
return number;
|
|
},
|
|
};
|