/SLAcer.js

Permalink
Browse files

sortable sidebar panels

  • Loading branch information...
1 parent 8f5a174 commit 661115531c300389927d8335a5c4753e90f040ef @lautr3k committed Mar 18, 2016
Unified Split
Showing with 98 additions and 22 deletions.
  1. +7 −1 css/main.css
  2. +8 −6 index.html
  3. +69 −15 js/main.js
  4. +7 −0 vendor/jquery-ui/jquery-ui.min.css
  5. +7 −0 vendor/jquery-ui/jquery-ui.min.js
View
8 css/main.css
@@ -17,11 +17,17 @@
border-right: 1px solid #eeeeee;
}
+#sidebar .panel-placeholder {
+ margin-bottom: 20px;
+ border-radius: 4px;
+ background-color: #eeeeee;
+ border: 1px dashed #cccccc;
+}
+
#sidebar .panel-body {
padding-bottom: 0;
}
-
#sidebar .info {
margin-bottom: 10px;
}
View
14 index.html
@@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SLAcer.js (bêta)</title>
+ <link rel="stylesheet" type="text/css" href="vendor/jquery-ui/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/bootstrap-slider/css/bootstrap-slider.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
@@ -24,7 +25,7 @@
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
- <li><a href="#">GitHub</a></li>
+ <li><a href="https://github.com/lautr3k/SLAcer.js" target="_blank">GitHub</a></li>
</ul>
</div>
</div>
@@ -34,7 +35,7 @@
<div id="file" class="panel panel-default">
<div class="panel-heading">
- <button class="btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#file-body">
+ <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#file-body">
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">File</h3>
@@ -51,7 +52,7 @@ <h3 class="panel-title">File</h3>
<div id="mesh" class="panel panel-default">
<div class="panel-heading">
- <button class="btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#mesh-body">
+ <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#mesh-body">
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Mesh</h3>
@@ -74,7 +75,7 @@ <h3 class="panel-title">Mesh</h3>
<div id="build-volume" class="panel panel-default">
<div class="panel-heading">
- <button class="btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#build-volume-body">
+ <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#build-volume-body">
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Build volume</h3>
@@ -102,7 +103,7 @@ <h3 class="panel-title">Build volume</h3>
<div id="resin" class="panel panel-default">
<div class="panel-heading">
- <button class="btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#resin-body">
+ <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#resin-body">
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Resin</h3>
@@ -121,7 +122,7 @@ <h3 class="panel-title">Resin</h3>
<div id="screen" class="panel panel-default">
<div class="panel-heading">
- <button class="btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#screen-body">
+ <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#screen-body">
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Screen</h3>
@@ -168,6 +169,7 @@ <h3 class="panel-title">Screen</h3>
</div><!-- .body -->
<script src="vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
+ <script src="vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap-slider/bootstrap-slider.min.js" type="text/javascript"></script>
<script src="vendor/lodash.min.js" type="text/javascript"></script>
View
84 js/main.js
@@ -7,28 +7,43 @@ var settings = new SLAcer.Settings({
unit : 'mm', // mm or in
color : 0xcccccc,
opacity : 0.1,
- collapsed: false
+ panel : {
+ collapsed: false,
+ position : 2
+ }
},
resin: {
density : 1.1, // g/cm3
price : 50, // $
- collapsed: false
- },
- viewer3d: {
- color: 0xffffff
+ panel : {
+ collapsed: false,
+ position : 3
+ }
},
mesh: {
- color : 0x333333,
- collapsed: false
+ color: 0x333333,
+ panel: {
+ collapsed: false,
+ position : 1
+ }
},
screen: {
width : 1680,
height : 1050,
diagonal : { size: 22, unit: 'in' },
- collapsed: false
+ panel : {
+ collapsed: false,
+ position : 4
+ }
},
file: {
- collapsed: false
+ panel: {
+ collapsed: false,
+ position : 0
+ }
+ },
+ viewer3d: {
+ color: 0xffffff
}
});
@@ -67,21 +82,57 @@ $sliderInput.slider({ reversed : true }).on('change', function(e) {
var $sliderElement = $('#slider .slider');
+
+// Sidebar
+var $sidebar = $('#sidebar');
+var $panels = $sidebar.find('.panel');
+
+$sidebar.sortable({
+ axis : 'y',
+ handle : '.panel-heading',
+ cancel : '.panel-toggle',
+ placeholder: 'panel-placeholder', forcePlaceholderSize: true,
+ // update panel position
+ stop: function(e, ui) {
+ $sidebar.find('.panel').each(function(i, element) {
+ settings.set(_.camelCase(element.id) + '.panel.position', i);
+ });
+ }
+});
+
+// Sort panels
+var panels = [];
+var panel;
+
+for (var namespace in settings.settings) {
+ panel = settings.settings[namespace].panel;
+ if (panel) {
+ panels[panel.position] = {
+ name : namespace,
+ panel: panel
+ };
+ }
+}
+
+for (var i in panels) {
+ $sidebar.append($('#' + _.kebabCase(panels[i].name)));
+}
+
// Init panel
function initPanel(name) {
var id = _.kebabCase(name);
var name = _.camelCase(name);
var $body = $('#' + id + '-body');
$body.on('hidden.bs.collapse', function () {
- settings.set(name + '.collapsed', true);
+ settings.set(name + '.panel.collapsed', true);
});
$body.on('shown.bs.collapse', function () {
- settings.set(name + '.collapsed', false);
+ settings.set(name + '.panel.collapsed', false);
});
- if (settings.get(name + '.collapsed')) {
+ if (settings.get(name + '.panel.collapsed')) {
$body.collapse('hide');
}
@@ -255,14 +306,17 @@ loader.onError = errorHandler;
// load example
// -----------------------------------------------------------------------------
// example STL file
-var stl = '/stl/Octocat-v2.stl';
-//var stl = '/stl/StressTest.stl';
+var stl = 'stl/Octocat-v2.stl';
+//var stl = 'stl/StressTest.stl';
+
+// File url
+var url = 'http://' + window.location.hostname + window.location.pathname + stl;
// Create http request object
var xmlhttp = new XMLHttpRequest();
// Get the file contents
-xmlhttp.open("GET", window.location + stl);
+xmlhttp.open("GET", url);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
Oops, something went wrong.

0 comments on commit 6611155

Please sign in to comment.