<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="panel panel-primary draggable-panel toolbar-panel ui-draggable ui-resizable" id="toolbox-tools">
<div class="panel-heading lang-panel-header-tools">Tools <i class="fa fa-times pull-right close-panel" id="close-toolbox-tools"></i><i class="fa pull-right fa-chevron-down" id="toggle-toolbox-tools"></i></div>
<ul id="sortable" class="ui-sortable">
<li class="btn-group draggable-group ui-state-default" id="group-file">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_empty" data-toggle="tooltip" data-placement="bottom" title="Empty (e)"><i class="fa fa-file-text-o "></i></button>
<button class="btn btn-primary btn-md" id="btn_svgOpen" data-toggle="tooltip" data-placement="bottom" title="Open (Alt+o)"><i class="fa fa-upload "></i></button>
<button class="btn btn-primary btn-md" id="btn_svgSave" data-toggle="tooltip" data-placement="bottom" title="Save (Alt+s)"><i class="fa fa-download "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-toggle-lanes">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_1_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 1 lane displayed of the selected parts (1)"><i class="fa fa-minus"></i></button>
<button class="btn btn-primary btn-md" id="btn_2_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 2 lanes displayed of the selected parts (2)"><i class="fa fa-align-justify lanes_2"></i></button>
<button class="btn btn-primary btn-md" id="btn_3_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 3 lanes displayed of the selected parts (3)"><i class="fa fa-reorder "></i></button>
<button class="btn btn-primary btn-md" id="btn_4_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 4 lanes displayed of the selected parts (4)"><i class="fa fa-align-justify "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-part-sequence">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_part_sequence_minus" data-toggle="tooltip" data-placement="bottom" title="Decrement part sequence number (Alt+-)"><i class="fa fa-minus"></i><i class="fa fa-sort-numeric-asc"></i></button>
<button class="btn btn-primary btn-md" id="btn_part_sequence_plus" data-toggle="tooltip" data-placement="bottom" title="Increment part sequence number (Alt++)"><i class="fa fa-plus"></i><i class="fa fa-sort-numeric-asc"></i></button>
<button class="btn btn-primary btn-md" id="btn_part_sequence_remove" data-toggle="tooltip" data-placement="bottom" title="Remove part sequence number (Alt+Del)"><i class="fa fa-times"></i><i class="fa fa-sort-numeric-asc"></i></button>
<button class="btn btn-primary btn-md" id="btn_swap_peg_sequences" data-toggle="tooltip" data-placement="bottom" title="Swap peg sequence numbers (Alt+p)"><i class="fa fa-exchange fa-rotate-90"></i></button>
<button class="btn btn-primary btn-md" id="btn_swap_lanes" data-toggle="tooltip" data-placement="bottom" title="Swap Lane Hole Numbers (Alt+l)"><i class="fa fa-exchange"></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-part-select">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_part_select_prev" data-toggle="tooltip" data-placement="bottom" title="Select the previous part (Alt+Ctrl+p)"><i class="fa fa-hand-o-left"></i></button>
<button class="btn btn-primary btn-md" id="btn_part_select_next" data-toggle="tooltip" data-placement="bottom" title="Select the next part (Alt+Ctrl+n)"><i class="fa fa-hand-o-right"></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-parts">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_addpart" data-toggle="tooltip" data-placement="bottom" title="Add the selecte part to the design (Ctrl+insert)"><i class="fa fa-plus "></i></button>
<button class="btn btn-primary btn-md" id="btn_upload_image" data-toggle="tooltip" data-placement="bottom" title="Upload an image (Alt+Shift+I)"><i class="fa fa-upload "><i class="fa fa-photo" style="margin: 0 3px;"></i></i></button>
<button class="btn btn-primary btn-md" id="btn_add_text" data-toggle="tooltip" data-placement="bottom" title="Add Text (Alt+Shift+T)"><i class="fa fa-text-width"></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-edit">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_copy" data-toggle="tooltip" data-placement="bottom" title="Copy the selected parts (c)"><i class="fa fa-paste"></i><i class="fa fa-caret-left"></i></button>
<button class="btn btn-primary btn-md" id="btn_paste" data-toggle="tooltip" data-placement="bottom" title="Paste the copied parts (p)"><i class="fa fa-paste"></i><i class="fa fa-caret-right"></i></button>
<button class="btn btn-primary btn-md" id="btn_clone" data-toggle="tooltip" data-placement="bottom" title="Clone the selected parts (d)"><i class="fa fa-copy "></i></button>
<button class="btn btn-primary btn-md" id="btn_delpart" data-toggle="tooltip" data-placement="bottom" title="Delete the selected parts (del)"><i class="fa fa-times "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-grouping">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_group" data-toggle="tooltip" data-placement="bottom" title="Group the selected parts (g)"><i class="fa fa-compress "></i></button>
<button class="btn btn-primary btn-md" id="btn_ungroup" data-toggle="tooltip" data-placement="bottom" title="Ungroup the selected groups (Shift+g)"><i class="fa fa-expand "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-flip-mirror">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_flipUp" data-toggle="tooltip" data-placement="bottom" title="Flip the selected parts (f)"><i class="fa fa-arrows-v"></i></button>
<button class="btn btn-primary btn-md" id="btn_mirrorLeft" data-toggle="tooltip" data-placement="bottom" title="Mirror the selected parts (m)"><i class="fa fa-arrows-h"></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-rotate">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_rotateLeft" data-placement="bottom" title="Rotate the selected parts left (l)"><i class="fa fa-rotate-left "></i></button>
<button class="btn btn-primary btn-md" id="btn_rotateRight" data-toggle="tooltip" data-placement="bottom" title="Rotate the selected parts right (r)"><i class="fa fa-rotate-right "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-select">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_selectAll" data-placement="bottom" title="Selected all of the parts (a)"><i class="fa fa-check-square-o "></i></button>
<button class="btn btn-primary btn-md" id="btn_selectNone" data-placement="bottom" title="Unselectd all the of parts (n)"><i class="fa fa-square-o "></i></button>
<button class="btn btn-primary btn-md" id="btn_toggleSelection" data-placement="bottom" title="Toggle selection of the parts (i)"><i class="fa fa-check-square "></i></button>
<button class="btn btn-primary btn-md" id="btn_select_similar" data-placement="bottom" title="Select similar parts (s)"><i class="fa fa-check-circle "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-move">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_moveUp" data-placement="bottom" title="Move the selected parts up (up)"><i class="fa fa-long-arrow-up "></i></button>
<button class="btn btn-primary btn-md" id="btn_moveDown" data-placement="bottom" title="Move the selected parts down (down)"><i class="fa fa-long-arrow-down "></i></button>
<button class="btn btn-primary btn-md" id="btn_moveLeft" data-placement="bottom" title="Move the selected parts left (left)"><i class="fa fa-long-arrow-left "></i></button>
<button class="btn btn-primary btn-md" id="btn_moveRight" data-placement="bottom" title="Move the selected parts right (right)"><i class="fa fa-long-arrow-right "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-zoom">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_zoomOut" data-placement="bottom" title="Zoom out (-)"><i class="fa fa-search-minus "></i></button>
<button class="btn btn-primary btn-md" id="btn_zoomReset" data-placement="bottom" title="Reset zoom (0)"><i class="fa fa-refresh "></i></button>
<button class="btn btn-primary btn-md" id="btn_zoomIn" data-placement="bottom" title="Zoom in (+)"><i class="fa fa-search-plus "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-misc">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_dimensions" data-toggle="tooltip" data-placement="bottom" title="Calculate design dimensions (Alt+Shift+M)"><i class="fa fa-sort-amount-asc"></i></button>
<button class="btn btn-primary btn-md" id="btn_toggleGrid" data-toggle="tooltip" data-placement="bottom" title="Toggle display of the grid (Alt+Shift+G)"><i class="fa fa-th-large "></i></button>
<button class="btn btn-primary btn-md" id="btn_toggle_properties" data-toggle="tooltip" data-placement="bottom" title="Toggle display of the Part Properties panel (Alt+Shift+P)"><i class="fa fa-list"></i></button>
<button class="btn btn-primary btn-md" id="btn_toggle_selection_mode" data-toggle="tooltip" data-placement="bottom" title="Toggle selection mode (Currently Multiple) (Alt+Shift+S)"><i class="fa fa-plus-square-o"></i></button>
<button class="btn btn-primary btn-md" id="btn_replace_parts" data-toggle="tooltip" data-placement="bottom" title="Update selected parts to newest versions (Alt+Shift+U)"><i class="fa fa-delicious"></i></button>
</li>
</ul>
</div>
#toolbox-tools {
width: 660px;
height: 160px;
overflow: hidden;
}
.group-handle {
height: 34px;
width: 10px;
cursor: move;
}
.panel-heading {
cursor: move;
}
.draggable-group {
float: left;
}
#sortable {
padding: 0px;
}
#sort-holder {
display: none;
}
#toggle-toolbox-tools {
cursor: pointer;
}
#close-toolbox-tools {
cursor: pointer;
}
.toggle-button-group {
cursor: pointer;
}
.draggable-group {
overflow: hidden;
}
.minimized {
width: 12px;
height: 36px;
}
$(document).ready(function() {
// Add drag and resize option to panel
$("#toolbox-tools").draggable({
handle: ".panel-heading",
stop: function(evt, el) {
// Save size and position in cookie
/*
$.cookie($(evt.target).attr("id"), JSON.stringify({
"el": $(evt.target).attr("id"),
"left": el.position.left,
"top": el.position.top,
"width": $(evt.target).width(),
"height": $(evt.target).height()
}));
*/
}
}).resizable({
handles: "e, w, s, se",
stop: function(evt, el) {
// Save size and position in cookie
/*
$.cookie($(evt.target).attr("id"), JSON.stringify({
"el": $(evt.target).attr("id"),
"left": el.position.left,
"top": el.position.top,
"width": el.size.width,
"height": el.size.height
}));
*/
}
});
// Expand and collaps the toolbar
$("#toggle-toolbox-tools").on("click", function() {
var panel = $("#toolbox-tools");
if ($(panel).data("org-height") == undefined) {
$(panel).data("org-height", $(panel).css("height"));
$(panel).css("height","41px");
} else {
$(panel).css("height", $(panel).data("org-height"));
$(panel).removeData("org-height");
}
$(this).toggleClass('fa-chevron-down').toggleClass('fa-chevron-right');
});
// Make toolbar groups sortable
$( "#sortable" ).sortable({
stop: function (event, ui) {
var ids = [];
$.each($(".draggable-group"), function(idx, grp) {
ids.push($(grp).attr("id"));
});
// Save order of groups in cookie
//$.cookie("group_order", ids.join());
}
});
$( "#sortable" ).disableSelection();
// Make Tools panel group minimizable
$.each($(".draggable-group"), function(idx, grp) {
var tb = $(grp).find(".toggle-button-group");
$(tb).on("click", function() {
$(grp).toggleClass("minimized");
$(this).toggleClass("fa-caret-down").toggleClass("fa-caret-up");
// Save draggable groups to cookie (frue = Minimized, false = Not Minimized)
var ids = [];
$.each($(".draggable-group"), function(iidx, igrp) {
var itb = $(igrp).find(".toggle-button-group");
var min = $(igrp).hasClass("minimized");
ids.push($(igrp).attr("id") + "=" + min);
});
$.cookie("group_order", ids.join());
});
});
// Close thr panel
$(".close-panel").on("click", function() {
$(this).parent().parent().hide();
});
// Add Tooltips
$('button').tooltip();
$('.toggle-button-group').tooltip();
});
