artbox_basket.ts
4.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
///<reference path="node_modules/@types/jquery/index.d.ts" />
class ArtboxBasket {
private _items;
private _language;
private _defaults: Object = {
language: 'ru',
url: 'basket',
initError: 'Basket cannot be init',
modalSelector: '.basket_modal',
cartSelector: '.basket_wrapper'
};
private _settings: Object = {};
get items() {
return this._items;
}
get language() {
if (this._language === undefined) {
let language_attr = $('html').attr('lang');
if (language_attr !== undefined) {
let language = language_attr.substr(0, 2);
if (language.length == 2) {
this._language = language;
} else {
this._language = this._settings['language'];
}
} else {
this._language = this._settings['language'];
}
}
return this._language;
}
constructor(settings: Object = {}) {
this._settings = ArtboxBasket.mergeObjects(this._defaults, settings);
this.init(true, true);
}
public init(update_modal, update_cart) {
$.get('/' + this.language + '/' + this._settings['url'], function (data) {
this._items = data.basket;
if (update_modal) {
this.updateModal(data.modal, false);
}
if (update_cart) {
this.updateCart(data.cart);
}
}.bind(this), 'json').fail(function () {
console.error(this._settings['initError']);
}.bind(this));
}
public add(variant_id, count): JQueryPromise<JQueryXHR> {
return $.post('/' + this.language + '/' + this._settings['url'] + '/add?variant_id=' + variant_id + '&count=' + count, function (data) {
this._items = data.basket;
this.updateModal(data.modal, data.cart, true);
}.bind(this), 'json').fail(function (xhr, status, error) {
console.error(error);
});
}
public set(variant_id, count): JQueryPromise<JQueryXHR> {
return $.post('/' + this.language + '/' + this._settings['url'] + '/set?variant_id=' + variant_id + '&count=' + count, function (data) {
this._items = data.basket;
this.updateModal(data.modal, data.cart, true);
}.bind(this), 'json').fail(function (xhr, status, error) {
console.error(error);
});
}
public remove(variant_id): JQueryPromise<JQueryXHR> {
return $.post('/' + this.language + '/' + this._settings['url'] + '/remove?variant_id=' + variant_id, function (data) {
this._items = data.basket;
this.updateModal(data.modal, data.cart, true);
}.bind(this), 'json').fail(function (xhr, status, error) {
console.error(error);
});
}
public updateModal(modal, cart_html, show = false) {
let modalBox = $(this._settings['modalSelector']);
modalBox.html(modal);
if (cart_html) {
this.updateCart(cart_html);
}
if (this.count < 1) {
this.hideBasket();
}
if (show) {
return show;
}
}
public updateCart(cart_html) {
let cart = $(this._settings['cartSelector']);
cart.html(cart_html);
}
public hideBasket() {
$(this._settings['modalSelector'])
.animate(
{
opacity: 0,
top: '0'
}, 200, function () {
$(this)
.css('display', 'none');
$('#overlay')
.fadeOut(400);
}
);
}
get count(): number {
return Object.keys(this._items).length;
}
private static mergeObjects(obj1: Object, obj2: Object): Object {
let obj = {};
for (let attribute in obj1) {
obj[attribute] = obj1[attribute];
}
for (let attribute in obj2) {
obj[attribute] = obj2[attribute];
}
return obj;
}
}