Skip to content

Commit f03a2f0

Browse files
benbai123benbai123
authored
Update uccustomize.js
1 parent 49fd03e commit f03a2f0

1 file changed

Lines changed: 152 additions & 25 deletions

File tree

‎tmp/uccustomize.js‎

Lines changed: 152 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -126,32 +126,138 @@
126126
wgt._addParam(param);
127127
});
128128
},
129+
_processItemClick: function (e, $item) {
130+
var wgt = this;
131+
// 點擊時
132+
e.preventDefault();
133+
// 找到選項下 checkbox
134+
var $cbx = $item.find('.custom-checkbox');
135+
// 改變勾選狀態
136+
if ($cbx.hasClass('custom-checkbox-checked')) {
137+
$cbx.removeClass('custom-checkbox-checked')
138+
.removeClass('show');
139+
} else {
140+
$cbx.addClass('custom-checkbox-checked')
141+
.addClass('show');
142+
// 若為選取時, 移除第二選取區中的項目
143+
var lb = $item.find('.label').text(),
144+
title = $item.closest('.group-box')
145+
.find('.group-box-header .group-box-title').text();
146+
$('.second-level-cond-block')
147+
.find('[data-label="'+lb+'"][data-title="'+title+'"]').remove();
148+
}
149+
// 重生右側上方選項
150+
set_right_condistion();
151+
wgt._initConditions();
152+
// 若點擊時沒有按著 Ctrl 則刷新頁面
153+
if (!e.ctrlKey) {
154+
wgt.ajaxLoad();
155+
}
156+
},
157+
// 將項目存到第二區
158+
// $conds: 傳入的上方選項
159+
_addToSecond: function ($conds) {
160+
// $scondBlock: 第二區
161+
var $scondBlock = $('.second-level-cond-block'),
162+
wgt = this;
163+
// 若無第二區就先生成
164+
if (!$scondBlock[0]) {
165+
// $cnt: 第二區內部內容
166+
// $clear: 第二區整區清除鈕
167+
var $cnt = $('<div class="cnt"></div>'),
168+
$clear = $('<span>全部清除</span>');
169+
$scondBlock = $('<div class="second-level-cond-block"></div>');
170+
// 調整 style
171+
$scondBlock.css({
172+
'position': 'relative', 'height': '25px', 'left': '5px'
173+
});
174+
$cnt.css({
175+
'position': 'absolute', 'left': '0', 'top': '0', 'z-index': '999999',
176+
'width': '220px', 'height': '30px', 'overflow': 'hidden',
177+
'background-color': '#CCCCCC', 'white-space': 'normal'
178+
});
179+
$clear.css({
180+
'color': '#DD406F', 'cursor': 'pointer', 'font-size': '18px'
181+
});
182+
// 移入時展開, 移出時收起
183+
$cnt.on('mouseenter', function () {
184+
$cnt.css('height', 'auto');
185+
}).on('mouseleave', function () {
186+
$cnt.css('height', '30px');
187+
});
188+
// 點擊全部清除時移除第二區
189+
$clear.on('click', function () {
190+
$scondBlock.remove();
191+
});
192+
// 將第二區加到頁面
193+
$cnt.append($clear);
194+
$scondBlock.append($cnt);
195+
$('.product-filter-list').before($scondBlock);
196+
}
197+
// 每一個上方選項
198+
$conds.each(function () {
199+
// 由選項所帶的 url 找到對應左方選項
200+
// 取得選項文字及區塊 title
201+
// $scond: 第二區選項 (待生成)
202+
// $cross: 選項的移除鈕
203+
var url = $(this).attr("s_href"),
204+
$opt = $('.group-box-body a[s_href="'+url+'"]'),
205+
lb = $opt.find('.label').text(),
206+
title = $opt.closest('.group-box')
207+
.find('.group-box-header .group-box-title').text(),
208+
$scond,
209+
$cross = $('<span>&times;</span>');
210+
// 若已有該選項則不再添加
211+
if ($scondBlock.find('[data-label="'+lb+'"][data-title="'+title+'"]')[0]) return;
212+
// 生成選項內容
213+
$scond = $('<div data-label="'+lb+'" data-title="'+title+'" title="'+title+'--'+lb+'">'+lb+'</div>');
214+
// 調整 style
215+
$scond.css({
216+
'display': 'inline-block', 'font-size': '18px', 'color': '#888888',
217+
'padding': '5px 10px', 'cursor': 'pointer'
218+
});
219+
$cross.css({
220+
'color': '#DD406F'
221+
});
222+
// 點擊時
223+
// 若點在 $cross 上則移除選項
224+
// 若點在其它部份則重新選取選項
225+
$scond.on('click', function (e) {
226+
if (e.target == $(this).find('span')[0]) {
227+
$(this).remove();
228+
} else {
229+
// 從 $scond 上取出 title 及 label
230+
var slb = $(this).attr('data-label'),
231+
stitle = $(this).attr('data-title'),
232+
$item;
233+
$(this).remove();
234+
// 由 title 及 label 找到對應的左方選項
235+
$item = $('.group-box').filter(function () {
236+
return $(this).find('.group-box-header .group-box-title').text() == stitle;
237+
}).find('a')
238+
.filter(function () {
239+
return $(this).find('.label').text() == slb;
240+
});
241+
// 若為已選取狀態則略過
242+
if ($item.find('.custom-checkbox-checked')[0]) return;
243+
// 否則當選項點擊處理
244+
wgt._processItemClick(e, $item);
245+
}
246+
});
247+
// 將項目內容加到頁面
248+
$scond.append($cross);
249+
$scondBlock.find('.cnt').append($scond);
250+
});
251+
},
129252
// 初始化左方選項
130253
_initSelections: function () {
131254
var wgt = this;
132255
// 所有選項
133256
// 移除原本綁定
257+
// 重新綁定點擊事件
134258
$('.group-box-body a').off()
135-
.click(function(e){
136-
// 點擊時
137-
e.preventDefault();
138-
// 找到選項下 checkbox
139-
var $cbx = $(this).find('.custom-checkbox');
140-
// 改變勾選狀態
141-
if ($cbx.hasClass('custom-checkbox-checked')) {
142-
$cbx.removeClass('custom-checkbox-checked')
143-
.removeClass('show');
144-
} else {
145-
$cbx.addClass('custom-checkbox-checked')
146-
.addClass('show');
147-
}
148-
// 重生右側上方選項
149-
set_right_condistion();
150-
wgt._initConditions();
151-
// 若點擊時沒有按著 Ctrl 則刷新頁面
152-
if (!e.ctrlKey) {
153-
wgt.ajaxLoad();
154-
}
259+
.click(function(e) {
260+
wgt._processItemClick(e, $(this));
155261
});
156262
},
157263
// 初始化上方條件
@@ -166,9 +272,11 @@
166272
$opt = $('.group-box-body a[s_href="'+url+'"]'),
167273
$cbx = $opt.find('.custom-checkbox');
168274
// 被點擊時, 移除左方選項的選取狀態
275+
// 將項目轉存到第二層
169276
// 也移除本身的 dom 元素
170277
$cbx.removeClass('custom-checkbox-checked')
171278
.removeClass('show');
279+
wgt._addToSecond($(this));
172280
$(this).remove();
173281
// 若點擊時沒有按著 Ctrl 鍵
174282
// 則更新頁面
@@ -181,6 +289,8 @@
181289
$('.clear').off().
182290
click(function(e){
183291
e.preventDefault();
292+
// 將項目轉存到第二層
293+
wgt._addToSecond($('.condition'));
184294
// 移除所有上方選項
185295
$('.condition').remove();
186296
// 清除所有選取狀態
@@ -215,6 +325,9 @@
215325
n += p.join('&');
216326
// 存下本次 URL
217327
this._previousURL = n;
328+
if (window.history && window.history.pushState) {
329+
window.history.pushState(n, document.title, n);
330+
}
218331
$.ajax({
219332
url: n,
220333
type: "GET",
@@ -234,33 +347,47 @@
234347
},
235348
// 顯示操作說明 (首次)
236349
_showDirections: function () {
350+
// 還沒顯示過才顯示
237351
if (!this.dirShown) {
238352
this.dirShown = true;
353+
// 藉用 loading 的遮罩
239354
loading();
355+
// 藏掉 loading 圖示
240356
$('#loading-position').hide();
357+
// $dir: 說明區塊
358+
// $cross: 關閉鈕
241359
var $dir = $('<div></div>'),
242360
$cross = $('<div>&times;</div>');
361+
// 調整 style
243362
$dir.css({
244363
'position': 'fixed', 'left': '0', 'top': '0', 'right': '0', 'bottom': '0',
245364
'margin': '20px', 'padding': '20px', 'border-radius': '15px', 'z-index': '999999',
246-
'background-color': 'white', 'color': '#DD406F', 'font-size': '28px'
365+
'background-color': 'white', 'color': '#DD406F', 'font-size': '28px',
366+
'overflow-y': 'auto'
247367
});
248368
$cross.css({
249369
'position': 'absolute', 'top': '5px', 'right': '15px',
250370
'cursor': 'pointer'
251371
});
372+
// 加上內容
252373
$dir.html([
253374
'操作方式:<br/>',
254375
'1. Ctrl + 滑鼠左鍵 Click 連續選取/取消選取左方或上方選項<br/>',
255-
'2. 滑鼠左鍵 Click 選取/取消選取左方或上方選項並載入內容<br/><br/>',
376+
'2. 滑鼠左鍵 Click 選取/取消選取左方或上方選項並載入內容<br/>',
377+
'3. 點擊上方選項取消選取時, 會增加一個 "第二層區塊" 於左方選項上方, 方便將一度選取過又刪除的項目再重新選取而不必重新於左方選項中翻找<br/>',
378+
'4. 第二層區塊中點擊 "全部清除" 可移除整個區塊, 點擊選項文字部份可重新選取選項, 點擊選項叉叉鈕可將該選項自第二層區塊中移除<br/><br/>',
256379
'注意:<br/>',
257-
'需在做任何選取操作之前啟用, 若已有做過選取操作, 請先滑鼠左鍵 Click 點擊任一選項<br/>',
258-
'連續選取後需有一載入動作後下方分頁才可正確動作'
259-
]);
380+
'1. 需在做任何選取操作之前啟用, 若已有做過選取操作, 請先滑鼠左鍵 Click 點擊任一選項<br/>',
381+
'2. 連續選取後需有一載入動作後下方分頁才可正確動作<br/>',
382+
'3. 原始網頁內容均忠實呈現, 僅稍加修改操作流程、添加本操作說明及第二層選取區'
383+
].join(''));
384+
// 點關閉鈕時
260385
$cross.on('click', function () {
386+
// 移除 loading 及說明區塊
261387
closeLoading();
262388
$dir.remove();
263389
});
390+
// 將內容加到頁面上
264391
$dir.append($cross);
265392
$('body').append($dir);
266393
}

0 commit comments

Comments
 (0)