erp5_xhtml_style: allow gadgets to requestMaximize

... leaveMaximize and toggleMaximize. The 3 methods returns
true if erp5_gadgetfield.js accepts the maximization request.

Also add a default css for this case in erp5.css

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5.css.xml

@@ -1196,6 +1196,15 @@ span.search button .image {\n
   padding: 5px;\n
 }\n
 \n
+/* fit content section to window size and in foreground */\n
+.ui-content-maximize {\n
+  position: fixed !important;\n
+  top: 0; left: 0; right: 0; bottom: 0;\n
+  height: 100vh;\n
+  width: 100vw;\n
+  z-index: 2000;\n
+}\n
+\n
 /* Search results list\n
 ------------------------------------------------*/\n
 \n

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5_gadgetfield.js.js

@@ -27,13 +27,74 @@
     return new RSVP.Promise(resolver, canceller);
   }
 
+  function requestMaximize(param_dict, element) {
+    if (this.props.maximize_restore_state) {
+      return false;  // do not raise, like html5 requestFullScreen
+    }
+    this.props.maximize_restore_state = {
+      gadget_scope: param_dict.gadget_scope,
+      scrollTop: window.pageYOffset,
+      scrollLeft: window.pageXOffset
+    };
+    element.className = (element.className || "") +
+      " " + this.props.maximize_classname;
+    // XXX tell sub gadget that now it is maximized (call param_dict.gadget.onMaximizeChange?)
+    //     this way the parent gadget can decide to set the sub gadget unmaximized later
+    //     for instance: if the user clicks on a button that changes the ui, the maximized
+    //                   gadget should have to be unmaximized.
+    return true;
+  }
+
+  function leaveMaximize(param_dict, element) {
+    if (!this.props.maximize_restore_state ||
+        this.props.maximize_restore_state.gadget_scope !== param_dict.gadget_scope) {
+      return false;  // do not raise, like html5 requestFullScreen
+    }
+    var maximized_element_list = this.props.element.querySelectorAll(
+      "." + this.props.maximize_classname
+    );
+    if ([].indexOf.call(maximized_element_list, element) < 0) {
+      return false;  // do not raise, like html5 requestFullScreen
+    }
+    element.className = (element.className || "")
+      .replace(this.props.maximize_classname_search_regexp, " ")
+      .replace(/(?:^\s+|\s+$)/g, ""); // remove trailing spaces
+    window.scrollTo(
+      this.props.maximize_restore_state.scrollLeft,
+      this.props.maximize_restore_state.scrollTop
+    );
+    delete this.props.maximize_restore_state;
+    // XXX tell sub gadget that now it is unmaximized (call param_dict.gadget.onMaximizeChange?)
+    return true;
+  }
+
+  function toggleMaximize(param_dict, element) {
+    if (this.props.maximize_restore_state) {
+      return leaveMaximize.call(this, param_dict, element);
+    }
+    return requestMaximize.call(this, param_dict, element);
+  }
+
+  function makeMaximizeMethod(fn) {
+    return function (_, gadget_scope) {
+      var param_dict = {gadget_scope: gadget_scope};
+      return this.getDeclaredGadget(gadget_scope).push(function (gadget) {
+        param_dict.gadget = gadget;
+        return gadget.getElement();
+      }).push(fn.bind(this, param_dict));
+    };
+  }
+
   rJS(window)
     /////////////////////////////////////////////////////////////////
     // ready
     /////////////////////////////////////////////////////////////////
     // Init local properties
     .ready(function (g) {
-      g.props = {};
+      g.props = {
+        maximize_classname: "ui-content-maximize",
+        maximize_classname_search_regexp: /(?:^|\s)ui-content-maximize(?:\s|$)/
+      };
     })
 
     // Assign the element to a variable
@@ -46,6 +107,9 @@
     /////////////////////////////////////////////////////////////////
     // declared methods
     /////////////////////////////////////////////////////////////////
+    .allowPublicAcquisition('requestMaximize', makeMaximizeMethod(requestMaximize))
+    .allowPublicAcquisition('leaveMaximize', makeMaximizeMethod(leaveMaximize))
+    .allowPublicAcquisition('toggleMaximize', makeMaximizeMethod(toggleMaximize))
     .declareService(function () {
       var g = this,
         i,
@@ -195,4 +259,4 @@
           form.submit();
         });
     });
-}(window, document, rJS, RSVP));
\ No newline at end of file
+}(window, document, rJS, RSVP));