ext/app: added responsive images via picturefill

css/css.css

@@ -657,13 +657,15 @@ span.offer_tag {
   padding: .5em;
   line-height: .5em;
 }
-.ui-header .ui-first-wrap ~ .ui-title-logo {
-  margin-left: 6em;
+.ui-header .ui-first-wrap ~ .ui-title-logo,
+.ui-header .ui-first-wrap ~ picture {
+  margin-left: 5em;
 }
 /* logo in header */
 @media (max-width: 24em) {
-  .ui-header .ui-first-wrap ~ .ui-title-logo {
-    margin-left: 2.8em;
+  .ui-header .ui-first-wrap ~ .ui-title-logo,
+  .ui-header .ui-first-wrap ~ picture {
+    margin-left: 3em;
   }
 }
 /* img in subheader */

data/global.json

@@ -48,8 +48,11 @@
           "theme": "slapos-white",
           "class_list": "override_header ",
           "image": {
-            "src": "img/logo.jpg",
-            "alt": "Bip&Go"
+            "alt": "Bip&Go",
+            "src_set": [
+              {"src": "img/logo-large.jpg", "media": "(min-width: 40em)"},
+              {"src": "img/logo.jpg"}
+            ]
           }
         },
         "children": [{

index.html

@@ -28,6 +28,7 @@
     <!-- 3rd party plugins -->
     <script type="text/javascript" src="ext/plugins/validval/jquery.validVal.js"></script>
     <script type="text/javascript" src="ext/plugins/i18next/i18next.js"></script>
+    <script type="text/javascript" src="ext/plugins/picturefill/picturefill.js"></script>
 
     <!-- stuff happens here -->
     <script type="text/javascript" data-storage="data/storages.json" data-config="data/global.json" src="js/erp5_loader.js"></script>

js/erp5_loader.js

@@ -71,6 +71,7 @@
         case "rows":
         case "cols":
         case "name":
+        case "media":
         case "value":
         case "data-":
         case "role":
@@ -876,7 +877,7 @@
   // TODO: too complicated and too much custom stuff passed back
   // This cannot be so difficult...
   factory.widget.header = function (spec) {
-    var container, id, target, set_img, img;
+    var container, id, target, set_img, img, pic;
 
     container = document.createDocumentFragment();
     id = spec.id || ((spec.data_url || "global") + "-header");
@@ -885,7 +886,7 @@
 
     // button group wrappers and title (inserted before last wrapper!)
     target = function (new_spec) {
-      var position, drop_content, fragment, count, config;
+      var position, drop_content, fragment, count, config, i, len, source;
 
       count = new_spec.j;
       config = new_spec.config;
@@ -904,6 +905,41 @@
                   ("[alt]" + config.title_i18n) : null
             }
           }));
+        // TODO: separate method!
+        } else if (config.src_set) {
+          // NOTE: responsive <picture> element
+          pic = factory.element({"type": "picture"});
+          len = config.src_set.length;
+
+//           // all hail IE9
+//           pic.appendChild(
+//             document.createTextNode('<!--[if IE 9]><video style="display: none;"><![endif]-->')
+//           );
+
+          for (i = 0; i < len; i += 1) {
+            pic.appendChild(factory.element({
+              "type": "source",
+              "attributes": {"srcset": config.src_set[i].src},
+              "logic": {"media": config.src_set[i].media || null}
+            }));
+          }
+
+//           // again...
+//           pic.appendChild(
+//             document.createTextNode('<!--[if IE 9]></video><![endif]-->')
+//           );
+
+          pic.appendChild(factory.element({
+            "type": "img",
+            "direct": {"className": "ui-title-logo", "alt": config.alt},
+            "attributes": {"srcset": config.src_set[len - 1].srcset}
+          }));
+          source = factory.element({
+            "type": "img",
+            "direct": {"alt": config.alt},
+            "attributes": {"srcset": config.src_set[len - 1].srcset}
+          });
+          fragment.appendChild(pic);
         } else {
           fragment.appendChild(factory.element({
             "type": "h1",
@@ -956,8 +992,9 @@
       "target_selector": "last",
       // TODO: remove this...
       "spec": {
-        "img": !!set_img,
+        "img": !!set_img && !img.src_set,
         "src": img.src,
+        "src_set": img.src_set,
         "title": img.alt || spec.title,
         "title_i18n": img.alt_i18n || spec.title_i18n,
         "section_list": spec.section_list,
@@ -7380,6 +7417,9 @@
    */
   app.init.contentLoaded(window, function () {
 
+    // shim <picture>
+    document.createElement("picture");
+
     // TODO: Don't wipe. Wait for sync...!
     // NOTE: Don't clear if page is opened in popup (like when using oauth)
     if (window.opener === null) {
@@ -7403,6 +7443,9 @@
       .then(function () {
         // need one call here to initialize whats on the first page
         $(document).enhanceWithin();
+
+        // picturefill... so much extra §$%&/
+        window.picturefill();
       })
       .fail(app.util.error);
   });