script.js

"use strict";
var log = function(msg) {
  console.log(msg);
};

var SelectWidget = {},
  App = {},
  path = [],
  data = {
    phone: {
      apple: {
        "IPHONE 7 PLUS": {
          "8GB": {
            verizon: {
              new: {},
              used: {}
            }
          },
          "16GB": {
            verizon: {
              new: {},
              used: {}
            }
          },
          "256GB": {
            verizon: {
              new: {},
              used: {}
            }
          }
        },
        "IPHONE 7": {
          "8GB": {
            verizon: {
              new: {},
              used: {}
            }
          },
          "16GB": {
            verizon: {
              new: {},
              used: {}
            }
          },
          "256GB": {
            verizon: {
              new: {},
              used: {}
            }
          }
        }
      },
      samsung: {
        "GALAXY tab": {
          "8GB": {
            verizon: {
              new: {},
              used: {}
            }
          },
          "16GB": {
            verizon: {
              new: {},
              used: {}
            }
          },
          "256GB": {
            verizon: {
              new: {},
              used: {}
            }
          }
        }
      }
    },
    tablet: {
      samsung: {
        "GALAXY tab": {
          verizon: {
            new: {},
            used: {}
          }
        }
      },
      nexus: {
        "nexus 9": {
          "256GB": {
            verizon: {
              new: {}
            }
          }
        },
        "nexus 10": {
          "256GB": {
            verizon: {
              new: {}
            }
          }
        }
      }
    }
  };

new function(S) {
  S.onSelect = function(e) {
    var idx = Number(e.target.id.match(/\d/)[0]);
    path[idx] = e.target.value;
    path = path.slice(0, Number(idx + 1));
    m.redraw("diff");
    log(JSON.stringify(path));
  };
}((SelectWidget = {}));

SelectWidget.view = function(vnode) {
  var attrs = vnode.attrs;
  return m("div", { style: "margin: 5px" }, [
    m(
      "select",
      {
        id: attrs.id,
        disabled: attrs.disabled,
        selectedIndex: attrs.selected ? attrs.selected : 0,
        onchange: SelectWidget.onSelect
      },
      m("option", { value: "", selected: true }, ""),
      attrs.data.map(function(el, i) {
        return attrs.selected
          ? m(
              "option[value='" + el + "']",
              { selected: true },
              el.toLocaleUpperCase()
            )
          : m("option[value='" + el + "']", el.toLocaleUpperCase());
      })
    )
  ]);
};

var getIn = (m, ks, notFound) => {
  try {
    return (
      ks.reduce((m, currentValue) => {
        return (m = m[currentValue]);
      }, m) || notFound
    );
  } catch (err) {
    return notFound;
  }
};

var getData = (arr, idx) => {
  if (!arr) {
    return [];
  }
  return arr.slice(0, idx + 1);
};

var getSelectedIndex = idx => {
  var obj = [],
    i = 0,
    d = data;
  for (; i < idx; i++) {
    obj = d[path[i]];
    d = obj;
  }
  return Object.keys(d).indexOf(path[idx]) + 1;
};

App.view = vnode => {
  return m("div", [
    m("img[style='height: 200px; margin: 0px 30px;']", { src: "iphone.jpeg" }),
    m("div[style='display: inline-block;']", [
      m(SelectWidget, {
        id: "wigdet0",
        data: Object.keys(getIn(data, [])),
        selected: path[0] ? getSelectedIndex(0) : 0
      }),
      m(SelectWidget, {
        id: "wigdet1",
        data: Object.keys(getIn(data, getData(path, 0))),
        disabled: path.length < 1 ? true : false,
        selected: path[1] ? getSelectedIndex(1) : 0
      }),
      m(SelectWidget, {
        id: "wigdet2",
        data: Object.keys(getIn(data, getData(path, 1))),
        disabled: path.length < 2 ? true : false,
        selected: path[2] ? getSelectedIndex(2) : 0
      }),
      m(SelectWidget, {
        id: "wigdet3",
        data: Object.keys(getIn(data, getData(path, 2))),
        disabled: path.length < 3 ? true : false,
        selected: path[3] ? getSelectedIndex(3) : 0
      }),
      m(SelectWidget, {
        id: "wigdet4",
        data: Object.keys(getIn(data, getData(path, 3))),
        disabled: path.length < 4 ? true : false,
        selected: path[4] ? getSelectedIndex(4) : 0
      }),
      m(SelectWidget, {
        id: "wigdet5",
        data: Object.keys(getIn(data, getData(path, 4))),
        disabled: path.length < 5 ? true : false,
        selected: path[5] ? getSelectedIndex(5) : 0
      })
    ])
  ]);
};

m.mount(root, App);