Skip to content
Permalink
Browse files

Read only application (#13)

  • Loading branch information
kacperj committed Nov 3, 2019
1 parent caf988d commit 12f278d6f1e4c7357e7c30c41ab41c04919b26b6
Binary file not shown.
@@ -3,14 +3,12 @@ import ko = require("knockout");
import { Kov, React } from "../core/reactMock";
(ko as any).templates["editor"] =
<div data-bind="template: { name: 'editorNavbar', data: $data }"></div> +
<div data-bind="template: { name: 'editorModals', data: $data }"></div> +
<div id="editor-workspace-container">
<Kov data-bind=" template: { name: 'editorTree', data: $data.EditorTreeVM }"></Kov>
<div id="editor-and-toolbox-container" data-bind="visible: $data.AreSegmentVisible() &amp;&amp; $data.IsToolboxVisible()"
class="pull-left">
<Kov data-bind=" template: { name: 'editorSegments', data: $data }"></Kov>
</div>
<Kov data-bind=" template: { name: 'editorToolbox', data: $data }"></Kov>
<Kov data-bind=" template: { name: 'editorGraph', data: $data }"></Kov>

</div>;
@@ -1,6 +1,6 @@
import ko = require("knockout");

import { Kov, React } from "../../core/reactMock";
import { React } from "../../core/reactMock";
(ko as any).templates["editorNavbar"] =
<nav role="navigation" class="navbar-inverse app-background-color">
<div class="container-fluid">
@@ -15,13 +15,6 @@ import { Kov, React } from "../../core/reactMock";
<li data-bind="css: { active: $data.IsArchitectMode() }, visible: $data.ArePagesDefined() " class="clickable">
<a class="menu-text-compact" data-bind="click: $data.ArchitectMode, loc: 'actions.editor.architect'"></a>
</li>
<li class="breadcrumb-separator">
<span class="navbar-text">
<span>|&nbsp</span>
<Kov data-bind="if: !$data.IsSaving()"><span data-bind="loc: 'editor.content.saved_project'"></span><span>&nbsp</span><span class="glyphicon glyphicon-ok"></span></Kov>
<Kov data-bind="if: $data.IsSaving()"><span data-bind="loc: 'editor.content.saving_project'"></span><span>&nbsp</span><span class="glyphicon glyphicon-repeat"></span></Kov>
</span>
</li>
</ul>
</div>
</div>
@@ -1,11 +1,6 @@

import MediumEditor = require("mediumeditor");
import _ = require("underscore");
import { localize } from "../../localizations/en-US";
import { SegmentModel, SegmentType } from "../../models/gamebook/segments/segmentModel";
import { createProcessor } from "../../src/editor/segments/segmentProcessorFactory";
import MicroVM = require("../base/microVM");
import confirmModalVM = require("../modals/confirmModalVM");
import NavigationEditorSegmentVM = require("./segments/navigationEditorSegmentVM");
import { TextEditorSegmentVM } from "./segments/textEditorSegmentVM";

@@ -36,8 +31,6 @@ class EditorSegmentsVM extends MicroVM {

this.SegmentList(segmentsViewModels);
this.list = newList;
this.updateDropLogic();
this.createHtmlEditor();
}

public getSegmentViewModel(segmentModel: SegmentModel, editorContext) {
@@ -53,166 +46,6 @@ class EditorSegmentsVM extends MicroVM {

return segmentVM;
}

public updateDropLogic() {
const self = this;

return $("#editor-container").find(".drop-segment").droppable({
tolerance: "touch",
over() {
return $(this).addClass("drop-over");
},
out() {
return $(this).removeClass("drop-over");
},
drop(event, ui) {
if (!$(ui.draggable).is(".draggable-tool")) {
return;
}
$(this).removeClass("drop-over");
const toolType = $(ui.draggable).attr("data-tool");

if ($(this).is(".first-segment")) {
return self.useTool(toolType, -1);
} else {
const segmentVM = self.ko.dataFor($(this)[0]);
const indexOfSegment = self.SegmentList.indexOf(segmentVM);
return self.useTool(toolType, indexOfSegment);
}
}
});
}

public RemoveSegment = (segmentVM) => {
return confirmModalVM.showModal({
isDangerAction: true
}).then(((e) => {
let indexOfSegment;
if (e.isConfirmed) {
indexOfSegment = this.SegmentList.indexOf(segmentVM);
this.SegmentList.remove(segmentVM);
this.list.splice(indexOfSegment, 1);

this.events.trigger("segments-modified");
}
}));
}

public useTool(toolType, indexOfSegment) {
const newSegment = createProcessor(toolType);
this.addSegmentAt(newSegment, indexOfSegment + 1);
}

public addSegmentAt(segment, index) {
this.list.splice(index, 0, segment);
const segmentVM = this.getSegmentViewModel(segment, this.editorContext);
this.SegmentList.splice(index, 0, segmentVM);

this.updateDropLogic();
this.createHtmlEditor();

this.events.trigger("segments-modified");
}

public createHtmlEditor() {
const elements = document.querySelectorAll(".markdown-segment > div");
if (elements.length === 0) {
return;
}

const editor = new MediumEditor(elements, this.getButtonSetting());
editor.subscribe("editableInput", ((event, editable) => {
const $textSegment = $(editable).parent();
$(editable).children(":not([style])").attr("style", "text-align: justify;");
const editorSegmentVM = this.ko.dataFor($textSegment[0]);
editorSegmentVM.RenderedHtml($(editable).html());
}));

_.each(elements, ((element, i) => {
const $textSegment = $(element).parent();
const editorSegmentVM = this.ko.dataFor($textSegment[0]);
editor.setContent(editorSegmentVM.RenderedHtml(), i);
}));
}

public getButtonSetting() {
return {
imageDragging: false,
placeholder: {
text: localize("editor.content.start_writing", {})
},
toolbar: {
buttons: [
"bold", "italic", "quote", {
name: "h1",
action: "append-h2",
aria: "header type 1",
tagNames: ["h2"],
contentDefault: "<b>H1</b>",
classList: ["custom-class-h1"],
attrs: {
"data-custom-attr": "attr-value-h1"
}
}, {
name: "h2",
action: "append-h3",
aria: "header type 2",
tagNames: ["h3"],
contentDefault: "<b>H2</b>",
classList: ["custom-class-h2"],
attrs: {
"data-custom-attr": "attr-value-h2"
}
}, {
name: "justifyLeft",
action: "justifyLeft",
aria: "left justify",
tagNames: [],
style: {
prop: "text-align",
value: "left"
},
contentDefault: '<span class="glyphicon-align-left glyphicon"></span>',
contentFA: '<i class="fa fa-align-left"></i>'
}, {
name: "justifyCenter",
action: "justifyCenter",
aria: "center justify",
tagNames: [],
style: {
prop: "text-align",
value: "center"
},
contentDefault: '<span class="glyphicon-align-center glyphicon"></span>',
contentFA: '<i class="fa fa-align-center"></i>'
}, {
name: "justifyRight",
action: "justifyRight",
aria: "right justify",
tagNames: [],
style: {
prop: "text-align",
value: "right"
},
contentDefault: '<span class="glyphicon-align-right glyphicon"></span>',
contentFA: '<i class="fa fa-align-right"></i>'
}, {
name: "justifyFull",
action: "justifyFull",
aria: "full justify",
tagNames: [],
style: {
prop: "text-align",
value: "justify"
},
contentDefault: '<span class="glyphicon-align-justify glyphicon"></span>',
contentFA: '<i class="fa fa-align-right"></i>'
}
]
}
};
}

}

export = EditorSegmentsVM;
@@ -1,15 +1,12 @@
import projectAnalyzer = require("../../src/editor/analyzer/projectAnalyzer");
import projectUpdater = require("../../src/editor/projectUpdater");
import loader = require("../../src/loader");
import gameBookProjectRepository = require("../../src/repositories/gameBookProjectRepository");
import projectService = require("../../src/services/projectService");
import LightVM = require("../base/lightVM");
import pageCreationModalVM = require("./modals/pageCreationModalVM");
import EditorTreeVM = require("./windows/editorTreeVM");

import EditorSegmentsVM = require("./editorSegmentsVM");
import EditorGraphVM = require("./windows/editorGraphVM");
import GameBookValidationVM = require("./windows/gameBookValidationVM");

class EditorVM extends LightVM {
public IsToolboxVisible: KnockoutObservable<boolean>;
@@ -24,11 +21,7 @@ class EditorVM extends LightVM {
public editorContext: any;
public EditorSegments: any;
public GraphVM: any;
public GameBookValidationVM: any;
public VariablesDesignerVM: any;
public TextInfo: KnockoutObservable<any>;
public IsDragging: KnockoutObservable<boolean>;
public IsSaving: KnockoutObservable<boolean>;

constructor() {
super();
@@ -43,10 +36,7 @@ class EditorVM extends LightVM {
this.ArePagesDefined = this.ko.observable(false);
this.EditorSegments = new EditorSegmentsVM();
this.GraphVM = new EditorGraphVM();
this.GameBookValidationVM = new GameBookValidationVM();
this.EditorTreeVM = new EditorTreeVM();
this.IsDragging = this.ko.observable(false);
this.IsSaving = this.ko.observable(false);

this.TextInfo = this.ko.observable({
words: 0,
@@ -58,32 +48,17 @@ class EditorVM extends LightVM {

this.events.on("segments-modified", () => {
throttledRender();
this.notifyProjectChanged();
});

this.events.on("pages-editor-modified", () => {
this.notifyProjectChanged();
});

this.events.on("editor-context-changed", (e) => {
this.onEditorContextChange(e.editorContext);
});

this.events.on("project-not-up-to-date", () => {
this.IsSaving(true);
});

this.events.on("project-up-to-date", () => {
this.IsSaving(false);
});

this.events.on("window-resized", () => {
this.updateHeight();
});

const throttledRender = _.debounce(() => {
this.GameBookValidationVM.setContext(this.editorContext);
this.GameBookValidationVM.validate();
this.updateWordStatistics();
}, 400);
}
@@ -95,10 +70,6 @@ class EditorVM extends LightVM {
$("#editor-workspace-container").height(contentHeight + "px");
}

public notifyProjectChanged() {
this.saveGameBookProject();
}

public BaseMode = () => {
this.hideWindows();
this.hideModes();
@@ -111,17 +82,13 @@ class EditorVM extends LightVM {
this.AreSegmentVisible(true);
this.IsValidationVisible(true);

this.GameBookValidationVM.setContext(this.editorContext);
this.GameBookValidationVM.validate();

this.updateWordStatistics();
} else {
this.IsToolboxVisible(false);
this.AreSegmentVisible(false);
}

this.updateHeight();
this.updateDragLogic();

this.events.trigger("editor-mode-switched", {
mode: "BaseMode"
@@ -189,23 +156,6 @@ class EditorVM extends LightVM {
}
}

public updateDragLogic() {
let editorVM;
editorVM = this;
return $(".editor-toolbox").delegate(".draggable-tool:not([applied-logic])", "mouseover", function() {
return $(this).attr("applied-logic", "true").draggable({
revert: true,
revertDuration: 0,
start: (() => {
return editorVM.IsDragging(true);
}),
stop: (() => {
return editorVM.IsDragging(false);
})
});
});
}

public showEditor(gameBookId, pageGuid) {
const page = gameBookProjectRepository.getPage(gameBookId, pageGuid);

@@ -261,49 +211,16 @@ class EditorVM extends LightVM {

this.updateWordStatistics();

this.GameBookValidationVM.setContext(this.editorContext);
this.GameBookValidationVM.validate();

this.navigate("/" + this.editorContext.gameBookId + "/" + this.editorContext.pageGuid);
} else {
this.BaseMode();
}
}

public OpenVariablesDesigner = () => {
this.VariablesDesignerVM.showVariables(this.editorContext.gameBookId);
return $("#variables-designer-modal").modal();
}

public OpenCreatePageModal = (segmentVM) => {
return pageCreationModalVM.showModal(
this.editorContext.gameBookId
).then((e) => {
if (e.isCreated) {
segmentVM.Model.pageGuid = e.page.guid;

this.events.trigger("segments-modified");
this.events.trigger("pages-editor-modified");
this.events.trigger("pages-editor-created");
this.events.trigger("editor-context-changed", {
editorContext: {
pageGuid: segmentVM.Model.pageGuid,
gameBookId: this.editorContext.gameBookId
}
});
}
});
}

public NavigateToHome = () => {
this.navigate("/");
}

public saveGameBookProject() {
const content = gameBookProjectRepository.getProjectContent(this.editorContext.gameBookId);
return projectUpdater.queueUpdate(this.editorContext.gameBookId, content);
}

public updateWordStatistics() {
const pageModel = gameBookProjectRepository.getPage(this.editorContext.gameBookId, this.editorContext.pageGuid);

0 comments on commit 12f278d

Please sign in to comment.
You can’t perform that action at this time.