Skip to content

/SLAcer.js

Permalink
Browse files

sortable sidebar panels

  • Loading branch information...
@lautr3k
lautr3k committed Mar 18, 2016
1 parent 8f5a174 commit 661115531c300389927d8335a5c4753e90f040ef
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
8 css/main.css
View file
@@ -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;
}
14 index.html
View file
@@ -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>
84 js/main.js
View file
@@ -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) {

0 comments on commit 6611155

Please sign in to comment.
You can’t perform that action at this time.