|
1 | | -// import { CatBlocks } from '../catblocks/CatBlocks' // CatBlocks needs export! |
| 1 | +/* global CatBlocks */ |
2 | 2 |
|
3 | 3 | require('../styles/components/code_view.scss') |
4 | 4 |
|
5 | 5 | document.addEventListener('DOMContentLoaded', () => { |
6 | | - // const codeViewElement = document.querySelector('.js-code-view'); |
7 | | - // const appEnv = codeViewElement.getAttribute('data-app-env'); |
8 | | - // const locale = codeViewElement.getAttribute('data-locale'); |
9 | | - // const extractedProjectPath = codeViewElement.getAttribute('data-extracted-project-path'); |
10 | | - // const projectHash = codeViewElement.getAttribute('data-project-hash'); |
11 | | - // |
12 | | - // if (appEnv === 'test') { |
13 | | - // disableCodeViewInTestEnv(); |
14 | | - // } else { |
15 | | - // initializeCodeView(); |
16 | | - // } |
17 | | - // |
18 | | - // function initializeCodeView() { |
19 | | - // /* |
20 | | - // * initiate CatBlocks |
21 | | - // * |
22 | | - // * define element: |
23 | | - // * - container to inject CatBlocks hidden workflow |
24 | | - // * - renderSize to use for blocks |
25 | | - // * - shareRoot |
26 | | - // * - language to use for rendering texts |
27 | | - // * - i18n to define the path to the translations |
28 | | - // * - media for CatBlocks |
29 | | - // * - noImageFound is unused, just a placeholder for now |
30 | | - // */ |
31 | | - // CatBlocks.init({ |
32 | | - // container: 'catblocks-code-container', |
33 | | - // renderSize: 0.75, |
34 | | - // language: locale, |
35 | | - // shareRoot: 'catblocks', |
36 | | - // media: 'media', |
37 | | - // i18n: 'i18n', |
38 | | - // noImageFound: 'No_Image_Available.jpg' |
39 | | - // }); |
40 | | - // |
41 | | - // /** |
42 | | - // * start rendering program into div |
43 | | - // */ |
44 | | - // window.onload = function () { |
45 | | - // CatBlocks.render(extractedProjectPath, projectHash) |
46 | | - // .catch(err => { |
47 | | - // console.error('Failed to parse catroid file.'); |
48 | | - // console.error(err); |
49 | | - // console.warn('Using old code view instead of new one'); |
50 | | - // // Show old view instead |
51 | | - // document.getElementById('catblocks-code-container').innerHTML = ''; |
52 | | - // document.getElementById('codeview-wrapper').classList.remove('d-none'); |
53 | | - // document.getElementById('code-view-spinner').classList.add('d-none'); |
54 | | - // }) |
55 | | - // .finally(() => { |
56 | | - // document.getElementById('code-view-spinner').classList.add('d-none'); |
57 | | - // document.getElementById('code-view-toggler').classList.remove('d-none'); |
58 | | - // // CatBlocks need a visible container to calculate the svg sizes. |
59 | | - // // Still it should be collapsed on a page load. |
60 | | - // const collapseCodeView = document.getElementById('collapseCodeView'); |
61 | | - // collapseCodeView.classList.add('collapse', 'hide'); |
62 | | - // }); |
63 | | - // }; |
64 | | - // } |
65 | | - // |
66 | | - // function disableCodeViewInTestEnv() { |
67 | | - // console.log('Catblocks must be disabled in the test env. Why?\n' + |
68 | | - // 'Catblocks uses blockly which results in a crash our test system (Behat tests + chrome headless)\n' + |
69 | | - // 'Where? @ init -> blockly.inject(...)\n' + |
70 | | - // '\n' + |
71 | | - // 'What do we know so far?\n' + |
72 | | - // 'Pretty sure the fault is not by Catblocks. Even the simple blockly demo crashs -> \n' + |
73 | | - // ' Given I am on "https://blockly-demo.appspot.com/static/demos/fixed/index.html"\n' + |
74 | | - // ' And I should see "Fixed Blockly"\n' + |
75 | | - // ' Then the element "#blocklyDiv" should be visible\n' + |
76 | | - // '\n' + |
77 | | - // 'Chrome crash does not give much useful information, only that much memory was allocated\n' + |
78 | | - // 'The bug could be either in the chrome headless or the mink implementation\n' + |
79 | | - // 'Large sites per se seem not to be the problem. E.g. tested with https://scratch.mit.edu/projects/390060499/\n' + |
80 | | - // '\n' |
81 | | - // ); |
82 | | - // document.getElementById('catblocks-code-container').textContent = |
83 | | - // 'Disabled in test env due to problems in the chrome headless/mink/blockly interactions'; |
84 | | - // } |
| 6 | + const codeView = document.querySelector('.js-code-view') |
| 7 | + const locale = codeView.dataset.locale |
| 8 | + const extractedProjectPath = codeView.dataset.extractedProjectPath |
| 9 | + const projectHash = codeView.dataset.projectHash |
85 | 10 |
|
| 11 | + initializeCodeView() |
| 12 | + |
| 13 | + function initializeCodeView() { |
| 14 | + /* |
| 15 | + * initiate CatBlocks |
| 16 | + * |
| 17 | + * define element: |
| 18 | + * - container to inject CatBlocks hidden workflow |
| 19 | + * - renderSize to use for blocks |
| 20 | + * - shareRoot |
| 21 | + * - language to use for rendering texts |
| 22 | + * - i18n to define the path to the translations |
| 23 | + * - media for CatBlocks |
| 24 | + * - noImageFound is unused, just a placeholder for now |
| 25 | + */ |
| 26 | + CatBlocks.init({ |
| 27 | + container: 'catblocks-code-container', |
| 28 | + renderSize: 0.75, |
| 29 | + language: locale, |
| 30 | + shareRoot: 'catblocks', |
| 31 | + media: 'media', |
| 32 | + i18n: 'i18n', |
| 33 | + noImageFound: 'No_Image_Available.jpg', |
| 34 | + }) |
| 35 | + |
| 36 | + /** |
| 37 | + * start rendering project into div |
| 38 | + */ |
| 39 | + window.onload = function () { |
| 40 | + CatBlocks.render(extractedProjectPath, projectHash) |
| 41 | + .catch((err) => { |
| 42 | + console.error('Failed to parse catroid file.') |
| 43 | + console.error(err) |
| 44 | + console.error('Using old code view instead of new one') |
| 45 | + // Show old view instead |
| 46 | + document.getElementById('catblocks-code-container').innerHTML = '' |
| 47 | + document.getElementById('codeview-wrapper').classList.remove('d-none') |
| 48 | + document.getElementById('code-view-spinner')?.classList.add('d-none') |
| 49 | + }) |
| 50 | + .finally(() => { |
| 51 | + document.getElementById('code-view-spinner').classList.add('d-none') |
| 52 | + document |
| 53 | + .getElementById('code-view-toggler') |
| 54 | + .classList.remove('d-none') |
| 55 | + // CatBlocks need a visible container to calculate the svg sizes. |
| 56 | + // Still it should be collapsed on a page load. |
| 57 | + const collapseCodeView = document.getElementById('collapseCodeView') |
| 58 | + collapseCodeView?.classList.add('collapse') |
| 59 | + collapseCodeView?.classList.add('hide') |
| 60 | + }) |
| 61 | + } |
| 62 | + } |
| 63 | +}) |
| 64 | + |
| 65 | +document.addEventListener('DOMContentLoaded', () => { |
86 | 66 | // Old Code View!! |
87 | 67 | document.querySelectorAll('.collapse-btn').forEach((btn) => { |
88 | 68 | btn.addEventListener('click', function () { |
|
0 commit comments