marketing demonstration

shows usage of all scripts together to build a (rudimentary) application

by veeuze

HTML

<script src="https://integrate.materialo.com/v2.0/js/vendor/XMLDisplay.js"></script>
<link rel="stylesheet" href="https://integrate.materialo.com/v2.0/css/vendor/XMLDisplay.css">
<div id="output">
  <div id="title" class="v">
    This is the demonstration: <br />
  </div>
  <div id="mode_div" class="v">
    <form id="choices_form" action="" method="get"></form>
  </div>
  <div id="extinfo_div" class="v furniture">
    <form id="extinfo_form" action="" method="get"></form>
  </div>
  <div id="scenes" class="v"></div>
  <div id="objects" class="v"></div>
  <div id="searchvals_div" class="v">
    <form id="searchvals_form" action="" method="get"></form>
  </div>
  <div id="materials" class="v"></div>
  <div id="result" class="v">
    <div id="mat_detail"></div>
    <div id="render"></div>
  </div>
</div>
<div id="scriptname">
  These are the scripts being called: <br />
</div>
<a id="to_top" href="#mode_div">Up to top</a>

CSS

@CHARSET "UTF-8";
body {
  /*   white-space: pre; */
  font-family: monospace;
  background-color: #fff;
}

#output {
  background-color: #fff;
  padding: 10px;
  position: relative;
}

#output>div {
  display: none;
  opacity: 0;
}

#output>#title,
#output>#mode_div {
  display: block;
  opacity: 1;
}

#scriptname {
  /* 	position: relative; */
  /* 	display: inline-block; */
  background-color: rgb(215, 215, 215);
  margin: 0px 10px 0px 10px;
  border: 1px solid grey;
  padding: 10px;
  overflow-wrap: break-word;
}

iframe {
  width: 100%;
  height: 500px;
  border: none;
}

.sceneimg {
  margin: 5px;
}

.sceneimg,
.objimg,
.matimg {
  border: 2px solid #fff;
  cursor: pointer;
  background-color: #ce8f34;
}

.sceneimg.act,
.objimg.act,
.matimg.act {
  border: 2px solid #ce8f34;
}

#title {
  display: block;
  opacity: 1;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  width: 50%;
  margin: 0px auto 0px auto;
  background-color: rgb(215, 215, 215);
  border: 1px solid grey;
  border-bottom: none;
}

#mode_div,
#scenes,
#objects,
#materials,
#mat_detail,
#extinfo_div,
#searchvals_div {
  text-align: center;
  padding: 30px;
  border: 1px solid grey;
  border-top: none;
}

#mode_div pre,
#scenes pre,
#objects pre,
#materials pre,
#extinfo_div pre,
#searchvals_div pre {
  font-size: 17px;
}

#mat_detail {
  text-align: left;
  vertical-align: top;
  display: inline-block;
  opacity: 1;
  height: 343px;
  width: calc(50% - 67px);
}

#mode_div {
  border: 1px solid grey;
  display: block;
  opacity: 1;
}

#modi,
#size,
#brand,
#range,
#color {
  height: 25px;
  width: 120px;
  background-color: rgba(115, 115, 115, 1);
  color: #fff;
  font-size: 15px;
}

#size,
#brand,
#range {
  display: block;
  margin: 30px auto 30px auto;
}

#render {
  padding: 20px;
  position: absolute;
  border: 1px solid grey;
  width: calc(50% - 46px);
  border-left: none;
  border-top: none;
  display: inline-block;
  overflow: hidden;
...

JavaScript

/**
 * 
 */
var cnf = 'integrate-demo';
var current_sid = -1;
var current_mid = -1;
var current_onam = '';
var skeys = 'category_master';
var svals = 'interior_private';
var current_mode = '';

function init() {
  var v_cnt = 0;
  $('.v').each(function() {
    $(this).addClass('v_' + v_cnt);
    v_cnt++;
  });
  //mode = "room",
  //get_scenes(skeys, svals);
  choose_demonstration();
}

function choose_demonstration() {
  $('#choices_form').parent().prepend(
    '<pre>Please choose a modus: </pre><br/>');
  var select_cnt = 0;
  var choices = {
    modi: ['', 'room', 'furniture']
  };
  $.each(choices, function(k, v) {
    $('#choices_form').append($('<select>', {
      name: k,
      id: k
    }));
    select_cnt++;
  });

  $.each(choices, function(k, v) {
    for (var i = 0; i < v.length; i++) {
      v.sort();
      $('#' + k).append($('<option>', {
        value: v[i],
        text: v[i]
      }));
    }
  });
  $('#choices_form select').off('change').on(
    'change',
    function() {
      close_further_elem(this);
      $('#scriptname').html(
        '<b>These are the scripts being called: </b></br>');
      $('#choices_form').submit();
    });
  $('#choices_form').off('submit').on('submit', function(e) {
    e.preventDefault();
    var mkeys = '';
    var mvals = '';
    for (var i = 0; i < select_cnt; i++) {
      if (i > 0) {
        mkeys += ';';
        mvals += ';';
      }
      mkeys += 'choices_' + $('#choices_form select')[i].name;
      mvals += encodeURIComponent($($('#choices_form select')[i]).val());
    }
    mode = mvals;
    switch (mode) {
      case 'room':
        get_scenes(skeys, svals);
        break;
      case 'furniture':
      //debugger;
        get_scenes_extinfo();
        break;
    }

  });
}

function get_scenes_extinfo() {
  animate_open('#extinfo_div');
  var extinfo = {};
  var extname = [];
  var get_datalist_scenes_extinfo = "https://integrate.materialo.com/v2.1/get_datalist_scenes_extinfo.php?cnf=" +
    cnf;
 ...