Finished implementation of new view overlay.

Author: Chris K

src/client-en.xml

@@ -278,6 +278,7 @@ window.load_screen_timeout = window.setTimeout(function()
 <script src="./ui-scripts/view.js"/>
 <script src="./ui-scripts/tempview.js"/>
 <script src="./ui-scripts/compositeView.js"/>
+<script src="./ui-scripts/overlayview.js"/>
 <script src="./ui-scripts/settingView.js"/>
 <script src="./ui-scripts/ui-base.js"/>
 <script src="./ui-scripts/TopUIBase.js"/>
@@ -307,6 +308,7 @@ window.load_screen_timeout = window.setTimeout(function()
 <script src="./ui-scripts/containers.js"/>
 <script src="./ui-scripts/topContainers.js"/>
 <script src="./ui-scripts/windowContainers.js"/>
+<script src="./ui-scripts/overlaybackground.js"/>
 <script src="./ui-scripts/tab.js"/>
 <script src="./ui-scripts/status.js"/>
 <script src="./ui-scripts/ui-templates.js"/>
@@ -335,6 +337,7 @@ window.load_screen_timeout = window.setTimeout(function()
 <script src="./ui-scripts/pixelmagnifier.js"/>
 
 
+
 <script src="./build-application/build_application.js"></script>
 <script src="./build-application/build_window_manager_2_0.js"></script>
 <script src="./build-application/build_console_logger_2_0.js"></script>

src/network/network_view.js

@@ -933,10 +933,7 @@ cls.DetailOverlayView = function(id, container_class, html, default_handler, ser
   {
     container.innerHTML = "<h2>hello</h2>";
   };
-  this.ondestroy = function()
-  {
-    opera.postError(this.id + " destroyed")
-  }
+
   // overlay view has no name
   this.init(id, container_class, html, default_handler);
 

src/ui-scripts/celloverlay.js

@@ -0,0 +1,82 @@
+var CellOverlay = function(view_id, parent_cell, parent_view_id)
+{
+  this._init(view_id, parent_cell, parent_view_id);
+};
+
+CellOverlayPrototype = function()
+{
+  this._init = function(view_id, parent_cell, parent_view_id)
+  {
+    this.view_id = view_id;
+    this.parent_cell = parent_cell;
+    this.parent_view_id = parent_view_id;
+    this.is_active = false;
+    window.messages.add_listener("show-view", this._onview_show.bind(this));
+    window.messages.add_listener("hide-view", this._onview_hide.bind(this));
+    var layout_rough =
+    {
+      dir: "h",
+      children:
+      [
+        { tabbar: { tabs: [], is_hidden: true, is_empty: true } , width: 150, min_width: 7, name: view_id },
+        { tabbar: { tabs: [view_id], is_hidden: true } },
+      ]
+    };
+    CellBase.init.call(this, layout_rough, layout_rough.dir);
+  };
+
+  this._onview_show = function(msg)
+  {
+    if (this.is_active && msg.id == this.parent_view_id)
+      this.show();
+  };
+
+  this._onview_hide = function(msg)
+  {
+    if (this.is_active && msg.id == this.parent_view_id)
+      this.remove_ui_elements(this.view_id);
+  };
+
+  this.show = function()
+  {
+    var view = window.views[this.view_id];
+    if (!view || view.isvisible())
+      return this.is_active;
+    var parent_view = window.views[view.parent_view_id];
+    if (!parent_view || !parent_view.isvisible())
+      return this.is_active;
+    var parent_toolbar = window.toolbars[this.parent_view_id];
+    if (parent_toolbar)
+      parent_toolbar.disable();
+    this.is_active = true;
+    this._update();
+    return this.is_active;
+  };
+
+  this.update = function()
+  {
+    if (this.is_active && window.views[this.view_id] && window.views[this.view_id].isvisible())
+      this._update();
+  };
+
+  this._update = function()
+  {
+    var tabbar_height = this.parent_cell.tab.offsetHeight;
+    this.width = this.parent_cell.width;
+    this.height = this.parent_cell.height - tabbar_height;
+    this.setDefaultDimensions();
+    CellBase.update.call(this, this.parent_cell.left, this.parent_cell.top + tabbar_height, true);
+  };
+
+  this.hide = function()
+  {
+    var parent_toolbar = window.toolbars[this.parent_view_id];
+    if (parent_toolbar)
+      parent_toolbar.enable();
+    this.is_active = false;
+    this.remove_ui_elements(this.view_id);
+  };
+};
+
+CellOverlayPrototype.prototype = CellBase;
+CellOverlay.prototype = new CellOverlayPrototype();

src/ui-scripts/cells.js

@@ -158,6 +158,8 @@
       if (this.overlay)
         this.overlay.hide();
       this.overlay = new CellOverlay(view.id, this, view.parent_view_id);
+      if (!window.toolbars[view.id])
+        new ToolbarConfig({view: view.id, groups: [Toolbar.overlay_close_button]});
     }
     return this.overlay.show();
   };
@@ -174,14 +176,17 @@
     if (view && view.isvisible())
     {
       var cell = this.get_cell(view_id);
-      var container_id = 'container-to-' + cell.id;
-      var toolbar_id = 'toolbar-to-' + cell.id;
+      var container_id = "container-to-" + cell.id;
       window.messages.post("hide-view", {id: view_id});
       view.removeContainerId(container_id);
+      var toolbar_id = "toolbar-to-" + cell.id;
       var toolbar = window.toolbars[view_id];
       if (toolbar)
         toolbar.removeContainerId(toolbar_id);
-      [container_id, toolbar_id].forEach(function(id)
+      [container_id,
+       toolbar_id,
+       "overlay-background-to-" + cell.id,
+       "slider-for-" + cell.id].forEach(function(id)
       {
         var ele = document.getElementById(id);
         if (ele)
@@ -310,6 +315,7 @@
     this.container_id = container_id; // think about this
     this.is_dirty = true;
     this.is_empty = Boolean(rough_cell.is_empty);
+    this.overlay_background = null;
 
     dir = dir == HOR ? VER : HOR;
 
@@ -380,6 +386,11 @@
     var view_id = this.tab && this.tab.activeTab;
     if (view_id)
     {
+      if (window.views[view_id] && window.views[view_id].type == "overlay" && !this.overlay_background)
+        this.overlay_background = new OverlayBackground(this);
+
+      if (this.overlay_background)
+        this.overlay_background.setup();
       this.toolbar.setup(view_id);
       var search = UI.get_instance().get_search(view_id);
       this.searchbar = search && search.get_searchbar() || null;
@@ -448,6 +459,11 @@
         }
         else
         {
+          if (this.overlay_background)
+            this.overlay_background.setDimensions(force_redraw);
+
+          if (this.overlay)
+            this.overlay.update(this.left, this.top, force_redraw, is_resize);
           this.tab.setDimensions(force_redraw);
           this.toolbar.setDimensions(force_redraw);
           if (this.searchbar)

src/ui-scripts/overlaybackground.js

@@ -0,0 +1,86 @@
+var OverlayBackground = function(cell)
+{
+  this.init(cell);
+};
+
+var OverlayBackgroundPrototype = function()
+{
+  this.type = "overlay-background";
+  this.height = 0;
+  this.width = 0;
+  this.top = 0;
+  this.left = 0;
+  this.is_dirty = true;
+
+  this.setDimensions = function(force_redraw)
+  {
+
+    if(!this.horizontal_border_padding)
+      this.setCSSProperties();
+
+    var dim = this.cell.top - 1;
+    if( dim != this.top)
+    {
+      this.is_dirty = true;
+      this.top = dim;
+    }
+
+    dim = this.cell.left;
+    if( dim != this.left)
+    {
+      this.is_dirty = true;
+      this.left = dim;
+    }
+
+    dim = this.cell.width - this.horizontal_border_padding;
+    if( dim != this.width)
+    {
+      this.is_dirty = true;
+      this.width = dim;
+    }
+
+    dim = this.cell.height - this.vertical_border_padding + 1;
+    if( dim != this.height)
+    {
+      this.is_dirty = true;
+      this.height = dim;
+    }
+    this.update(force_redraw);
+  };
+
+  this.setup = function(view_id)
+  {
+    if (!document.getElementById(this.type + '-to-' + this.cell.id))
+      this.update();
+  };
+
+  this.update = function(force_redraw)
+  {
+    if (force_redraw)
+      this.is_dirty = true;
+    var id = this.type + '-to-' + this.cell.id;
+    var ele = document.getElementById(id);
+    if (!ele)
+    {
+      ele = document.render(["div", "class", "background-overlay", "id", id]);
+      viewport.appendChild(ele);
+    }
+
+    if (this.is_dirty)
+    {
+      this.is_dirty = false;
+      this.update_style(ele.style);
+      this.update_sub_class();
+    }
+    return ele;
+  }
+
+  this.init = function(cell)
+  {
+    this.cell = cell;
+    this.initBase();
+  };
+};
+
+OverlayBackgroundPrototype.prototype = UIBase;
+OverlayBackground.prototype = new OverlayBackgroundPrototype();

src/ui-scripts/overlayview.js

@@ -0,0 +1,27 @@
+var OverlayView = function(id, container_class, html, default_handler) {};
+var OverlayViewPrototype = function()
+{
+  this.type = "overlay";
+
+  this.show = function()
+  {
+    var cell = window.topCell.get_cell(this.parent_view_id);
+    if (cell)
+      this.is_active = cell.show_overlay(this);
+  };
+
+  this.hide = function()
+  {
+    var cell = window.topCell.get_cell(this.parent_view_id);
+    if (cell)
+      cell.hide_overlay(this.id);
+    this.is_active = false;
+  };
+
+  this.init = function(id, container_class, html, default_handler)
+  {
+    ViewBase.init.call(this, id, "", container_class, html, default_handler);
+  };
+};
+OverlayViewPrototype.prototype = ViewBase;
+OverlayView.prototype = new OverlayViewPrototype();

src/ui-scripts/toolbar.js

@@ -167,6 +167,10 @@ var ToolbarBase = function()
     var search = this.filters.length && UI.get_instance().get_search(view_id);
     if (this.__is_visible)
     {
+      var view = window.views[view_id];
+      if (view && view.type == "overlay" && this.groups[0] != Toolbar.overlay_close_button)
+        this.groups.unshift(Toolbar.overlay_close_button);
+
       if (this.filters.length)
       {
         toolbar.render(templates.filters(this.filters));
@@ -233,7 +237,6 @@ var ToolbarBase = function()
           toolbar.render(custom.template(views[view_id]));
         }
       }
-
       if (!window.views[view_id].is_enabled && toolbars[view_id])
         toolbars[view_id].disable();
     }
@@ -372,3 +375,16 @@ window.templates["toolbar-separator"] = function()
   return ["toolbar-separator"];
 };
 
+Toolbar.overlay_close_button =
+{
+  type: UI.TYPE_BUTTONS,
+  items:
+  [
+    {
+      handler: "close-overlay-view",
+      icon: "close-overlay-view",
+      title: ui_strings.S_CLOSE_OVERLAY_VIEW
+    }
+  ]
+};
+

src/ui-scripts/ui-actions.js

@@ -306,6 +306,15 @@ eventHandlers.click["toolbar-single-select"] = function(event, target)
   }
 }
 
+eventHandlers.click["close-overlay-view"] = function(event, target)
+{
+  var ui_id = target.get_ancestor_attr("ui-id");
+  var toolbar = UIBase.getUIById(ui_id);
+  var view = toolbar && window.views[toolbar.cell.tab.activeTab];
+  if (view)
+    view.hide();
+};
+
 
 /***** change handler *****/
 

src/ui-scripts/ui-base.js

@@ -177,7 +177,9 @@ var UIBase = new function()
     for( ; item = resolve_map[i]; i++)
     {
       container.innerHTML = '';
-      source = container.appendChild(document.createElement(item.source));
+      source = item.source
+             ? container.appendChild(document.createElement(item.source))
+             : container.render(item.template);
       if (item.source_attrs)
       {
         for (var key in item.source_attrs)

src/ui-scripts/ui_framework.js

@@ -116,6 +116,11 @@ var ui_framework = new function()
         }
       ]
     },
+    {
+      template: ["div", "class", "background-overlay"],
+      target: OverlayBackground.prototype,
+      properties: resolve_map_properties
+    },
   ];