|
@@ -14,10 +14,10 @@
|
14
|
14
|
<div>
|
15
|
15
|
<table class="table" style="border-collapse:collapse;">
|
16
|
16
|
<tbody class="msgTbody">
|
17
|
|
- <input type="hidden" id="operateMode" value="edit"/>
|
|
17
|
+
|
18
|
18
|
<input type="hidden" id="id" value="{{$id}}"/>
|
19
|
19
|
|
20
|
|
- <!-- 欄位:圖文頭貼設定 -->
|
|
20
|
+ <!-- 欄位:議程資料設定 -->
|
21
|
21
|
<tr class="msgTemplate">
|
22
|
22
|
<td class="header-require col-xl-2">議程資料設定</td>
|
23
|
23
|
<td>
|
|
@@ -32,10 +32,10 @@
|
32
|
32
|
<!-- 序號 -->
|
33
|
33
|
@if ($operdata == "")
|
34
|
34
|
<!-- Insert Mode -->
|
35
|
|
- <input type="hidden" name="mode" value="insert"/>
|
|
35
|
+ <input type="hidden" name="mode" id="mode" value="insert"/>
|
36
|
36
|
@else
|
37
|
37
|
<!-- Edit Mode -->
|
38
|
|
- <input type="hidden" name="mode" value="edit"/>
|
|
38
|
+ <input type="hidden" name="mode" id="mode" value="edit"/>
|
39
|
39
|
<tr>
|
40
|
40
|
<td class="col-xl-2">序號</td>
|
41
|
41
|
<td>
|
|
@@ -286,85 +286,10 @@
|
286
|
286
|
location.href = '/backend/dataManagement/track';
|
287
|
287
|
});
|
288
|
288
|
|
289
|
|
- // 註冊事件
|
290
|
|
- eventImagemap();
|
291
|
|
- eventUriAction();
|
292
|
|
-
|
293
|
289
|
});
|
294
|
290
|
|
295
|
|
- function restoreMsgInfo(msgInfo) {
|
296
|
|
- // 初始化
|
297
|
|
- var tabId = 'tab1';
|
298
|
|
- var menuInfoObj = JSON.parse(msgInfo).menuInfo;
|
299
|
|
- // console.log(menuInfoObj);
|
300
|
|
-
|
301
|
|
- // var menuFlag = menuInfoObj.menuFlag;
|
302
|
|
- // var modelType = menuInfoObj.modelType;
|
303
|
|
- // var chatBarText = menuInfoObj.chatBarText;
|
304
|
|
- // var displayByDefault = menuInfoObj.displayByDefault;
|
305
|
|
- var imgUrl = menuInfoObj.imgUrl;
|
306
|
|
- // var imgSize = menuInfoObj.imgSize;
|
307
|
|
- // var imagemapActions = menuInfoObj.actions;
|
308
|
|
-
|
309
|
|
- // 還原內容
|
310
|
|
- $('#'+tabId+'MenuFlag').val(menuFlag);
|
311
|
|
- $("#"+tabId+"ImagemapModelType").val(modelType);
|
312
|
|
- $("#chatBarText").val(chatBarText);
|
313
|
|
- if (!displayByDefault) {
|
314
|
|
- $("input[name='displayByDefault']").filter('[value="0"]').prop('checked', true);
|
315
|
|
- }
|
316
|
|
- $("img[data-target='"+tabId+"-image-preview-imagemapImg']").attr("src", imgUrl);
|
317
|
|
-
|
318
|
|
- // 點擊 選擇的版型
|
319
|
|
- // trigger: $('.imagemap-model-small').click()
|
320
|
|
- var $chosen_model = $("#imgmapcontent-"+tabId).find('.imagemap-model-small').filter("[data-model_type='"+modelType+"']");
|
321
|
|
- if (modelType === 'mcustom') {
|
322
|
|
- $chosen_model.trigger('click', [menuInfoObj]);
|
323
|
|
- } else {
|
324
|
|
- $chosen_model.click();
|
325
|
|
- }
|
326
|
|
-
|
327
|
|
- if (modelType == 'mjson') {
|
328
|
|
- // todo 重新組合 ImagemapJson
|
329
|
|
- var imagemapJson = '';
|
330
|
|
- $("#"+tabId+"ImagemapJson").val(imagemapJson);
|
331
|
|
- } else {
|
332
|
|
- // 還原 每個按鈕的值
|
333
|
|
- $.each(imagemapActions, function(i, actionObj) {
|
334
|
|
- var btnNum = i + 1;
|
335
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Act").val(actionObj.type);
|
336
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Act").trigger('change'); // 觸發事件切換按鈕N動作
|
337
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Content").val(actionObj.content);
|
338
|
|
-
|
339
|
|
- // 前往選單
|
340
|
|
- if (actionObj.type == 'richmenu') {
|
341
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Submenu").val(actionObj.content);
|
342
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Submenu").trigger('change');
|
343
|
|
-
|
344
|
|
- if ('keywordValue' in actionObj) {
|
345
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Content").attr('data-keyword_value', actionObj.keywordValue);
|
346
|
|
- }
|
347
|
|
- }
|
348
|
|
-
|
349
|
|
- // 貼標 (開啟連結)
|
350
|
|
- if ('tags' in actionObj) {
|
351
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Tags").val(actionObj.tags);
|
352
|
|
- $("#"+tabId+"Imagemapbtn"+btnNum+"Tags").trigger('change');
|
353
|
|
- }
|
354
|
|
- });
|
355
|
|
- }
|
356
|
|
- }
|
357
|
|
-
|
358
|
291
|
// 完成編輯
|
359
|
292
|
function finishEdit() {
|
360
|
|
- var msgInfoObj = msgInfo();
|
361
|
|
- // console.log(msgInfoObj);
|
362
|
|
- // return;
|
363
|
|
-
|
364
|
|
- if ('err' in msgInfoObj) {
|
365
|
|
- alert("有錯誤:\n" + msgInfoObj.err.join("\n"));
|
366
|
|
- return;
|
367
|
|
- }
|
368
|
293
|
|
369
|
294
|
$.blockUI({
|
370
|
295
|
message: $('#ajax-spinner'),
|
|
@@ -378,7 +303,7 @@
|
378
|
303
|
type: "POST",
|
379
|
304
|
url: '/backend/dataManagement/track/store',
|
380
|
305
|
data: {
|
381
|
|
- "operateMode": $("#operateMode").val(),
|
|
306
|
+ "operateMode": $("#mode").val(),
|
382
|
307
|
"trackNo": $("#trackNo").val(),
|
383
|
308
|
"trackTitle": $("#trackTitle").val(),
|
384
|
309
|
"trackLimit": $("#trackLimit").val(),
|
|
@@ -393,7 +318,6 @@
|
393
|
318
|
location.href = '/backend/dataManagement/track';
|
394
|
319
|
} else {
|
395
|
320
|
alert(result.message);
|
396
|
|
- alert('123');
|
397
|
321
|
}
|
398
|
322
|
},
|
399
|
323
|
fail: function(jqXHR, textStatus) {
|
|
@@ -406,568 +330,5 @@
|
406
|
330
|
});
|
407
|
331
|
}
|
408
|
332
|
|
409
|
|
- function eventImagemap() {
|
410
|
|
- // 選擇版型
|
411
|
|
- $('.imagemap-model-small').unbind("click");
|
412
|
|
- $('.imagemap-model-small').click(function (event, imagemapContent) {
|
413
|
|
- var $model_small = $(this);
|
414
|
|
- var $model_small_container = $model_small.parent('.imagemap-model-small-container');
|
415
|
|
- var $imagemap_content = $model_small.closest('div[id^="imgmapcontent-tab"]');
|
416
|
|
- var $imagemap_btns = $imagemap_content.children('.imagemap-btn'); // 此頁籤下所有按鈕區域
|
417
|
|
-
|
418
|
|
- var tabNum = 1;
|
419
|
|
- var tabId = 'tab'+tabNum;
|
420
|
|
- var modelType = $model_small.attr('data-model_type');
|
421
|
|
- var imgSizeObj = JSON.parse($('#'+tabId+'ImagemapImgSize').val());
|
422
|
|
-
|
423
|
|
- // 三種版型類型的容器
|
424
|
|
- var $imagemap_model = $imagemap_content.find('.imagemap-model');
|
425
|
|
- var $custom_container = $('#'+tabId+'ImagemapBoxContainer');
|
426
|
|
- var $json_container = $('#'+tabId+'ImagemapJson').closest('div.row');
|
427
|
|
-
|
428
|
|
- if ($model_small.hasClass('active')) {
|
429
|
|
- return;
|
430
|
|
- }
|
431
|
|
-
|
432
|
|
- // 設定選擇的 active
|
433
|
|
- $model_small_container.find('.imagemap-model-small').removeClass('active');
|
434
|
|
- $model_small.addClass('active');
|
435
|
|
-
|
436
|
|
- // 設定 model type
|
437
|
|
- $('#'+tabId+'ImagemapModelType').val(modelType);
|
438
|
|
-
|
439
|
|
- imagemapClearBtns($imagemap_btns, tabId);
|
440
|
|
-
|
441
|
|
- if (modelType == 'mjson') {
|
442
|
|
- $imagemap_model.hide();
|
443
|
|
- $custom_container.hide();
|
444
|
|
- $json_container.show();
|
445
|
|
- $imagemap_btns.hide();
|
446
|
|
- }
|
447
|
|
- else if (modelType == 'mcustom') {
|
448
|
|
- $imagemap_model.hide();
|
449
|
|
- $custom_container.show();
|
450
|
|
- $json_container.hide();
|
451
|
|
-
|
452
|
|
- var boxNum = 1; // ImagemapBox1
|
453
|
|
- // 要等 ImagemapBox HTML 完全顯示才能繪製,所以等 300ms 才初始化
|
454
|
|
- setTimeout(function() {
|
455
|
|
- imagemapInitBox(tabNum, boxNum, imgSizeObj, imagemapContent);
|
456
|
|
-
|
457
|
|
- // 設定背景圖案 (initImagemapBox 後才能設定)
|
458
|
|
- var imagemapUrl = $('img[data-target="'+tabId+'-image-preview-imagemapImg"]').attr('src');
|
459
|
|
- $('#ImagemapBox'+boxNum).css('background-image', 'url(' + imagemapUrl + ')');
|
460
|
|
- }, 300);
|
461
|
|
- }
|
462
|
|
- else {
|
463
|
|
- $imagemap_model.show();
|
464
|
|
- $custom_container.hide();
|
465
|
|
- $json_container.hide();
|
466
|
|
-
|
467
|
|
- // 建立對應的 imagemap-model
|
468
|
|
- $imagemap_model.children('.table').remove();
|
469
|
|
- $model_small.children('.table').clone(false).appendTo($imagemap_model);
|
470
|
|
- $imagemap_model.find('td').each(function (index) {
|
471
|
|
- var btnNum = index + 1;
|
472
|
|
- if (btnNum === 1) $(this).addClass('active');
|
473
|
|
- $(this).html('按鈕'+btnNum);
|
474
|
|
- $(this).attr('data-btn', btnNum);
|
475
|
|
- });
|
476
|
|
- }
|
477
|
|
- });
|
478
|
|
-
|
479
|
|
- // 編輯按鈕區域
|
480
|
|
- $('.imagemap-model').unbind("click");
|
481
|
|
- $('.imagemap-model').on('click', 'td', function () {
|
482
|
|
- var $clicked_td = $(this);
|
483
|
|
- var $table = $clicked_td.closest('.table');
|
484
|
|
- var $imagemap_content = $clicked_td.closest('div[id^="imgmapcontent-tab"]');
|
485
|
|
- var tabNum = '1';
|
486
|
|
- var btnNum = $clicked_td.attr('data-btn');
|
487
|
|
-
|
488
|
|
- // 設定選擇的 active
|
489
|
|
- $table.find('td').removeClass('active');
|
490
|
|
- $clicked_td.addClass('active');
|
491
|
|
-
|
492
|
|
- // 顯示對應按鈕
|
493
|
|
- $imagemap_content.find('.imagemap-btn').hide();
|
494
|
|
- $('#tab'+'1'+'Imagemapbtn'+btnNum).show();
|
495
|
|
- });
|
496
|
|
-
|
497
|
|
- // 切換 按鈕N動作
|
498
|
|
- $('.imagemap-btn').find('select.imagemapBtnAct').unbind("change");
|
499
|
|
- $('.imagemap-btn').find('select.imagemapBtnAct').change(function () {
|
500
|
|
- var tabNum = 1;
|
501
|
|
- var btnNum = $(this).attr('id').split('Imagemapbtn')[1].replace(/\D/g, ''); // tab1Imagemapbtn1Act
|
502
|
|
- var type = $(this).val();
|
503
|
|
-
|
504
|
|
- var $btnContent = $('#tab1Imagemapbtn'+btnNum+'Content');
|
505
|
|
- var $btnSubmenu = $('#tab1Imagemapbtn'+btnNum+'Submenu');
|
506
|
|
- var $btnTags = $('#tab1Imagemapbtn'+btnNum+'Tags');
|
507
|
|
-
|
508
|
|
- // 清空
|
509
|
|
- $btnContent.val('');
|
510
|
|
- $btnSubmenu.val(0);
|
511
|
|
- $btnTags.val(null).trigger('change');
|
512
|
|
-
|
513
|
|
- // 顯示按鈕對應的元件
|
514
|
|
- imagemapShowBtnInputsByAction(type, $btnContent, $btnTags, $btnSubmenu);
|
515
|
|
- });
|
516
|
|
- }
|
517
|
|
-
|
518
|
|
- function eventUriAction() {
|
519
|
|
- $('.js-example-basic-multiple').select2({
|
520
|
|
- placeholder: '請選擇或輸入以搜尋標籤'
|
521
|
|
- });
|
522
|
|
- }
|
523
|
|
-
|
524
|
|
- function msgInfo() {
|
525
|
|
- var result = {
|
526
|
|
- menuInfo: {},
|
527
|
|
- err: []
|
528
|
|
- };
|
529
|
|
-
|
530
|
|
- var msgObj = {};
|
531
|
|
- var tabNum = '1';
|
532
|
|
- var tabId = 'tab' + tabNum;
|
533
|
|
-
|
534
|
|
- // 取資料
|
535
|
|
- var menuFlag = $('#'+tabId+'MenuFlag').val();
|
536
|
|
- var modelType = $("#"+tabId+"ImagemapModelType").val();
|
537
|
|
- var imgUrl = $("img[data-target$='"+tabId+"-image-preview-imagemapImg']").attr("src");
|
538
|
|
- var json = $("#"+tabId+"ImagemapJson").val();
|
539
|
|
- var menuTitle = $("#menuTitle").val();
|
540
|
|
- var chatBarText = $("#chatBarText").val();
|
541
|
|
- var displayByDefault = $("input[name='displayByDefault']:checked").val();
|
542
|
|
-
|
543
|
|
- // 檢查
|
544
|
|
- if (menuTitle === '') result.err.push('標題內容為空');
|
545
|
|
- if (imgUrl === '/assets/images/placeholder_upload_380_260.png') result.err.push('圖片沒上傳');
|
546
|
|
- if (modelType == 'mjson' && json === '') result.err.push('JSON內容為空');
|
547
|
|
- if (chatBarText === '') result.err.push('選單顯示名稱為空');
|
548
|
|
-
|
549
|
|
- var imagemapActions = '';
|
550
|
|
- if (modelType == 'mjson') {
|
551
|
|
- // todo msgInfoImagemapActionsFromJson(json)
|
552
|
|
- imagemapActions = '';
|
553
|
|
- } else if (modelType == 'mcustom') {
|
554
|
|
- imagemapActions = msgInfoImagemapActions(tabNum, modelType, result);
|
555
|
|
- } else { // 預設版型
|
556
|
|
- imagemapActions = msgInfoImagemapActions(tabNum, modelType, result);
|
557
|
|
- }
|
558
|
|
-
|
559
|
|
- msgObj = {
|
560
|
|
- // menuFlag: menuFlag,
|
561
|
|
- // modelType: modelType,
|
562
|
|
- // name: menuTitle,
|
563
|
|
- // chatBarText: chatBarText,
|
564
|
|
- // displayByDefault: !!parseInt(displayByDefault),
|
565
|
|
- imgUrl: imgUrl,
|
566
|
|
- // imgSize: {
|
567
|
|
- // "width": 800,
|
568
|
|
- // "height": 800
|
569
|
|
- // },
|
570
|
|
- // actions: imagemapActions,
|
571
|
|
- };
|
572
|
|
-
|
573
|
|
- result.menuInfo = msgObj;
|
574
|
|
-
|
575
|
|
- if (result.err.length === 0) {
|
576
|
|
- delete result.err;
|
577
|
|
- }
|
578
|
|
-
|
579
|
|
- return result;
|
580
|
|
- }
|
581
|
|
-
|
582
|
|
- function msgInfoImagemapActions(tabNum, modelType, result) {
|
583
|
|
- var tabId = 'tab'+tabNum;
|
584
|
|
-
|
585
|
|
- var areas = [];
|
586
|
|
- if (modelType == 'mcustom') {
|
587
|
|
- areas = imagemapBoxes[tabNum].getResultPos();
|
588
|
|
- } else if (modelType != 'mjson') {
|
589
|
|
- // 樣板按鈕區域定義 (依照頁面顯示的按鈕順序)
|
590
|
|
- var modelAreaMap = {
|
591
|
|
- "m1": [
|
592
|
|
- {"x": 0, "y": 0, "width": 833, "height": 843},
|
593
|
|
- {"x": 833, "y": 0, "width": 833, "height": 843},
|
594
|
|
- {"x": 1666, "y": 0, "width": 834, "height": 843},
|
595
|
|
- {"x": 0, "y": 843, "width": 833, "height": 843},
|
596
|
|
- {"x": 833, "y": 843, "width": 833, "height": 843},
|
597
|
|
- {"x": 1666, "y": 843, "width": 834, "height": 843},
|
598
|
|
- ],
|
599
|
|
- "m2": [
|
600
|
|
- {"x": 0, "y": 0, "width": 1250, "height": 843},
|
601
|
|
- {"x": 1250, "y": 0, "width": 1250, "height": 843},
|
602
|
|
- {"x": 0, "y": 843, "width": 1250, "height": 843},
|
603
|
|
- {"x": 1250, "y": 843, "width": 1250, "height": 843},
|
604
|
|
- ],
|
605
|
|
- "m3": [
|
606
|
|
- {"x": 0, "y": 0, "width": 2500, "height": 843},
|
607
|
|
- {"x": 0, "y": 843, "width": 833, "height": 843},
|
608
|
|
- {"x": 833, "y": 843, "width": 833, "height": 843},
|
609
|
|
- {"x": 1666, "y": 843, "width": 834, "height": 843},
|
610
|
|
- ],
|
611
|
|
- "m4": [
|
612
|
|
- {"x": 0, "y": 0, "width": 1250, "height": 1686},
|
613
|
|
- {"x": 1250, "y": 0, "width": 1250, "height": 843},
|
614
|
|
- {"x": 1250, "y": 843, "width": 1250, "height": 843},
|
615
|
|
- ],
|
616
|
|
- "m5": [
|
617
|
|
- {"x": 0, "y": 0, "width": 2500, "height": 843},
|
618
|
|
- {"x": 0, "y": 843, "width": 2500, "height": 843},
|
619
|
|
- ],
|
620
|
|
- "m6": [
|
621
|
|
- {"x": 0, "y": 0, "width": 1250, "height": 1686},
|
622
|
|
- {"x": 1250, "y": 0, "width": 1250, "height": 1686},
|
623
|
|
- ],
|
624
|
|
- "m7": [
|
625
|
|
- {"x": 0, "y": 0, "width": 2500, "height": 1686},
|
626
|
|
- ]
|
627
|
|
- };
|
628
|
|
- areas = modelAreaMap[modelType];
|
629
|
|
- }
|
630
|
|
-
|
631
|
|
- var actions = [];
|
632
|
|
- for (var btnNum = 1; btnNum <= areas.length; btnNum++) {
|
633
|
|
- var btnId = 'btn'+btnNum;
|
634
|
|
- var type = $("#"+tabId+"Imagemap"+btnId+"Act").val();
|
635
|
|
- var content = $("#"+tabId+"Imagemap"+btnId+"Content").val();
|
636
|
|
- var submenuId = $("#"+tabId+"Imagemap"+btnId+"Submenu").val();
|
637
|
|
- var tagsData = $("#"+tabId+"Imagemap"+btnId+"Tags").select2('data');
|
638
|
|
- var area = areas[btnNum-1];
|
639
|
|
-
|
640
|
|
- if (type != 'richmenu' && content === '') result.err.push('按鈕'+btnNum+'的內容為空');
|
641
|
|
- if (type == 'uri'
|
642
|
|
- && !content.startsWith('https://')
|
643
|
|
- && !content.startsWith('tel:')
|
644
|
|
- && !content.startsWith('line://')
|
645
|
|
- ) {
|
646
|
|
- result.err.push('按鈕'+btnNum+'的連結網址須為 https:// 或 tel:// 或 line://');
|
647
|
|
- }
|
648
|
|
-
|
649
|
|
- var action = {
|
650
|
|
- "type": type,
|
651
|
|
- "content": content,
|
652
|
|
- "area": {
|
653
|
|
- "x": area.x,
|
654
|
|
- "y": area.y,
|
655
|
|
- "width": area.width,
|
656
|
|
- "height": area.height
|
657
|
|
- }
|
658
|
|
- };
|
659
|
|
-
|
660
|
|
- if (type == 'uri' && tagsData.length !== 0) { // uri 貼標
|
661
|
|
- var tags = [];
|
662
|
|
- $.each(tagsData, function(i, item) {
|
663
|
|
- tags.push(item.id);
|
664
|
|
- });
|
665
|
|
- action.tags = tags;
|
666
|
|
- } else if (type == 'richmenu') { // 前往子選單
|
667
|
|
- action.content = submenuId;
|
668
|
|
-
|
669
|
|
- var keywordValue = $("#"+tabId+"Imagemapbtn"+btnNum+"Content").attr('data-keyword_value');
|
670
|
|
- if (typeof keywordValue === 'undefined') {
|
671
|
|
- var menuFlag = $('#tab1MenuFlag').val();
|
672
|
|
- keywordValue = 'richmenu-' + menuFlag.replace(/menu-/g, '') + '-' + Date.now();
|
673
|
|
- }
|
674
|
|
- action.keywordValue = keywordValue;
|
675
|
|
- }
|
676
|
|
-
|
677
|
|
- actions.push(action);
|
678
|
|
- }
|
679
|
|
- // console.log(actions);
|
680
|
|
-
|
681
|
|
- return actions
|
682
|
|
- }
|
683
|
|
-
|
684
|
|
- function generateFlag(length) {
|
685
|
|
- var result = '';
|
686
|
|
- var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
687
|
|
- var charactersLength = characters.length;
|
688
|
|
- for ( var i = 0; i < length; i++ ) {
|
689
|
|
- result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
690
|
|
- }
|
691
|
|
- return result;
|
692
|
|
- }
|
693
|
|
-
|
694
|
|
- function imagemapInitBox(tabNum, boxNum, imgSizeObj, imagemapContent) {
|
695
|
|
- let imagemapBox;
|
696
|
|
- var mapData = null;
|
697
|
|
-
|
698
|
|
- // console.log(imagemapContent);
|
699
|
|
- if (typeof imagemapContent !== 'undefined') {
|
700
|
|
- mapData = imagemapContent;
|
701
|
|
- }
|
702
|
|
-
|
703
|
|
- imagemapBox = new resizer({
|
704
|
|
- container: '#ImagemapBox'+boxNum,
|
705
|
|
- wrap: imgSizeObj,
|
706
|
|
- wrapperWidth: 380,
|
707
|
|
- itemDefaultSize: 380,
|
708
|
|
- add: '#AddImagemapBox'+boxNum,
|
709
|
|
- delete: {
|
710
|
|
- selector: '#DeleteImagemapBox'+boxNum,
|
711
|
|
- getDelete: function(res) {
|
712
|
|
- // console.log(res);
|
713
|
|
- var btnNum = res.index + 1;
|
714
|
|
- var tabId = 'tab'+tabNum;
|
715
|
|
-
|
716
|
|
- // 重設按鈕的值 (從刪除的下一個的開始往前遞補)
|
717
|
|
- for (btnNum; btnNum < 12; btnNum++) {
|
718
|
|
- var nextNum = btnNum + 1;
|
719
|
|
-
|
720
|
|
- var $currentAct = $('#'+tabId+'Imagemapbtn'+btnNum+'Act');
|
721
|
|
- var $currentContent = $('#'+tabId+'Imagemapbtn'+btnNum+'Content');
|
722
|
|
- var $currentSubmenu = $('#'+tabId+'Imagemapbtn'+btnNum+'Submenu');
|
723
|
|
- var $currentTags = $('#'+tabId+'Imagemapbtn'+btnNum+'Tags');
|
724
|
|
-
|
725
|
|
- var $nextAct = $('#'+tabId+'Imagemapbtn'+nextNum+'Act');
|
726
|
|
- var $nextContent = $('#'+tabId+'Imagemapbtn'+nextNum+'Content');
|
727
|
|
- var $nextSubmenu = $('#'+tabId+'Imagemapbtn'+nextNum+'Submenu');
|
728
|
|
- var $nextTags = $('#'+tabId+'Imagemapbtn'+nextNum+'Tags');
|
729
|
|
-
|
730
|
|
- // 內容
|
731
|
|
- $currentAct.val($nextAct.val());
|
732
|
|
- $currentContent.val($nextContent.val());
|
733
|
|
- $currentSubmenu.val($nextSubmenu.val());
|
734
|
|
- // 標籤
|
735
|
|
- var nextTagsData = $nextTags.select2('data');
|
736
|
|
- if (nextTagsData.length !== 0) {
|
737
|
|
- var nextTags = [];
|
738
|
|
- $.each(nextTagsData, function(i, item) {
|
739
|
|
- nextTags.push(item.id);
|
740
|
|
- });
|
741
|
|
- $currentTags.val(nextTags);
|
742
|
|
- $currentTags.trigger('change');
|
743
|
|
- }
|
744
|
|
-
|
745
|
|
- // 顯示按鈕對應的元件
|
746
|
|
- imagemapShowBtnInputsByAction($currentAct.val(), $currentContent, $currentTags, $currentSubmenu);
|
747
|
|
- }
|
748
|
|
-
|
749
|
|
- // 清除最後一個按鈕
|
750
|
|
- $('#'+tabId+'Imagemapbtn12Act').val('postback'); // richmenu 預設
|
751
|
|
- $('#'+tabId+'Imagemapbtn12Content').val('');
|
752
|
|
- $('#'+tabId+'Imagemapbtn12Submenu').val(0);
|
753
|
|
- $('#'+tabId+'Imagemapbtn12Tags').val(null).trigger('change');
|
754
|
|
-
|
755
|
|
- // 顯示最後一個按鈕對應的元件
|
756
|
|
- imagemapShowBtnInputsByAction('postback', $('#'+tabId+'Imagemapbtn12Content'), $('#'+tabId+'Imagemapbtn12Tags'), $('#'+tabId+'Imagemapbtn12Submenu'));
|
757
|
|
- }
|
758
|
|
- },
|
759
|
|
- get: '#GetImagemapBox'+boxNum,
|
760
|
|
- map: mapData,
|
761
|
|
- getActive: function(res) {
|
762
|
|
- // console.log(res);
|
763
|
|
- var $imagemapContent = $('#imgmapcontent-tab'+tabNum);
|
764
|
|
- var btnNum = res.index + 1;
|
765
|
|
-
|
766
|
|
- // 顯示對應按鈕
|
767
|
|
- $imagemapContent.find('.imagemap-btn').hide();
|
768
|
|
- $('#tab'+tabNum+'Imagemapbtn'+btnNum).show();
|
769
|
|
- }
|
770
|
|
- });
|
771
|
|
-
|
772
|
|
- imagemapBoxes[tabNum] = imagemapBox;
|
773
|
|
- }
|
774
|
|
-
|
775
|
|
- function imagemapShowBtnInputsByAction(action, $btnContent, $btnTags, $btnSubmenu) {
|
776
|
|
- if (action == 'uri') {
|
777
|
|
- $btnContent.closest('div[class="row"]').show();
|
778
|
|
- $btnTags.closest('div[class="row"]').show();
|
779
|
|
- $btnSubmenu.closest('div[class="row"]').hide();
|
780
|
|
- } else if (action == 'richmenu') {
|
781
|
|
- $btnContent.closest('div[class="row"]').hide();
|
782
|
|
- $btnTags.closest('div[class="row"]').hide();
|
783
|
|
- $btnSubmenu.closest('div[class="row"]').show();
|
784
|
|
- } else {
|
785
|
|
- $btnContent.closest('div[class="row"]').show();
|
786
|
|
- $btnTags.closest('div[class="row"]').hide();
|
787
|
|
- $btnSubmenu.closest('div[class="row"]').hide();
|
788
|
|
- }
|
789
|
|
- }
|
790
|
|
-
|
791
|
|
- function imagemapClearBtns($imagemap_btns, tabId) {
|
792
|
|
- var $btnContents = $imagemap_btns.find('.imagemapBtnContent');
|
793
|
|
- var $btnActs = $imagemap_btns.find('.imagemapBtnAct');
|
794
|
|
- var $btnSubmenus = $imagemap_btns.find('select.imagemapBtnSubmenu');
|
795
|
|
- var $btnTags = $imagemap_btns.find('.imagemapBtnTags');
|
796
|
|
-
|
797
|
|
- // 清除按鈕區域內容
|
798
|
|
- $btnContents.val('');
|
799
|
|
- $btnActs.val('postback'); // richmenu 預設
|
800
|
|
- $btnSubmenus.val(0)
|
801
|
|
- $btnTags.val(null).trigger('change');
|
802
|
|
-
|
803
|
|
- // 顯示按鈕對應的元件 (這邊是一次設定所有按鈕下所有元件)
|
804
|
|
- imagemapShowBtnInputsByAction('postback', $btnContents, $btnTags, $btnSubmenus);
|
805
|
|
-
|
806
|
|
- // 顯示按鈕1
|
807
|
|
- $imagemap_btns.hide();
|
808
|
|
- $('#'+tabId+'Imagemapbtn1').show();
|
809
|
|
- }
|
810
|
|
-
|
811
|
|
- // AJAX 上傳圖片/影片
|
812
|
|
- // http://arsee88.blogspot.com/2020_09_20_archive.html
|
813
|
|
- var imagePreview = [];
|
814
|
|
- var spinner = [];
|
815
|
|
- var fileUploader = [];
|
816
|
|
- // 註冊上傳圖片的功能(可以重複註冊)
|
817
|
|
- var imagemapImgId = 'imagemapImg' + '1';
|
818
|
|
- imagePreview[imagemapImgId] = document.querySelector('[data-target="tab'+'1'+'-image-preview-imagemapImg"]');
|
819
|
|
- spinner[imagemapImgId] = document.querySelector('[data-target="tab'+'1'+'-spinner-imagemapImg"]');
|
820
|
|
- fileUploader[imagemapImgId] = document.querySelector('[data-target="tab'+'1'+'-file-uploader-imagemapImg"]');
|
821
|
|
- fileUploader[imagemapImgId].addEventListener("change", handleFileUpload);
|
822
|
|
- // File input 上傳檔案時綁定的處理函式
|
823
|
|
- async function handleFileUpload(e) {
|
824
|
|
- e.preventDefault();
|
825
|
|
-
|
826
|
|
- var $file_uploader = $(this);
|
827
|
|
- var splitItems = $file_uploader.attr('id').split('-');
|
828
|
|
- // tab1-file-uploader-imagemapImg
|
829
|
|
- var msgType = splitItems[splitItems.length-1]; // lastItem
|
830
|
|
- console.log(msgType);
|
831
|
|
-
|
832
|
|
- var msgNum = '1';
|
833
|
|
- var itemId = msgType + msgNum;
|
834
|
|
- console.log(itemId);
|
835
|
|
-
|
836
|
|
- try {
|
837
|
|
- const file = e.target.files[0];
|
838
|
|
- if (!file) {
|
839
|
|
- return;
|
840
|
|
- }
|
841
|
|
-
|
842
|
|
- setUploading(true, itemId);
|
843
|
|
-
|
844
|
|
- // 檢查
|
845
|
|
- const beforeUploadCheck = await checkBeforeUpload(file, msgType, msgNum);
|
846
|
|
- if (!beforeUploadCheck.isValid) throw beforeUploadCheck.errorMessages;
|
847
|
|
-
|
848
|
|
- // 上傳
|
849
|
|
- const arrayBuffer = await getArrayBuffer(file);
|
850
|
|
- var response = await uploadFileAJAX(arrayBuffer);
|
851
|
|
- alert("上傳成功");
|
852
|
|
- setUploading(false, itemId);
|
853
|
|
- showPreviewImage(response.url, itemId);
|
854
|
|
-
|
855
|
|
- // 更新 ImagemapBox
|
856
|
|
- var $imgPreview = $(imagePreview[itemId]);
|
857
|
|
- if ($imgPreview.attr('data-target').indexOf('imagemap') !== -1) {
|
858
|
|
- $imgPreview.closest('#imgmapcontent-tab1').find('.imagemapBox').css('background-image', 'url(' + response.url + ')');
|
859
|
|
- }
|
860
|
|
- } catch (error) {
|
861
|
|
- setUploading(false, itemId);
|
862
|
|
- alert(error);
|
863
|
|
- console.log("上傳失敗: ", error);
|
864
|
|
- } finally {
|
865
|
|
- e.target.value = '';
|
866
|
|
- }
|
867
|
|
- }
|
868
|
|
- // If you prefer Base64 image, use "FileReader.readAsDataURL"
|
869
|
|
- function showPreviewImage(url, itemId) {
|
870
|
|
- imagePreview[itemId].src = url;
|
871
|
|
- }
|
872
|
|
- // Change file object into ArrayBuffer
|
873
|
|
- function getArrayBuffer(fileObj) {
|
874
|
|
- return new Promise((resolve, reject) => {
|
875
|
|
- const reader = new FileReader();
|
876
|
|
- // Get ArrayBuffer when FileReader on load
|
877
|
|
- reader.addEventListener("load", () => {
|
878
|
|
- resolve(reader.result);
|
879
|
|
- });
|
880
|
|
-
|
881
|
|
- // Get Error when FileReader on error
|
882
|
|
- reader.addEventListener("error", () => {
|
883
|
|
- reject("error occurred in getArrayBuffer");
|
884
|
|
- });
|
885
|
|
-
|
886
|
|
- // read the blob object as ArrayBuffer
|
887
|
|
- // if you nedd Base64, use reader.readAsDataURL
|
888
|
|
- reader.readAsArrayBuffer(fileObj);
|
889
|
|
- });
|
890
|
|
- }
|
891
|
|
- // Use "new Uint8Array()"" to change ArrayBuffer into TypedArray (TypedArray is not a truly Array)
|
892
|
|
- // Use "Array.from()" to change it into Array
|
893
|
|
- function uploadFileAJAX(arrayBuffer) {
|
894
|
|
- return fetch("{{ env('APP_URL') }}/backend/dataManagement/eLecturerTeachersList/saveImg", {
|
895
|
|
- headers: {
|
896
|
|
- version: 1,
|
897
|
|
- "content-type": "application/json"
|
898
|
|
- },
|
899
|
|
- method: "POST",
|
900
|
|
- body: JSON.stringify({
|
901
|
|
- image: Array.from(new Uint8Array(arrayBuffer))
|
902
|
|
- })
|
903
|
|
- })
|
904
|
|
- .then(res => {
|
905
|
|
- if (!res.ok) {
|
906
|
|
- throw res.statusText;
|
907
|
|
- }
|
908
|
|
- return res.json();
|
909
|
|
- })
|
910
|
|
- .then(data => data)
|
911
|
|
- .catch(err => console.log("err", err));
|
912
|
|
- }
|
913
|
|
- function checkBeforeUpload(fileObject, msgType, msgNum) {
|
914
|
|
- return new Promise(resolve => {
|
915
|
|
- let errorMessages = [];
|
916
|
|
-
|
917
|
|
- // isValidFileType
|
918
|
|
- const validFileTypes = ["image/jpeg", "image/png" ];
|
919
|
|
- const isValidFileType = validFileTypes.includes(fileObject.type);
|
920
|
|
- if (!isValidFileType) {
|
921
|
|
- errorMessages.push("只支援 JPG / PNG 格式圖片");
|
922
|
|
- resolve({
|
923
|
|
- isValid: isValidFileType,
|
924
|
|
- errorMessages: errorMessages.join("\n")
|
925
|
|
- });
|
926
|
|
- return;
|
927
|
|
- }
|
928
|
|
-
|
929
|
|
- // isValidFileSize
|
930
|
|
- const isValidFileSize = (fileObject.size / 1024 / 1024) < 1; // 1 MB
|
931
|
|
- if (!isValidFileSize) {
|
932
|
|
- errorMessages.push("圖片最大 1MB");
|
933
|
|
- }
|
934
|
|
-
|
935
|
|
- // isValidDimension
|
936
|
|
- var isValidDimension = true;
|
937
|
|
- const dim = Promise.resolve(getImageSize(fileObject));
|
938
|
|
- dim.then(function(result) {
|
939
|
|
- switch (msgType)
|
940
|
|
- {
|
941
|
|
- case "imagemapImg":
|
942
|
|
- if (result.width != 800 || result.height != 800) {
|
943
|
|
- errorMessages.push("圖片尺寸必須為 800x800");
|
944
|
|
- isValidDimension = false;
|
945
|
|
- }
|
946
|
|
- break;
|
947
|
|
- }
|
948
|
|
-
|
949
|
|
- resolve({
|
950
|
|
- isValid: isValidFileType && isValidFileSize && isValidDimension,
|
951
|
|
- errorMessages: errorMessages.join("\n")
|
952
|
|
- });
|
953
|
|
- });
|
954
|
|
- });
|
955
|
|
- }
|
956
|
|
- function setUploading(isUploading, itemId) {
|
957
|
|
- if (isUploading === true) {
|
958
|
|
- spinner[itemId].classList.add("opacity-1");
|
959
|
|
- } else {
|
960
|
|
- spinner[itemId].classList.remove("opacity-1");
|
961
|
|
- }
|
962
|
|
- }
|
963
|
|
- function getImageSize(file) {
|
964
|
|
- return new Promise((resolve, reject) => {
|
965
|
|
- var _URL = window.URL || window.webkitURL;
|
966
|
|
- var img = new Image();
|
967
|
|
- img.onload = () => resolve({ height: img.height, width: img.width });
|
968
|
|
- img.onerror = reject;
|
969
|
|
- img.src = _URL.createObjectURL(file);
|
970
|
|
- });
|
971
|
|
- }
|
972
|
333
|
</script>
|
973
|
334
|
@endsection
|