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