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