Annotation of modules/damieng/graphical_editor/loncapa_daxe/web/loncapa_daxe.dart, revision 1.50
1.1 damieng 1: /*
2: This file is part of LON-CAPA.
3:
4: LON-CAPA is free software: you can redistribute it and/or modify
5: it under the terms of the GNU General Public License as published by
6: the Free Software Foundation, either version 3 of the License, or
7: (at your option) any later version.
8:
9: LON-CAPA is distributed in the hope that it will be useful,
10: but WITHOUT ANY WARRANTY; without even the implied warranty of
11: MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12: GNU General Public License for more details.
13:
14: You should have received a copy of the GNU General Public License
15: along with LON-CAPA. If not, see <http://www.gnu.org/licenses/>.
16: */
17:
18: library loncapa_daxe;
19:
20: import 'dart:async';
21: import 'dart:collection';
22: import 'dart:html' as h;
1.46 damieng 23: import 'dart:math';
1.1 damieng 24: import 'package:daxe/daxe.dart';
25: import 'package:daxe/src/xmldom/xmldom.dart' as x;
26: import 'package:daxe/src/strings.dart';
1.50 ! damieng 27: import 'package:daxe/src/nodes/nodes.dart' show DNBlock, DNCData, DNText, SimpleTypeControl, ParentUpdatingDNText, DNHiddenP, DNString;
1.1 damieng 28: import 'dart:js' as js;
29:
30: import 'lcd_strings.dart';
1.41 damieng 31: part 'about_lc_daxe_dlg.dart';
32: part 'lcd_insert_panel.dart';
1.1 damieng 33: part 'nodes/lcd_block.dart';
1.32 damieng 34: part 'nodes/lcd_block_no_newline.dart';
1.1 damieng 35: part 'nodes/lcd_parameter.dart';
36: part 'nodes/tex_mathjax.dart';
37: part 'nodes/lm.dart';
1.14 damieng 38: part 'nodes/chem.dart';
1.2 damieng 39: part 'nodes/numerical_response.dart';
1.3 damieng 40: part 'nodes/formula_response.dart';
41: part 'nodes/string_response.dart';
1.11 damieng 42: part 'nodes/essay_response.dart';
43: part 'nodes/textfield.dart';
1.1 damieng 44: part 'nodes/radio_response.dart';
45: part 'nodes/radio_foilgroup.dart';
46: part 'nodes/radio_foil.dart';
47: part 'nodes/option_response.dart';
48: part 'nodes/option_foilgroup.dart';
49: part 'nodes/option_foil.dart';
1.6 damieng 50: part 'nodes/match_response.dart';
51: part 'nodes/match_foilgroup.dart';
52: part 'nodes/match_foil.dart';
53: part 'nodes/itemgroup.dart';
54: part 'nodes/match_item.dart';
1.1 damieng 55: part 'nodes/rank_response.dart';
56: part 'nodes/rank_foilgroup.dart';
57: part 'nodes/rank_foil.dart';
1.10 damieng 58: part 'nodes/math_response.dart';
59: part 'nodes/math_answer.dart';
1.13 damieng 60: part 'nodes/organic_response.dart';
61: part 'nodes/jsme_dialog.dart';
62: part 'nodes/reaction_response.dart';
1.5 damieng 63: part 'nodes/textline.dart';
1.1 damieng 64: part 'nodes/hintgroup.dart';
65: part 'nodes/simple_ui_text.dart';
66: part 'nodes/script_block.dart';
1.2 damieng 67: part 'nodes/simple_ui_exception.dart';
1.7 damieng 68: part 'nodes/gnuplot.dart';
1.22 damieng 69: part 'nodes/organic_structure.dart';
1.7 damieng 70: part 'nodes/fake_attribute_element.dart';
71: part 'nodes/plot_axis.dart';
72: part 'nodes/plot_curve.dart';
1.17 damieng 73: part 'nodes/section.dart';
74: part 'nodes/h1.dart';
1.1 damieng 75:
1.18 damieng 76: List<String> knownSectionRoles = ['activity', 'advice', 'bibliography', 'citation',
77: 'conclusion', 'definition', 'demonstration', 'example',
78: 'explanation', 'introduction', 'method', 'more_information',
79: 'objectives', 'prerequisites', 'remark', 'reminder',
80: 'summary', 'syntax', 'warning'];
81:
1.1 damieng 82:
83: void main() {
84: NodeFactory.addCoreDisplayTypes();
85:
1.35 damieng 86: // LON-CAPA specific display types:
87:
1.45 damieng 88: setDisplayType('lcdblock',
1.1 damieng 89: (x.Element ref) => new LCDBlock.fromRef(ref),
90: (x.Node node, DaxeNode parent) => new LCDBlock.fromNode(node, parent)
91: );
92:
1.45 damieng 93: setDisplayType('texmathjax',
1.1 damieng 94: (x.Element ref) => new TeXMathJax.fromRef(ref),
95: (x.Node node, DaxeNode parent) => new TeXMathJax.fromNode(node, parent)
96: );
97:
1.45 damieng 98: setDisplayType('lm',
1.1 damieng 99: (x.Element ref) => new Lm.fromRef(ref),
100: (x.Node node, DaxeNode parent) => new Lm.fromNode(node, parent)
101: );
102:
1.45 damieng 103: setDisplayType('chem',
1.14 damieng 104: (x.Element ref) => new Chem.fromRef(ref),
105: (x.Node node, DaxeNode parent) => new Chem.fromNode(node, parent)
106: );
107:
1.45 damieng 108: setDisplayType('script',
1.27 damieng 109: (x.Element ref) => new ScriptBlock.fromRef(ref),
110: (x.Node node, DaxeNode parent) => new ScriptBlock.fromNode(node, parent)
1.1 damieng 111: );
112:
1.45 damieng 113: setDisplayType('parameter',
1.1 damieng 114: (x.Element ref) => new LCDParameter.fromRef(ref),
115: (x.Node node, DaxeNode parent) => new LCDParameter.fromNode(node, parent)
116: );
117:
1.45 damieng 118: setDisplayType('numericalresponse',
1.2 damieng 119: (x.Element ref) => new NumericalResponse.fromRef(ref),
120: (x.Node node, DaxeNode parent) => new NumericalResponse.fromNode(node, parent)
121: );
122:
1.45 damieng 123: setDisplayType('formularesponse',
1.3 damieng 124: (x.Element ref) => new FormulaResponse.fromRef(ref),
125: (x.Node node, DaxeNode parent) => new FormulaResponse.fromNode(node, parent)
126: );
127:
1.45 damieng 128: setDisplayType('stringresponse',
1.3 damieng 129: (x.Element ref) => new StringResponse.fromRef(ref),
130: (x.Node node, DaxeNode parent) => new StringResponse.fromNode(node, parent)
131: );
132:
1.45 damieng 133: setDisplayType('essayresponse',
1.11 damieng 134: (x.Element ref) => new EssayResponse.fromRef(ref),
135: (x.Node node, DaxeNode parent) => new EssayResponse.fromNode(node, parent)
136: );
137:
1.45 damieng 138: setDisplayType('radioresponse',
1.1 damieng 139: (x.Element ref) => new RadioResponse.fromRef(ref),
140: (x.Node node, DaxeNode parent) => new RadioResponse.fromNode(node, parent)
141: );
142:
1.45 damieng 143: setDisplayType('optionresponse',
1.1 damieng 144: (x.Element ref) => new OptionResponse.fromRef(ref),
145: (x.Node node, DaxeNode parent) => new OptionResponse.fromNode(node, parent)
146: );
147:
1.45 damieng 148: setDisplayType('matchresponse',
1.6 damieng 149: (x.Element ref) => new MatchResponse.fromRef(ref),
150: (x.Node node, DaxeNode parent) => new MatchResponse.fromNode(node, parent)
151: );
152:
1.45 damieng 153: setDisplayType('rankresponse',
1.1 damieng 154: (x.Element ref) => new RankResponse.fromRef(ref),
155: (x.Node node, DaxeNode parent) => new RankResponse.fromNode(node, parent)
156: );
157:
1.45 damieng 158: setDisplayType('mathresponse',
1.10 damieng 159: (x.Element ref) => new MathResponse.fromRef(ref),
160: (x.Node node, DaxeNode parent) => new MathResponse.fromNode(node, parent)
161: );
162:
1.45 damieng 163: setDisplayType('organicresponse',
1.13 damieng 164: (x.Element ref) => new OrganicResponse.fromRef(ref),
165: (x.Node node, DaxeNode parent) => new OrganicResponse.fromNode(node, parent)
166: );
167:
1.45 damieng 168: setDisplayType('reactionresponse',
1.13 damieng 169: (x.Element ref) => new ReactionResponse.fromRef(ref),
170: (x.Node node, DaxeNode parent) => new ReactionResponse.fromNode(node, parent)
171: );
172:
1.45 damieng 173: setDisplayType('foilgroup',
1.1 damieng 174: (x.Element ref) {
175: if (ref.getAttribute('type') == 'radiobuttonresponse--foilgroup')
176: return new RadioFoilgroup.fromRef(ref);
177: else if (ref.getAttribute('type') == 'optionresponse--foilgroup')
178: return new OptionFoilgroup.fromRef(ref);
1.6 damieng 179: else if (ref.getAttribute('type') == 'matchresponse--foilgroup')
180: return new MatchFoilgroup.fromRef(ref);
1.1 damieng 181: else if (ref.getAttribute('type') == 'rankresponse--foilgroup')
182: return new RankFoilgroup.fromRef(ref);
183: return new LCDBlock.fromRef(ref);
184: },
185: (x.Node node, DaxeNode parent) {
186: if (parent is RadioResponse)
187: return new RadioFoilgroup.fromNode(node, parent);
188: else if (parent is OptionResponse)
189: return new OptionFoilgroup.fromNode(node, parent);
1.6 damieng 190: else if (parent is MatchResponse)
191: return new MatchFoilgroup.fromNode(node, parent);
1.1 damieng 192: else if (parent is RankResponse)
193: return new RankFoilgroup.fromNode(node, parent);
194: return new LCDBlock.fromNode(node, parent);
195: }
196: );
197:
1.45 damieng 198: setDisplayType('foil',
1.1 damieng 199: (x.Element ref) {
200: if (ref.getAttribute('type') == 'radiobuttonresponse--foil')
201: return new RadioFoil.fromRef(ref);
202: else if (ref.getAttribute('type') == 'optionresponse--foil')
203: return new OptionFoil.fromRef(ref);
1.6 damieng 204: else if (ref.getAttribute('type') == 'matchresponse--foil')
205: return new MatchFoil.fromRef(ref);
1.1 damieng 206: else if (ref.getAttribute('type') == 'rankresponse--foil')
207: return new RankFoil.fromRef(ref);
208: return new LCDBlock.fromRef(ref);
209: },
210: (x.Node node, DaxeNode parent) {
211: if (parent is RadioFoilgroup)
212: return new RadioFoil.fromNode(node, parent);
1.19 damieng 213: else if (parent is OptionFoilgroup ||
214: (parent.parent != null && parent.parent is OptionFoilgroup))
1.1 damieng 215: return new OptionFoil.fromNode(node, parent);
1.19 damieng 216: else if (parent is MatchFoilgroup ||
217: (parent.parent != null && parent.parent is MatchFoilgroup))
1.6 damieng 218: return new MatchFoil.fromNode(node, parent);
1.1 damieng 219: else if (parent is RankFoilgroup)
220: return new RankFoil.fromNode(node, parent);
221: return new LCDBlock.fromNode(node, parent);
222: }
223: );
224:
1.45 damieng 225: setDisplayType('itemgroup',
1.6 damieng 226: (x.Element ref) => new Itemgroup.fromRef(ref),
227: (x.Node node, DaxeNode parent) => new Itemgroup.fromNode(node, parent)
228: );
229:
1.45 damieng 230: setDisplayType('matchitem',
1.6 damieng 231: (x.Element ref) => new MatchItem.fromRef(ref),
232: (x.Node node, DaxeNode parent) => new MatchItem.fromNode(node, parent)
233: );
234:
1.45 damieng 235: setDisplayType('textline',
1.5 damieng 236: (x.Element ref) => new Textline.fromRef(ref),
237: (x.Node node, DaxeNode parent) => new Textline.fromNode(node, parent)
238: );
239:
1.45 damieng 240: setDisplayType('textfield',
1.11 damieng 241: (x.Element ref) => new Textfield.fromRef(ref),
242: (x.Node node, DaxeNode parent) => new Textfield.fromNode(node, parent)
243: );
244:
1.45 damieng 245: setDisplayType('hintgroup',
1.1 damieng 246: (x.Element ref) => new Hintgroup.fromRef(ref),
247: (x.Node node, DaxeNode parent) => new Hintgroup.fromNode(node, parent)
248: );
249:
1.45 damieng 250: setDisplayType('answer',
1.10 damieng 251: (x.Element ref) {
252: if (ref.getAttribute('type') == 'mathresponse--answer')
253: return new MathAnswer.fromRef(ref);
1.27 damieng 254: else if (ref.getAttribute('type') == 'caparesponse--answer')
255: return new LCDBlock.fromRef(ref);
256: else
257: return new ScriptBlock.fromRef(ref);
1.10 damieng 258: },
259: (x.Node node, DaxeNode parent) {
260: if (parent is MathResponse)
261: return new MathAnswer.fromNode(node, parent);
1.27 damieng 262: else if (parent != null && parent.ref != null &&
263: parent.ref.getAttribute('type') == 'caparesponse--answergroup')
264: return new LCDBlock.fromNode(node, parent);
265: else
266: return new ScriptBlock.fromNode(node, parent);
1.10 damieng 267: }
268: );
269:
1.45 damieng 270: setDisplayType('gnuplot',
1.7 damieng 271: (x.Element ref) => new Gnuplot.fromRef(ref),
272: (x.Node node, DaxeNode parent) => new Gnuplot.fromNode(node, parent)
273: );
274:
1.45 damieng 275: setDisplayType('organicstructure',
1.22 damieng 276: (x.Element ref) => new OrganicStructure.fromRef(ref),
277: (x.Node node, DaxeNode parent) => new OrganicStructure.fromNode(node, parent)
278: );
279:
1.45 damieng 280: setDisplayType('fakeattribute',
1.7 damieng 281: (x.Element ref) {
282: if (doc.cfg.elementName(ref) != 'title' || ref.getAttribute('type') == 'lonplot--title')
283: return new FakeAttributeElement.fromRef(ref);
284: return new LCDBlock.fromRef(ref);
285: },
286: (x.Node node, DaxeNode parent) {
287: if (parent is Gnuplot || parent is PlotCurve)
288: return new FakeAttributeElement.fromNode(node, parent);
289: return new LCDBlock.fromNode(node, parent);
290: }
291: );
292:
1.45 damieng 293: setDisplayType('plotaxis',
1.7 damieng 294: (x.Element ref) => new PlotAxis.fromRef(ref),
295: (x.Node node, DaxeNode parent) => new PlotAxis.fromNode(node, parent)
296: );
297:
1.45 damieng 298: setDisplayType('plotcurve',
1.7 damieng 299: (x.Element ref) => new PlotCurve.fromRef(ref),
300: (x.Node node, DaxeNode parent) => new PlotCurve.fromNode(node, parent)
301: );
302:
1.45 damieng 303: setDisplayType('section',
1.17 damieng 304: (x.Element ref) => new Section.fromRef(ref),
305: (x.Node node, DaxeNode parent) => new Section.fromNode(node, parent)
306: );
307:
1.45 damieng 308: setDisplayType('h1',
1.17 damieng 309: (x.Element ref) => new H1.fromRef(ref),
310: (x.Node node, DaxeNode parent) => new H1.fromNode(node, parent)
311: );
312:
1.45 damieng 313: setDisplayType('lcdblocknonewline',
1.32 damieng 314: (x.Element ref) => new LCDBlockNoNewline.fromRef(ref),
315: (x.Node node, DaxeNode parent) => new LCDBlockNoNewline.fromNode(node, parent)
316: );
317:
1.45 damieng 318: setDisplayType('label',
1.31 damieng 319: (x.Element ref) {
320: if (ref.getAttribute('type') == 'lonplot--label')
1.37 damieng 321: return new LCDBlockNoNewline.fromRef(ref); // gnuplot label
1.32 damieng 322: else if (ref.getAttribute('type') == 'randomlabel--label')
323: return new LCDBlockNoNewline.fromRef(ref); // randomlabel label
324: return new DNString.fromRef(ref); // HTML form label
1.31 damieng 325: },
326: (x.Node node, DaxeNode parent) {
327: if (parent is Gnuplot || (parent != null && parent.parent is Gnuplot))
1.37 damieng 328: return new LCDBlockNoNewline.fromNode(node, parent);
1.32 damieng 329: else if (parent != null && parent.ref != null &&
330: parent.ref.getAttribute('type') == 'randomlabel--labelgroup')
331: return new LCDBlockNoNewline.fromNode(node, parent);
1.31 damieng 332: return new DNString.fromNode(node, parent);
333: }
334: );
335:
1.35 damieng 336: // Initialize Daxe, using daxe.initDaxe as a basis.
337: // The insertion panel is customized.
1.28 damieng 338: InsertPanel insertP = new LCDInsertPanel();
339: LeftPanel left = new LeftPanel(insert:insertP);
1.35 damieng 340: // The save action is customized.
1.29 damieng 341: ActionFunction saveFunction= () {
342: doc.save().then((_) {
343: // h.window.alert(Strings.get('save.success'));
344: // update the preview iframe
1.35 damieng 345: h.IFrameElement previewIFrame = h.document.getElementById('preview_iframe');
1.47 damieng 346: if (previewIFrame != null) {
347: h.FormElement form = h.document.getElementById('preview_form');
348: form.submit();
349: }
1.29 damieng 350: }, onError: (DaxeException ex) {
351: h.window.alert(Strings.get('save.error') + ': ' + ex.message);
352: });
353: };
1.43 damieng 354: // function to customize the toobar after its default creation
355: ActionFunction customizeToolbar = () {
356: ToolbarMenu sectionMenu = _makeSectionMenu();
357: if (sectionMenu != null)
358: page.toolbar.add(sectionMenu);
359: ToolbarBox mathBox;
360: if (doc.saveURL != null)
361: mathBox = page.toolbar.items[5];
362: else
363: mathBox = page.toolbar.items[4];
364: x.Element texRef = doc.cfg.elementReference('m');
365: if (texRef != null) {
366: ToolbarButton texButton = new ToolbarButton(
367: LCDStrings.get('insert_m'), 'images/tex.png',
368: () => doc.insertNewNode(texRef, 'element'), Toolbar.insertButtonUpdate,
369: data:new ToolbarStyleInfo([texRef], null, null));
370: mathBox.add(texButton);
371: }
372: x.Element lmRef = doc.cfg.elementReference('lm');
373: if (lmRef != null) {
374: ToolbarButton lmButton = new ToolbarButton(
375: LCDStrings.get('insert_lm'), 'packages/daxe/images/toolbar/equation.png',
376: () => doc.insertNewNode(lmRef, 'element'), Toolbar.insertButtonUpdate,
377: data:new ToolbarStyleInfo([lmRef], null, null));
378: mathBox.add(lmButton);
379: }
380: };
1.35 damieng 381: // Initialization
1.1 damieng 382: Future.wait([Strings.load(), LCDStrings.load(), _readTemplates('templates.xml')]).then((List responses) {
1.43 damieng 383: initDaxe(left:left, saveFunction:saveFunction,
384: customizeToolbar:customizeToolbar).then((v) {
1.35 damieng 385: // More customizations
386: _addGuttersAndPreview();
1.1 damieng 387: page.adjustPositionsUnderToolbar();
388: page.updateAfterPathChange();
389: // add things to the menubar
390: if (responses[2] is x.Document) {
391: // at this point the menubar html is already in the document, so we have to fix the HTML
392: h.Element menubarDiv = h.document.getElementsByClassName('menubar')[0];
393: Menu m = _makeTemplatesMenu(responses[2]);
1.34 damieng 394: if (m != null) {
1.26 damieng 395: page.mbar.add(m);
1.34 damieng 396: menubarDiv.append(page.mbar.createMenuDiv(m));
397: }
1.33 damieng 398: Menu helpMenu = _makeHelpMenu();
399: page.mbar.add(helpMenu);
400: menubarDiv.append(page.mbar.createMenuDiv(helpMenu));
1.1 damieng 401: page.updateAfterPathChange();
402: } else
403: print("Error reading templates file, could not build the menu.");
1.15 damieng 404: }).catchError((e) {
1.34 damieng 405: String msg = 'Initialization error: ' + (e is String ? e : e.toString());
406: print(msg);
407: h.document.body.appendText(msg);
1.1 damieng 408: });
1.15 damieng 409: }).catchError((e) {
1.34 damieng 410: String msg = 'Initialization error: ' + (e is String ? e : e.toString());
411: print(msg);
412: h.document.body.appendText(msg);
1.1 damieng 413: });
414: }
415:
1.35 damieng 416:
417: /**
418: * Adds a movable left gutter between the left panel and the document,
419: * a preview to the right and another gutter beween the document and the preview.
1.39 damieng 420: * Also hides the left panel initially.
1.35 damieng 421: */
422: void _addGuttersAndPreview() {
423: // NOTE: The preview is in an iframe within Daxe
424: // (so that it works like another LON-CAPA problem preview),
425: // and Daxe itself is in an iframe (so as to get the parameters from the URL).
426: // This makes handling mouse event a little more complicated: the preview iframe
427: // will consume events by default, and events outside the Daxe iframe are not
428: // always sent to the iframe when happening outside.
429: bool moving_left_gutter = false;
430: bool moving_right_gutter = false;
1.39 damieng 431: // hide left panel
432: h.Element left = h.document.getElementById('left_panel');
433: left.style.width ='0px';
434: left.style.visibility = 'hidden';
435: // add left gutter
1.35 damieng 436: h.DivElement leftGutter = new h.DivElement();
437: leftGutter.id = 'left_gutter';
438: leftGutter.classes.add('vertical-gutter');
1.39 damieng 439: leftGutter.style.left ='0px';
1.35 damieng 440: h.Element doc1 = h.document.getElementById('doc1');
441: h.document.body.insertBefore(leftGutter, doc1);
1.39 damieng 442: doc1.style.left = '10px';
1.35 damieng 443:
444: // preview and right gutter
445: h.DivElement previewDiv;
446: h.IFrameElement previewIFrame;
1.40 damieng 447: if (doc.filePath != null && doc.filePath.startsWith('/daxeopen')) {
1.35 damieng 448: previewDiv = new h.DivElement();
449: previewDiv.id = 'preview_div';
1.46 damieng 450:
451: h.FormElement form = new h.FormElement();
1.47 damieng 452: form.id = 'preview_form';
1.46 damieng 453: form.action = doc.filePath.substring(9);
454: form.target = 'preview_iframe';
455: form.method = 'post';
456: h.InputElement inhibitmenuInput = new h.InputElement();
457: inhibitmenuInput.name = 'inhibitmenu';
458: inhibitmenuInput.value = 'yes';
459: inhibitmenuInput.hidden = true;
460: form.append(inhibitmenuInput);
461: Random rng = new Random();
462: int rndseed = rng.nextInt(2100000000); // max as in Perl code
463: var rndseedInput = new h.InputElement();
464: rndseedInput.name = 'rndseed';
465: rndseedInput.value = rndseed.toString();
466: rndseedInput.hidden = true;
467: form.append(rndseedInput);
468: var resetButton = new h.ButtonElement();
469: resetButton.name = 'resetdata';
470: resetButton.type = 'submit';
471: resetButton.value = 'reset_submissions';
472: resetButton.appendText(LCDStrings.get('reset_submissions'));
473: form.append(resetButton);
474: form.appendText(' ');
475: var randomizationButton = new h.ButtonElement();
476: randomizationButton.appendText(LCDStrings.get('new_randomization'));
477: randomizationButton.onClick.listen((e) {
478: rndseed = rng.nextInt(2100000000);
479: rndseedInput.value = rndseed.toString();
480: form.submit();
481: e.preventDefault();
482: });
483: form.append(randomizationButton);
484: previewDiv.append(form);
485:
486: previewDiv.append(new h.HRElement());
487:
1.35 damieng 488: previewIFrame = new h.IFrameElement();
489: previewIFrame.id = 'preview_iframe';
1.46 damieng 490: previewIFrame.name = 'preview_iframe';
491: previewIFrame.onLoad.listen((e) {
492: // set rndseed in the iframe form
493: // dart does not allow iframe crossing, we have to use dart:js for everything
494: // see https://github.com/dart-lang/sdk/issues/20146
495: // and http://stackoverflow.com/q/28940617/438970
496: var iframe = new js.JsObject.fromBrowserObject(
497: h.document.getElementById('preview_iframe'));
498: var doc = new js.JsObject.fromBrowserObject(iframe['contentDocument']);
499: var forms = doc['forms'];
1.47 damieng 500: var lonhomework = forms['lonhomework'];
501: if (lonhomework == null)
502: return;
503: var iFrameForm = new js.JsObject.fromBrowserObject(lonhomework);
1.46 damieng 504: var input = new js.JsObject.fromBrowserObject(
505: doc.callMethod('createElement',['input']));
506: input['name'] = 'rndseed';
507: input['value'] = rndseed.toString();
508: input['type'] = 'hidden';
509: iFrameForm.callMethod('appendChild', [input]);
510: });
1.35 damieng 511: int previewWidth = (doc1.offsetWidth / 3).round();
512: previewDiv.style.width = "${previewWidth}px";
513: previewDiv.append(previewIFrame);
1.46 damieng 514:
1.35 damieng 515: h.DivElement rightGutter = new h.DivElement();
516: rightGutter.id = 'right_gutter';
517: rightGutter.classes.add('vertical-gutter');
518: rightGutter.style.right = "${previewWidth}px";
1.44 damieng 519: var right_mousedown = (h.Event event) {
1.35 damieng 520: moving_right_gutter = true;
521: event.preventDefault();
522: previewIFrame.style.pointerEvents = 'none';
1.44 damieng 523: };
524: rightGutter.onMouseDown.listen(right_mousedown);
525: rightGutter.onTouchStart.listen(right_mousedown);
1.35 damieng 526: h.document.body.append(rightGutter);
527: doc1.style.right = "${previewWidth + 10}px";
528: h.document.body.append(previewDiv);
1.46 damieng 529: form.submit(); // fills the iframe
1.35 damieng 530: }
531:
532: // mousedown on left gutter
1.44 damieng 533: var left_mousedown = (h.Event event) {
1.35 damieng 534: moving_left_gutter = true;
535: event.preventDefault();
536: if (previewIFrame != null)
537: previewIFrame.style.pointerEvents = 'none';
1.42 damieng 538: };
1.44 damieng 539: leftGutter.onMouseDown.listen(left_mousedown);
540: leftGutter.onTouchStart.listen(left_mousedown);
1.35 damieng 541:
542: // adjust top positions when the toolbar height changes
543: _adjustPositionsUnderToolbar();
544: h.window.onResize.listen((h.Event event) => _adjustPositionsUnderToolbar());
545:
546: // mousemove for both gutters
1.42 damieng 547: var mousemove = (h.Event event) {
1.35 damieng 548: if (!(moving_left_gutter || moving_right_gutter))
549: return;
550: h.Element left = h.document.getElementById('left_panel');
551: h.Element doc1 = h.document.getElementById('doc1');
1.42 damieng 552: num x;
553: if (event is h.MouseEvent)
554: x = event.client.x;
555: else if (event is h.TouchEvent)
556: x = event.changedTouches[0].client.x;
557: else
558: return;
1.35 damieng 559: x = x.round();
1.36 damieng 560: // for IE, temporary change of overflow for doc1,
561: // otherwise IE and Edge never report an empty width when there is a scrollbar
562: // (this slows things down, so it is done only for IE)
563: bool ie = h.window.navigator.appVersion.contains("Trident") || h.window.navigator.appVersion.contains("Edge");
564: if (ie)
565: doc1.style.overflow = 'hidden';
566: num doc1width = doc1.offsetWidth;
567: if (ie)
568: doc1.style.overflow = '';
1.35 damieng 569: if (moving_left_gutter) {
570: h.Element leftGutter = h.document.getElementById('left_gutter');
571: if (x < 5)
572: x = 5;
1.36 damieng 573: int maxX = left.offsetWidth + 5 + doc1width;
1.35 damieng 574: if (x > maxX)
575: x = maxX;
576: if (x == 5)
577: left.style.visibility = 'hidden';
1.36 damieng 578: else
579: left.style.visibility = '';
580: left.style.width = "${x-5}px";
1.35 damieng 581: leftGutter.style.left ="${x-5}px";
1.36 damieng 582: if (x == maxX)
583: doc1.style.visibility = 'hidden';
584: else
585: doc1.style.visibility = '';
1.35 damieng 586: doc1.style.left ="${x+5}px";
587: } else if (moving_right_gutter) {
588: h.Element previewDiv = h.document.getElementById('preview_div');
589: h.Element rightGutter = h.document.getElementById('right_gutter');
590: int minX = left.offsetWidth + 10 + 5;
591: if (x < minX)
592: x = minX;
1.36 damieng 593: int maxX = left.offsetWidth + 10 + doc1width + 5 + previewDiv.offsetWidth;
1.35 damieng 594: if (x > maxX)
595: x = maxX;
596: int previewWidth = maxX - x;
597: if (previewWidth == 0)
598: previewDiv.style.visibility = 'hidden';
1.36 damieng 599: else
600: previewDiv.style.visibility = '';
601: previewDiv.style.width = "${previewWidth}px";
1.35 damieng 602: rightGutter.style.right ="${previewWidth}px";
1.36 damieng 603: if (x == minX)
604: doc1.style.visibility = 'hidden';
605: else
606: doc1.style.visibility = '';
1.35 damieng 607: doc1.style.right ="${previewWidth + 10}px";
1.48 damieng 608: _adjustPreviewIFrameHeight();
1.35 damieng 609: }
610: event.stopPropagation();
611: event.preventDefault();
1.42 damieng 612: };
613: h.document.onMouseMove.listen(mousemove);
614: h.document.onTouchMove.listen(mousemove);
1.35 damieng 615:
616: // mouseup
1.42 damieng 617: var mouseup = (h.Event event) {
1.35 damieng 618: if (moving_left_gutter || moving_right_gutter) {
1.42 damieng 619: event.preventDefault();
1.35 damieng 620: h.IFrameElement previewIFrame = h.document.getElementById('preview_iframe');
621: if (previewIFrame != null) {
622: // restore events on iframe
623: previewIFrame.style.pointerEvents = '';
624: }
625: moving_left_gutter = false;
626: moving_right_gutter = false;
627: }
628: };
629: h.document.onMouseUp.listen(mouseup);
1.42 damieng 630: h.document.onTouchEnd.listen(mouseup);
1.35 damieng 631: // if we are in an iframe, we need to use the parent to get
632: // mouseup events outside it with some browsers like Chromium
633: var parent = new js.JsObject.fromBrowserObject(js.context['window'])['parent'];
634: if (parent is h.Window) {
635: // happens with Dartium and Firefox
636: parent.onMouseUp.listen((h.MouseEvent event) => mouseup(event));
637: } else if (parent is js.JsObject) {
638: // happens with Chromium
639: parent.callMethod('addEventListener', ['mouseup', mouseup, false]);
640: }
641: }
642:
643: /*
644: * This complements WebPage.adjustPositionsUnderToolbar with positions for the gutters and preview.
645: */
646: void _adjustPositionsUnderToolbar() {
647: h.Element headers = h.document.getElementById('headers');
648: num y = headers.getBoundingClientRect().bottom;
649: String cssTop = (y.round() + 2).toString() + "px";
650: h.document.getElementById('left_gutter').style.top = cssTop;
651: h.DivElement rightGutter = h.document.getElementById('right_gutter');
652: if (rightGutter != null)
653: rightGutter.style.top = cssTop;
654: h.DivElement previewDiv = h.document.getElementById('preview_div');
655: if (previewDiv != null)
656: previewDiv.style.top = cssTop;
1.48 damieng 657: _adjustPreviewIFrameHeight();
658: }
659:
660: /*
661: * Fixes the preview iframe height to take form on top into account
662: * (this cannot be done with pure CSS without flexbox).
663: */
664: void _adjustPreviewIFrameHeight() {
665: h.DivElement previewDiv = h.document.getElementById('preview_div');
666: if (previewDiv != null) {
667: h.IFrameElement previewIFrame = h.document.getElementById('preview_iframe');
668: int newHeight = previewDiv.offsetHeight - previewIFrame.offsetTop;
669: previewIFrame.style.height = newHeight.toString() + 'px';
670: }
1.35 damieng 671: }
672:
673:
1.1 damieng 674: ToolbarMenu _makeSectionMenu() {
1.18 damieng 675: // sort section roles by title
676: knownSectionRoles.sort((String role1, String role2) => LCDStrings.get(role1).compareTo(LCDStrings.get(role2)));
677:
1.1 damieng 678: Menu menu = new Menu(LCDStrings.get('Section'));
679: List<x.Element> sectionRefs = doc.cfg.elementReferences('section');
680: if (sectionRefs == null || sectionRefs.length == 0)
681: return(null);
682: x.Element h1Ref = doc.cfg.elementReference('h1');
1.18 damieng 683: for (String role in knownSectionRoles) {
1.1 damieng 684: MenuItem menuItem = new MenuItem(LCDStrings.get(role), null,
685: data:new ToolbarStyleInfo(sectionRefs, null, null));
686: menuItem.action = () {
687: ToolbarStyleInfo info = menuItem.data;
688: x.Element sectionRef = info.validRef;
1.18 damieng 689: Section section = new Section.fromRef(sectionRef);
1.1 damieng 690: section.state = 1;
691: section.setAttribute('class', 'role-' + role);
1.17 damieng 692: H1 h1 = NodeFactory.create(h1Ref);
1.1 damieng 693: h1.state = 1;
1.18 damieng 694: h1.appendChild(new DNText(LCDStrings.get(role)));
1.9 damieng 695: section.appendChild(h1);
696: x.Element hiddenp = doc.cfg.findSubElement(sectionRef, doc.hiddenParaRefs);
1.18 damieng 697: DNHiddenP p = new DNHiddenP.fromRef(hiddenp);
1.9 damieng 698: section.appendChild(p);
1.17 damieng 699: section.setupSimpleUI();
1.1 damieng 700: if (doc.insert2(section, page.getSelectionStart())) {
1.18 damieng 701: page.cursor.moveTo(new Position(p, 0));
1.1 damieng 702: page.updateAfterPathChange();
703: }
704: };
705: menu.add(menuItem);
706: }
707: ToolbarMenu tbmenu = new ToolbarMenu(menu, Toolbar.insertMenuUpdate, page.toolbar);
708: return(tbmenu);
709: }
710:
1.35 damieng 711:
1.1 damieng 712: Future<x.Document> _readTemplates(String templatesPath) {
713: x.DOMParser dp = new x.DOMParser();
714: return(dp.parseFromURL(templatesPath));
715: }
716:
717: Menu _makeTemplatesMenu(x.Document templatesDoc) {
1.26 damieng 718: List<x.Element> problemRefs = doc.cfg.elementReferences('problem');
719: if (problemRefs == null || problemRefs.length == 0)
720: return(null);
1.1 damieng 721: Menu menu = new Menu(LCDStrings.get('Templates'));
722: x.Element templates = templatesDoc.documentElement;
723: for (x.Node child in templates.childNodes) {
724: if (child.nodeType == x.Node.ELEMENT_NODE && child.nodeName == 'menu') {
725: menu.add(_makeMenu(child));
726: }
727: }
728: return(menu);
729: }
730:
731: Menu _makeMenu(x.Element el) {
732: String locale = LCDStrings.systemLocale;
733: String defaultLocale = LCDStrings.defaultLocale;
734: String title;
735: for (x.Node child in el.childNodes) {
736: if (child.nodeType == x.Node.ELEMENT_NODE && child.nodeName == 'title') {
737: if (child.firstChild != null && child.firstChild.nodeType == x.Node.TEXT_NODE) {
738: if ((child as x.Element).getAttribute('lang') == locale) {
739: title = child.firstChild.nodeValue;
740: break;
741: } else if ((child as x.Element).getAttribute('lang') == defaultLocale) {
742: title = child.firstChild.nodeValue;
743: }
744: }
745: }
746: }
747: if (title == null)
748: title = '?';
749: Menu menu = new Menu(title);
750: for (x.Node child in el.childNodes) {
751: if (child.nodeType == x.Node.ELEMENT_NODE) {
752: if (child.nodeName == 'menu') {
753: menu.add(_makeMenu(child));
754: } else if (child.nodeName == 'item') {
755: menu.add(_makeItem(child));
756: }
757: }
758: }
759: return(menu);
760: }
761:
762: MenuItem _makeItem(x.Element item) {
763: String locale = LCDStrings.systemLocale;
764: String defaultLocale = LCDStrings.defaultLocale;
765: String path, type, title, help;
766: for (x.Node child in item.childNodes) {
767: if (child.nodeType == x.Node.ELEMENT_NODE) {
768: if (child.nodeName == 'title') {
769: if (child.firstChild != null && child.firstChild.nodeType == x.Node.TEXT_NODE) {
770: if ((child as x.Element).getAttribute('lang') == locale) {
771: title = child.firstChild.nodeValue;
772: } else if (title == null && (child as x.Element).getAttribute('lang') == defaultLocale) {
773: title = child.firstChild.nodeValue;
774: }
775: }
776: } else if (child.nodeName == 'path' && child.firstChild != null && child.firstChild.nodeType == x.Node.TEXT_NODE) {
777: path = child.firstChild.nodeValue;
778: } else if (child.nodeName == 'type' && child.firstChild != null && child.firstChild.nodeType == x.Node.TEXT_NODE) {
779: type = child.firstChild.nodeValue;
780: } else if (child.nodeName == 'help') {
781: if (child.firstChild != null && child.firstChild.nodeType == x.Node.TEXT_NODE) {
782: if ((child as x.Element).getAttribute('lang') == locale) {
783: help = child.firstChild.nodeValue;
784: } else if (help == null && (child as x.Element).getAttribute('lang') == defaultLocale) {
785: help = child.firstChild.nodeValue;
786: }
787: }
788: }
789: }
790: }
791: if (type == null) {
792: print("Warning: missing type for template $title\n");
793: type = 'problem';
794: }
795: x.Element refElement = doc.cfg.elementReference(type);
796: MenuItem menuItem = new MenuItem(title, () => _insertTemplate(path), data: refElement);
797: if (help != null)
798: menuItem.toolTipText = help;
799: return menuItem;
800: }
801:
802: void _insertTemplate(String filePath) {
803: try {
804: x.DOMParser dp = new x.DOMParser();
805: dp.parseFromURL(filePath).then((x.Document templateDoc) {
806: x.Element root = templateDoc.documentElement;
807: if (root == null)
808: return;
809: doc.removeWhitespace(root);
810: DaxeNode dnRoot = NodeFactory.createFromNode(root, null);
1.49 damieng 811: List<x.Element> rootAttributes = doc.cfg.elementAttributes(dnRoot.ref);
812: if (dnRoot is LCDBlock && rootAttributes != null && rootAttributes.length > 0)
1.27 damieng 813: dnRoot.state = 0; // make attributes editable for the template root
1.1 damieng 814: UndoableEdit edit;
815: Position pos = page.getSelectionStart();
816: if (dnRoot.nodeName == 'loncapa' && doc.getRootElement() != null)
817: edit = doc.insertChildrenEdit(dnRoot, pos, checkValidity:true);
1.12 damieng 818: else {
819: DaxeNode parent = pos.dn;
820: if (parent is DNText)
821: parent = parent.parent;
822: if (parent is DNHiddenP && !doc.cfg.isSubElement(parent.ref, dnRoot.ref)) {
823: // The node must be inserted outside of the paragraph.
824: // If there is something in the paragraph to the right of the cursor, it must be
825: // moved into a new paragraph after the inserted node.
826: // (as in DaxeDocument.insert2)
827: DNHiddenP p = parent;
828: edit = new UndoableEdit.compound(Strings.get('undo.insert_element'));
829: Position pend = new Position(p, p.offsetLength);
830: pend.moveInsideTextNodeIfPossible();
831: if (pos < pend) {
832: DaxeNode clone = doc.cloneBetween(pos, pend);
833: edit.addSubEdit(doc.removeBetweenEdit(pos, pend));
834: DNHiddenP newp = NodeFactory.create(p.ref);
835: edit.addSubEdit(new UndoableEdit.insertNode(
836: new Position(p.parent, p.parent.offsetOf(p) + 1), newp));
837: edit.addSubEdit(doc.insertChildrenEdit(clone, new Position(newp, 0)));
838: }
839: edit.addSubEdit(new UndoableEdit.insertNode(
840: new Position(p.parent, p.parent.offsetOf(p)+1), dnRoot));
841: } else
842: edit = new UndoableEdit.insertNode(pos, dnRoot);
843: }
1.1 damieng 844: doc.doNewEdit(edit);
845: page.updateAfterPathChange();
1.8 damieng 846: if (dnRoot.nodeName != 'loncapa')
847: page.scrollToNode(dnRoot);
1.1 damieng 848: });
849: } on x.DOMException catch(ex) {
850: h.window.alert(ex.toString());
851: }
852: }
1.33 damieng 853:
854: Menu _makeHelpMenu() {
855: Menu menu = new Menu(LCDStrings.get('help'));
1.38 damieng 856: menu.add(new MenuItem(LCDStrings.get('getting_started'),
857: () => h.window.open('tutorial/getting_started.xhtml', '_blank')));
858: menu.add(new MenuItem(LCDStrings.get('author_manual'),
859: () => h.window.open('/adm/help/author.manual.pdf', '_blank')));
1.41 damieng 860: menu.add(new MenuItem(LCDStrings.get('about_lcdaxe'),
861: () => (new AboutLCDaxeDlg()).show()));
1.33 damieng 862: return(menu);
863: }
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/icons/back.gif){kind=icon}
Return to loncapa_daxe.dart CVS log ![[TXT]](/icons/text.gif){kind=icon}
![[DIR]](/icons/dir.gif){kind=icon}
Up to [LON-CAPA] / modules / damieng / graphical_editor / loncapa_daxe / web