pictcode / app / webroot / js / pictcode / block_selector.js @ 001918d1
履歴 | 表示 | アノテート | ダウンロード (2.671 KB)
1 | 9af585b9 | admin | define(['block_data', 'modal_manager', 'image_manager'], function(blockData, modalManager, imageManager){ |
---|---|---|---|
2 | |||
3 | var afterSelectAction;
|
||
4 | var categoryContainer = document.createElement('div'); |
||
5 | |||
6 | function initialize(aSAction){ |
||
7 | afterSelectAction = aSAction; |
||
8 | //Category
|
||
9 | |||
10 | var iconWidth = "128"; |
||
11 | var iconHeight = "56"; |
||
12 | var categories = blockData.categories;
|
||
13 | _.each( categories, function(category){
|
||
14 | var image = imageManager.images[category.iconImageKey];
|
||
15 | image.width = iconWidth; |
||
16 | image.height = iconHeight; |
||
17 | var button = document.createElement('button'); |
||
18 | button.id = category.name; |
||
19 | button.className = 'block_category_button';
|
||
20 | button.style.margin = "5px";
|
||
21 | button.appendChild(image); |
||
22 | categoryContainer.appendChild(button); |
||
23 | // categoryContainer.innerHTML += " ";
|
||
24 | }); |
||
25 | } |
||
26 | |||
27 | $(document).on("click","#add_block", function(event) { |
||
28 | //Modalの設定
|
||
29 | var modalWidth = document.documentElement.clientHeight * 0.75; |
||
30 | $("#modal_coding_block").css({width:modalWidth*1.2, height:modalWidth, top:-modalWidth}); |
||
31 | $("#modal_coding_block_container")[0].appendChild(categoryContainer); |
||
32 | modalManager.showDownModal($("#modal_coding_block"), didClose); |
||
33 | }); |
||
34 | |||
35 | $(document).on("click",".block_category_button", function(event) { |
||
36 | var id = event.currentTarget.id;
|
||
37 | var bodyContainter = document.createElement('div'); |
||
38 | var sizeRatio = 54; |
||
39 | var categorizedBlocks = blockData.getCategorizedBlocks(id);
|
||
40 | _.each( categorizedBlocks, function(block){
|
||
41 | var image = imageManager.images[block.imageKey];
|
||
42 | image.width = block.size.width * sizeRatio; |
||
43 | image.height = block.size.height * sizeRatio; |
||
44 | var button = document.createElement('button'); |
||
45 | button.id = block.name; |
||
46 | button.className = 'block_button';
|
||
47 | button.appendChild(image); |
||
48 | bodyContainter.appendChild(button); |
||
49 | }); |
||
50 | |||
51 | $("#modal_coding_block_container").html(""); |
||
52 | $("#modal_coding_block_container")[0].appendChild(bodyContainter); |
||
53 | modalManager.addBackButton($("#modal_coding_block"), backToTop); |
||
54 | }); |
||
55 | |||
56 | $(document).on("click",".block_button", function(event) { |
||
57 | var id = event.currentTarget.id;
|
||
58 | afterSelectAction(id); |
||
59 | modalManager.closeUpModal($("#modal_coding_block")); |
||
60 | $("#modal_coding_block_container").html(""); |
||
61 | }); |
||
62 | |||
63 | //Modalのバックボタンをタップ時
|
||
64 | function backToTop(){ |
||
65 | modalManager.removeBackButton(); |
||
66 | $("#modal_coding_block_container").html(""); |
||
67 | $("#modal_coding_block_container")[0].appendChild(categoryContainer); |
||
68 | } |
||
69 | |||
70 | //モーダルを閉じた後
|
||
71 | function didClose(){ |
||
72 | $("#modal_coding_block_container").html(""); |
||
73 | } |
||
74 | |||
75 | return {
|
||
76 | initialize:initialize,
|
||
77 | }; |
||
78 | }); |