Skip to content

Commit

Permalink
Updates configurator experiment
Browse files Browse the repository at this point in the history 
* fixes UI
* removes Backbone and build step
* adds info and links
  • Loading branch information
@mauricesvay
mauricesvay committed Apr 10, 2018
1 parent 9e899e2 commit 39e9193
Show file tree
Hide file tree
Showing 19 changed files with 284 additions and 14,796 deletions.
252 changes: 207 additions & 45 deletions configurator/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,220 @@
<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Sketchfab Viewer Configurator</title>
<link rel="stylesheet" type="text/css" href="style/app.1.0.1.css">
<link rel="stylesheet" href="../styles/sketchfab.css" media="screen">
<link rel="stylesheet" type="text/css" href="style/app.css">

<script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.1.0.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-22680456-16', 'auto');
ga('send', 'pageview');
ga('create', 'UA-22680456-16', 'auto');
ga('send', 'pageview');
</script>
</head>

<body>
<div class="about">
This experiment was made with the Sketchfab Viewer API.
<a href="https://github.com/sketchfab/experiments/tree/master/configurator/src">Source on Github</a>

<div class="share-button">
<!-- Facebook -->
<div class="fb-share-button" data-href="https://labs.sketchfab.com/experiments/configurator/" data-layout="button"></div>
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Sketchfab" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<header class="header">
<h1 class="header--logo">
<a href="../">
<img src="../assets/sketchfab-logo.svg" alt="Sketchfab" width="120" class="header--image">
<span>Labs Experiments</span>
</a>
</h1>
</header>

<div class="app">
<div class="panel">
<div class="viewer">
<iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="640" height="480"></iframe>
<form class="options"></form>
</div>
<div class="sidebar">
<p>This is an example of a 3D product configurator made with the Sketchfab Viewer API in JavaScript.</p>
<ul>
<li>
<a href="https://github.com/sketchfab/experiments/tree/master/configurator">Source code</a>
</li>
<li>
<a href="https://sketchfab.com/developers/viewer">API documentation</a>
</li>
</ul>
</div>
</div>
</div>
</div>

<iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="640" height="480"></iframe>

<ul class="options"></ul>
<div class="select"></div>

<script type="text/javascript" src="js/vendors/sketchfab-viewer-1.0.0.js"></script>
<script type="text/javascript" src="js/app.1.0.1.js"></script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-22680456-16', 'auto');
ga('send', 'pageview');
</script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var iframe = document.getElementById('api-frame');
var url = getParameterByName('urlid');
var prefix = getParameterByName('prefix');
var DEFAULT_URLID = 'c632823b6c204797bd9b95dbd9f53a06';
var DEFAULT_PREFIX = 'seat ';
var CONFIG = {
urlid: url !== '' ? url : DEFAULT_URLID,
prefix: prefix !== '' ? prefix : DEFAULT_PREFIX
};

var Configurator = {
api: null,
config: null,
options: [],

/**
* Initialize viewer
*/
init: function (config, iframe) {
this.config = config;
var client = new Sketchfab(iframe);
client.init(config.urlid, {
ui_infos: 0,
ui_controls: 0,
graph_optimizer: 0,
success: function onSuccess(api) {
api.start();
api.addEventListener('viewerready', function () {
this.api = api;
this.initializeOptions(function () {
console.log('Found the following options:', this.options);
this.selectOption(0);
UI.init(this.config, this.options);
}.bind(this));
}.bind(this));
}.bind(this),
error: function onError() {
console.log('Viewer error');
}
});
},

/**
* Initialize options from scene
*/
initializeOptions: function initializeOptions(callback) {
this.api.getNodeMap(function (err, nodes) {
if (err) {
console.error(err);
return;
}
var node;
var isOptionObject = false;
var keys = Object.keys(nodes);
for (var i = 0; i < keys.length; i++) {
node = nodes[keys[i]];
isOptionObject = node.name &&
node.name.indexOf(this.config.prefix) !== -1 &&
(node.type === 'Geometry' || node.type === 'Group');
if (isOptionObject) {
this.options.push({
id: node.instanceID,
name: node.name,
selected: false
});
}
}
callback();
}.bind(this));
},

/**
* Select option to show
*/
selectOption: function selectOption(index) {
var options = this.options;
for (var i = 0, l = options.length; i < l; i++) {
if (i === index) {
options[i].selected = true;
this.api.show(options[i].id);
} else {
options[i].selected = false;
this.api.hide(options[i].id);
}
}
}
}

var UI = {
config: null,
options: null,
init: function init(config, options) {
this.config = config;
this.options = options;
this.el = document.querySelector('.options');
this.render();
this.el.addEventListener('change', function (e) {
e.preventDefault();
var index = parseInt(this.el.elements['color'].value, 10);
this.select(index);
}.bind(this));
},

select: function (index) {
Configurator.selectOption(parseInt(index, 10));
this.render();
},

render: function () {
if (this.config.urlid === DEFAULT_URLID) {
this.renderRadio();
} else {
this.renderSelect();
}
},

/**
* Render options as multiple `<input type="radio">`
*/
renderRadio: function render() {
var html = this.options.map(function (option, i) {
var checkedState = option.selected ? 'checked="checked"' : '';
var className = option.name.replace(this.config.prefix, '');
return [
'<label class="options__option">',
'<input type="radio" name="color" value="' + i + '" ' + checkedState + '>',
'<span class="' + className + '">' + option.name + '</span>',
'</label>'
].join('');
}.bind(this)).join('');
this.el.innerHTML = html;
},

/**
* Render option as `<select>`
*/
renderSelect: function () {
var html = this.options.map(function (option, i) {
var checkedState = option.selected ? 'selected="selected"' : '';
return [
'<option value="' + i + '" ' + checkedState + '>',
option.name,
'</option>',
].join('');
}).join('');
this.el.innerHTML = '<select name="color">' + html + '</select>';
}
}

Configurator.init(CONFIG, iframe);
</script>
</body>
</html>

</html>
Loading

0 comments on commit 39e9193

Please sign in to comment.