How does it work?
Every time someone wants to extend the application, instead of modifying original `publishing.js` file, he or she can subscribe to given events, e.g.
Scenario: Table Of Contents extension
```
// resources/public/js/toc.js
events.subscribe('content:rendered', function () {
// Prepend table of contents in edit mode on updates
});
events.subscribe('document:loaded', function () {
// Prepend table of contents on initial load in edit view and preview
});
```
Now, having structured way to hook into app allows to keep the main codebase maintainable and pretty stable and extremely extensible at the same time.
45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html style="height: 100%;">
|
|
|
|
<head>
|
|
<title>NoteHub — New Page</title>
|
|
<meta charset="UTF-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<link href="/style.css" rel="stylesheet" type="text/css" />
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js" type="text/javascript"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/1.0.1/js/md5.min.js" type="text/javascript"></script>
|
|
<script src="/js/events.js" type="text/javascript"></script>
|
|
<script src="/js/publishing.js" type="text/javascript"></script>
|
|
<base target="_blank">
|
|
</head>
|
|
|
|
<body onload="onLoad()" style="height: 100%">
|
|
<div id="editContainer">
|
|
<form id="editPane" action="/note" autocomplete="off" method="POST" target="_self">
|
|
<input id="action" name="action" value="%ACTION%" type="hidden" />
|
|
<input id="id" name="id" value="%ID%" type="hidden" />
|
|
<input id="password" name="password" type="hidden" />
|
|
<input id="session" name="session" type="hidden" value="%SESSION%" />
|
|
<input id="signature" name="signature" type="hidden" />
|
|
<textarea id="note" name="note">%CONTENT%</textarea>
|
|
<fieldset id="input-elems">
|
|
<input class="ui-elem" id="plain-password" name="plain-password" placeholder="Password for editing" type="text">
|
|
<label style="margin-right: 1em">
|
|
<input id="tos" type="checkbox" onClick="enableButton()">
|
|
Accept <a href="/TOS">Terms of Service</a>
|
|
</label>
|
|
<input class="button ui-elem" disabled id="publish-button" name="button" type="submit" value="Publish">
|
|
<input class="button ui-elem" id="delete-button" name="button" type="submit" value="Delete">
|
|
<span id="tableau">
|
|
0 words
|
|
</span>
|
|
<br>
|
|
<br>
|
|
</fieldset>
|
|
</form>
|
|
<div id="previewPane"><article id="draft"></article></div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|