Dodanie flash messages.

diff --git a/project/static/js/messages.js b/project/static/js/messages.js
new file mode 100644 (file)
index 0000000..c64aa5b
--- /dev/null
+++ b/project/static/js/messages.js
@@ -0,0 +1,34 @@
+/*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();
+

diff --git a/project/static/js/models.js b/project/static/js/models.js
index b5b9c54..9938eb0 100644 (file)
--- a/project/static/js/models.js
+++ b/project/static/js/models.js
@@ -1,4 +1,4 @@
-/*globals Editor fileId SplitView PanelContainerView EditorView*/
+/*globals Editor fileId SplitView PanelContainerView EditorView FlashView messageCenter*/

 var documentsUrl = '/api/documents/';
 
 
 var documentsUrl = '/api/documents/';
 
 


@@ -375,6 +375,7 @@ $(function() {
   doc = new Editor.DocumentModel();
   var editor = new EditorView('#body-wrap', doc);
   editor.freeze();
   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);
   var splitView = new SplitView('#splitview', doc);
   leftPanelView = new PanelContainerView('#left-panel-container', doc);
   rightPanelContainer = new PanelContainerView('#right-panel-container', doc);

diff --git a/project/static/js/views/flash.js b/project/static/js/views/flash.js
new file mode 100644 (file)
index 0000000..3f4f475
--- /dev/null
+++ b/project/static/js/views/flash.js
@@ -0,0 +1,35 @@
+/*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));
+  }
+});

diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html
index c38dfc4..ff37c24 100644 (file)
--- a/project/templates/explorer/editor.html
+++ b/project/templates/explorer/editor.html
@@ -16,7 +16,9 @@
        
        {# App and views #}
        <script src="{{STATIC_URL}}js/app.js" type="text/javascript" charset="utf-8"></script>
        
        {# 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/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>
        <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>


@@ -49,7 +51,15 @@
                </div>
        </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" style="position: relative; margin-left: auto; margin-right: auto; width: 400px; background-color: yellow">
+               <% if (shownMessage) { %>
+                       <p style="margin: 0; padding: 0.2em 0.5em; line-height: 1.8em" 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 class="image-gallery-view-template">
 
         <div class="image-gallery-header">


@@ -152,3 +162,7 @@
         </div>
     </div>
 {% endblock maincontent %}
         </div>
     </div>
 {% endblock maincontent %}

+
+{% block extrabody %}
+       <div style="position: absolute; left: 0; right: 0; top: 0; height: 20px; z-index: 1000" id="flashview"></div>
+{% endblock %}
\ No newline at end of file