--- /dev/null
+/*global Editor*/
+Editor.MessageCenter = Editor.Object.extend({
+ init: function() {
+ this.messages = [];
+ this.flashMessages = [];
+ this.firstFlashMessage = null;
+ },
+
+ addMessage: function(type, text, flash) {
+ this.messages.push({type: type, text: text});
+ if (flash) {
+ this.flashMessages.push({type: type, text: flash});
+ if (this.flashMessages.length == 1) {
+ this.set('firstFlashMessage', this.flashMessages[0]);
+ setTimeout(this.changeFlashMessage.bind(this), 1000 * 10);
+ }
+ }
+ },
+
+ changeFlashMessage: function() {
+ this.flashMessages.splice(0, 1);
+ if (this.flashMessages.length > 0) {
+ this.set('firstFlashMessage', this.flashMessages[0]);
+ setTimeout(this.changeFlashMessage.bind(this), 1000 * 10);
+ } else {
+ this.set('firstFlashMessage', null);
+ }
+ }
+
+});
+
+
+var messageCenter = new Editor.MessageCenter();
+
-/*globals Editor fileId SplitView PanelContainerView EditorView*/
+/*globals Editor fileId SplitView PanelContainerView EditorView FlashView messageCenter*/
var documentsUrl = '/api/documents/';
doc = new Editor.DocumentModel();
var editor = new EditorView('#body-wrap', doc);
editor.freeze();
+ var flashView = new FlashView('#flashview', messageCenter);
var splitView = new SplitView('#splitview', doc);
leftPanelView = new PanelContainerView('#left-panel-container', doc);
rightPanelContainer = new PanelContainerView('#right-panel-container', doc);
--- /dev/null
+/*globals View render_template*/
+var FlashView = View.extend({
+ template: 'flash-view-template',
+
+ init: function(element, model, template) {
+ this.shownMessage = null;
+ this._super(element, model, template);
+ this.setModel(model);
+ },
+
+ setModel: function(model) {
+ if (this.model) {
+ this.model.removeObserver(this);
+ }
+ this.model = model;
+ this.shownMessage = null;
+ if (this.model) {
+ this.shownMessage = this.model.get('firstFlashMessage');
+ this.model.addObserver(this, 'firstFlashMessage', this.modelFirstFlashMessageChanged.bind(this));
+ }
+ this.render();
+ },
+
+ render: function() {
+ this.element.html(render_template(this.template, this));
+ },
+
+ modelFirstFlashMessageChanged: function(property, value) {
+ this.element.fadeOut('slow', function() {
+ this.shownMessage = value;
+ this.render();
+ this.element.fadeIn('slow');
+ }.bind(this));
+ }
+});
{# App and views #}
<script src="{{STATIC_URL}}js/app.js" type="text/javascript" charset="utf-8"></script>
+ <script src="{{STATIC_URL}}js/messages.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/views/view.js" type="text/javascript" charset="utf-8"></script>
+ <script src="{{STATIC_URL}}js/views/flash.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/views/editor.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/views/button_toolbar.js" type="text/javascript" charset="utf-8"></script>
<script src="{{STATIC_URL}}js/views/split.js" type="text/javascript" charset="utf-8"></script>
</div>
</script>
- <script type="text/html" charset="utf-8" id="image-gallery-view-template">
+ <script type="text/html" charset="utf-8" id="flash-view-template">
+ <div class="flashview">
+ <% if (shownMessage) { %>
+ <p style="margin: 0; padding: 0.2em 0.5em; line-height: 1.8em; background-color: yellow" class="<%= shownMessage.type %>"><%= shownMessage.text %></p>
+ <% } %>
+ </div>
+ </script>
+
+ <script type="text/html" charset="utf-8" id="image-gallery-view-template">
<div class="image-gallery-view-template">
<div class="image-gallery-header">
</div>
</div>
{% endblock maincontent %}
+
+{% block extrabody %}
+ <div style="position: absolute; left: 35%; right: 35%; top: 0; height: 20px; z-index: 1000" id="flashview"></div>
+{% endblock %}
\ No newline at end of file