Gadgets/Item: first commit

lang/de-DE/app.json

 {
+  "custom": {
+    "dimensions": {
+      "colors": "Farben",
+      "sizes": "Größen"
+    },
+    "colors": {
+      "peppermint": "Pfefferminz",
+      "blue": "Blau",
+      "orange": "Orange",
+      "shell": "Natur",
+      "passy": "Lila",
+      "vert": "Grün",
+      "peach": "Pfirsich"
+    }
+  },
   "common": {},
   "errors": {},
   "address": {
@@ -58,6 +73,7 @@
     "title": "Willkommen"
   },
   "item": {
+    "select": "Wählen",
     "add_basket": "In den Warenkorb",
     "finish_order": "Bestellung abschliessen"
   },

lang/en-EN/app.json

 {
+  "custom": {
+    "dimensions": {
+      "colors": "Colors",
+      "sizes": "Sizes"
+    },
+    "colors": {
+      "peppermint": "Peppermint",
+      "blue": "Blue",
+      "orange": "Orange",
+      "shell": "Offwhite",
+      "passy": "Purple",
+      "vert": "Green",
+      "peach": "Peach"
+    }
+  },
   "common": {},
   "errors": {},
   "address": {
@@ -58,6 +73,7 @@
     "title": "Welcome"
   },
   "item": {
+    "select": "Select",
     "add_basket": "Add to basket",
     "finish_order": "Finish your order"
   },

lang/fr-FR/app.json

 {
+  "custom": {
+    "dimensions": {
+      "colors": "Coleurs",
+      "sizes": "Tailles"
+    },
+    "colors": {
+      "peppermint": "Menthe Poivrée",
+      "blue": "Blue",
+      "orange": "Orange",
+      "shell": "Coquille",
+      "passy": "Pourpre",
+      "vert": "Vert", 
+      "peach":"Pêche"
+    }
+  },
   "common": {},
   "errors": {},
   "address": {
@@ -61,6 +76,7 @@
     "title": "Accueil"
   },
   "item": {
+    "select": "Sélectionner",
     "add_basket": "Ajoter au panier",
     "finish_order": "Vers la Caisse"
   },

modules/core/storage/storage.js

@@ -91,7 +91,7 @@ define([
       }],
       "dimensions": [{
         "name": "colors",
-        "i18n": "custom.colors",
+        "i18n": "custom.dimensions.colors",
         "vars": [{
           "name": "blue",
           "i18n": "custom.colors.blue",
@@ -113,7 +113,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "S",
@@ -177,7 +177,7 @@ define([
       }],
       "dimensions": [{
         "name": "colors",
-        "i18n": "custom.colors",
+        "i18n": "custom.dimensions.colors",
         "vars": [{
           "name": "blue",
           "i18n": "custom.colors.blue",
@@ -199,7 +199,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "34",
@@ -261,7 +261,7 @@ define([
       }],
       "dimensions": [{
         "name": "colors",
-        "i18n": "custom.colors",
+        "i18n": "custom.dimensions.colors",
         "vars": [{
           "name": "orange",
           "i18n": "custom.colors.orange",
@@ -283,7 +283,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "S",
@@ -344,7 +344,7 @@ define([
       }],
       "dimensions": [{
         "name": "colors",
-        "i18n": "custom.colors",
+        "i18n": "custom.dimensions.colors",
         "vars": [{
           "name": "peppermint",
           "i18n": "custom.colors.peppermint",
@@ -366,7 +366,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "34",
@@ -410,7 +410,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "34",
@@ -448,7 +448,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "34",
@@ -489,7 +489,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "34",
@@ -552,7 +552,7 @@ define([
       }],
       "dimensions": [{
         "name": "colors",
-        "i18n": "custom.colors",
+        "i18n": "custom.dimensions.colors",
         "vars": [{
           "name": "vert",
           "i18n": "custom.colors.vert",
@@ -574,7 +574,7 @@ define([
           },
           "variations": {
             "name": "sizes",
-            "i18n": "custom.sizes",
+            "i18n": "custom.dimensions.sizes",
             "variants": [{
               "ean": "",
               "name": "T0",

modules/ui/details/details.css

-/* scope CSS? */
+.details_element {
+    display: inline-block;
+    vertical-align: top;
+    width: 45%;
+}
+@media (max-width: 40em) {
+  .details_element {
+    width: 100%;
+  }
+}

modules/ui/details/details.html

@@ -52,14 +52,32 @@
 
       <!-- gallery with zoom -->
       <div id="media"
+        class="details_element"
         data-gadget="modules/media/media.html"
         data-gadget-module="media">
       </div>
 
       <!-- item info -->
       <div id="item"
+        class="details_element"
         data-gadget="modules/item/item.html"
-        data-gadget-module="item">
+        data-gadget-module="item"
+        data-gadget-property='{
+          "state": [
+              {
+                "item": {
+                  "_config": {
+                    "datasource": {"module": "storage"}
+                  },
+                  "_links": {
+                    "self": {"href": ""},
+                    "datasource": {"href": "modules/storage/storage.html#queryStorage?method=allDocs"},
+                    "show": {"href": "search.html#queryStorage?method=allDocs"}
+                  }
+                }
+              }
+            ]
+        }'>
       </div>
 
       <!-- item details -->

modules/ui/item/item.js

@@ -4,27 +4,229 @@ define([
   , 'css!item'
   ],
   function (App, source) {
-    var response = {};
+    var that = {};
+    var priv = {};
 
-    response.data = source;
-    response.callback = function (self) {
+    // ========================== ATTRIBUTES ==============================
+    // set response, so it's available across function calls
+    priv.response;
+    priv.generateContent = function (response) {
+      var i, j, k, content, child, dimension, dimensions, variation,
+        sub_dimension, sub_dimension_i18n;
+
+      // expose response (will be overwritten, when next item loads
+      priv.response = response;
+
+      if (response.price === response.original_price) {
+        price = response.price + response.currency;
+      } else {
+        price = "<span class='rebate'>" + response.price + response.currency +
+          "</span> (" + response.original_price + response.currency + ")";
+      }
+
+      content = "<ul data-role='listview' data-inset='true' class='" +
+        "content_wrap'><li><h3><span class='content_brand'>" + response.brand +
+        "</span>&nbsp;<span class='content_title translate' data-i18n=''>" +
+        response.title + "</span></h3><p class='content_description" +
+        " translate' data-i18n=''>" + response.description +
+        "</p><p class='content_pricing ui-li-aside'>" +
+        price + "</p></li></ul>";
+
+      dimensions = "<div data-role='fieldcontain' class='dimension_wrap'>";
+
+      // for every dimension
+      for (i = 0; i < response.dimensions.length; i += 1) {
+        dimension = response.dimensions[i];
+
+        dimensions += "<label for='dims_" + dimension.name + "' class='" +
+          "translate' data-i18n='item.select'>Select</label>" +
+          "<select class='main_dimension' name='dims_" +
+          dimension.name + "' id='" + dimension.name + "'>" +
+          "<option class='translate' data-i18n='" + dimension.i18n +
+          "' selected='selected' disabled>" + dimension.name +
+          "</option>";
+
+        // for every variantion of this dimension
+        for (j = 0; j < dimension.vars.length; j += 1) {
+          variation = dimension.vars[j];
+          dimensions += "<option class='translate' data-i18n='" +
+            variation.i18n + "' value='" + variation.name + "'>" +
+            variation.name + "</option>";
+          // TODO: bad, should not set subdimensions like this...
+          if (j === 0) {
+            sub_dimension = variation.variations.name;
+            sub_dimension_i18n = variation.variations.i18n;
+          }
+        }
+
+        dimensions += "</select>";
+
+        // TODO: handling of colors is crap. Should be another dimension, but
+        // this would be to difficult to associate now. Fix later.
+        // TODO: multiple dimensions should work both ways = user can pick a
+        // color and all available sizes are shown or user picks a size and
+        // all available colors are shown.
+        // TODO: change of selected color should also update gallery
+
+        // child dimension container
+        child = "<label for='dims_child' class='translate' data-i18n='" +
+          "item.select'>Select</label>" +
+          "<select name='dims_child' id='dims_child'>" +
+          "<option class='translate' data-i18n='" + sub_dimension_i18n +
+          "' selected='selected' disabled>" + sub_dimension + "</option></select>";
+      }
+
+      return str = content + dimensions + child +"</div>";
+    };
+
+    // TODO: show some thing
+    priv.generateError = function () {
+      return "<p>JIO ERROR</p>";
+    };
+
+    // generate content items?
+    priv.generateContentItems = function (name) {
+//       var i, j, item, img, str = "";
+// 
+//       item = priv.response.dimensions[0].vars[0];
+// 
+//       // find item name or default to first variant in dimension
+//       if (name !== undefined) {
+//         for (i = 0; i < priv.response.dimensions[0].vars.length; i += 1) {
+//           item = priv.response.dimensions[0].vars[i];
+//           if (item.name === name || location.hash === name) {
+//             break;
+//           }
+//         }
+//       }
+// 
+//       // for every variant (colors, size?, foo?)
+//       // TODO: declare a variant that carries images in products JSON!
+//       // build string
+//       for (j = 0; j < item.media.img.length; j += 1) {
+//         img = item.media.img[j];
+//         // TODO: add zoom/photoswipe later!
+//         str += "<li class='product_img'><a href='#'><img src='" + priv.response.media +
+//           img[shortcut] + size + "' alt='" + item.name + "' />" +
+//           "<h3 class='translate gallery_header' data-i18n='" +
+//           item.i18n + "'></h3></a></li>";
+//       }
+// 
+//       return str;
+    };
+
+    priv.swapSecondaryOptions = function (name, element) {
+//       var newString = priv.generateContentItems(name),
+//         // TODO: if thumbnails are a gallery option, it should be possible
+//         // to reference the gallery from the thumbnail without doing this:
+//         wrap = App.util.closest(element, ".gallery_thumbnails").previousSibling,
+//         gallery = wrap.getElementsByTagName("ul");
+// 
+//       $(gallery[0]).empty().append(newString).carousel("refresh");
+    };
+
+    // generate items to display
+    priv.generateItems = function (params) {
+      var markup, spec, response;
+        id = params.gadget.dom.attr('id').split("__").splice(-1)[0],
+        config = params.gadget.state[0][id]._config,
+        module = config.datasource.module,
+        urlPointer = params.pointer.length > 1,
+        jsonPointer = config.datasource.pointer;
+
+      // if we have a pointer-array passed, query that
+      // TODO: this access a globally stored current_item set by details gadget!
+      if (urlPointer) {
+        spec = {};
+        spec.storage = "items"
+        spec.method = "get"
+        spec.doc = {"_id": params.pointer[1]}
+      }
+
+      if (jsonPointer) {
+
+      }
+
+      // callback to generate gallery
+      spec.callback = function(err, response) {
+        if (err) {
+          str = priv.generateError();
+        } else {
+          str = priv.generateContent(response);
+        }
+
+        // TODO: this should not replace the whole gadget content
+        markup = params.source.replace(/<!-- dimensions_template -->/g, str);
+
+        // this is not response.callback(!!)
+        params.callback_mockup(markup);
+      };
+
+      if (urlPointer) {
+        // query for items
+        App[module].switchboard(spec);
+      }
+    }
+
+    // response object
+    that.data = source;
+    that.mockup = function (source, callback_mockup) {
+      var spec = {};
+
+      spec.gadget = RenderJs.getSelfGadget();
+      spec.page = App.util.closest(spec.gadget.dom.get(0), "div[data-role='page']");
+      spec.pageId = "#" + spec.page.id;
+      // TODO: retrieving pointers should be a generic method that retrieves
+      // pointers either from the URL or from a JSON config object passed!
+      spec.pointer = location.search.split("=");
+      spec.callback_mockup = callback_mockup;
+      spec.source = source;
+
+      // TODO: remove to separate function
+      if (!spec.page.getAttribute("events_items")) {
+        spec.page.setAttribute("events_items", true);
+
+        $(document).on("pagebeforeshow.items", spec.pageId, function (e) {
+          // the pointer in the URL may be updated
+          if (location.search) {
+            spec.pointer = location.search.split("=");
+          }
+          priv.generateItems(spec, true);
+        })
+        .on("change.item", spec.pageId + " .main_dimension", function (e) {
+//           var target = e.target,
+//             color;
+// 
+//           if (e.target.tagName === "A") {
+//             color = target.href.split("#")[1];
+//           } else {
+//             color = App.util.closest(target, "a").href.split("#")[1];
+//           }
+//           priv.swapSecondaryOptions(color, e.target);
+        });
+        // and run intial
+        priv.generateItems(spec);
+      }
+    };
+
+    that.callback = function (self) {
       if (App === undefined) {
         def = new $.Deferred;
 
         def.done(function(gadget) {
           // prefix instance-ids, pass JSON
-          App.renderGadgets(gadget);
+          App.renderGadgets(gadget, true);
         });
 
         window.fallbackLoader.deferreds.push(def);
         window.fallbackLoader.args.push(self);
       } else {
         // prefix instance-ids, pass JSON
-        App.renderGadgets(self);
+        App.renderGadgets(self, true);
       }
     };
 
   // return response object
-  return response;
+  return that;
   }
 );