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