Skip to content

Instantly share code, notes, and snippets.

@pthaden

pthaden/dashboard.html

Created December 8, 2016 23:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pthaden/78825aca766280ea18c7e53d674c19f7 to your computer and use it in GitHub Desktop.
Save pthaden/78825aca766280ea18c7e53d674c19f7 to your computer and use it in GitHub Desktop.
Download ZIP
JET v2.2.0 viewModel and view rewritten from DragNDrop cookbook to work with Yeoman NavDrawer template
Raw
dashboard.html
<div style="float:left;">
<fieldset style="border:1px #b0b0b0 solid; min-width:240px; min-height:450px;">
<legend style="border:1px #b0b0b0 solid; margin-left: 1em; padding:0.2em 0.8em">Drag Sources</legend>
<div>
<div id="dragdiv1" draggable="true" style="background:#f3a0bf; float:left; width:50px; height:30px; border:1px solid rgb(176,76,176); cursor:pointer; margin:15px 11px 10px; text-align:center; vertical-align:middle;line-height:30px;">Tools</div>
<div id="dragdiv2" draggable="true" style="background:#f3a0bf; float:left; width:50px; height:30px; border:1px solid rgb(176,76,176); cursor:pointer; margin:15px 11px 10px; text-align:center; vertical-align:middle;line-height:30px;">Apps</div>
<div id="dragdiv3" draggable="true" style="background:#f3a0bf; float:left; width:50px; height:30px; border:1px solid rgb(176,76,176); cursor:pointer; margin:15px 11px 10px; text-align:center; vertical-align:middle;line-height:30px;">Logs</div>
</div>
<div style="float:left;">
<div id="tree1" style="margin-top:20px; padding-top:10px;width:200px; height:320px; zmin-height:320px; zmargin-left:5px; overflow:auto"
data-bind="ojComponent:
{
component: 'ojTree',
selectionMode: 'multiple',
data:{data: getJson},
dnd: {
drag: {
node: {
dataTypes: ['application/ojtreenodes+json'],
dragEnd: dragEnd
}
}
}
}"/>
</div>
</fieldset>
</div>
<div style="float:left;margin-left:20px;">
<fieldset style="border:1px #b0b0b0 solid;">
<legend style="border:1px #b0b0b0 solid; margin-left: 1em; padding:0.2em 0.8em">Drop Target</legend>
<div id="tree2" style="padding-top:10px;width:200px; height:420px; overflow:auto;"
data-bind="ojComponent:
{
component: 'ojTree',
selectionMode: 'multiple',
data:{data: getJson},
dnd: {
drop: {
node: {
dataTypes: ['application/ojtreenodes+json',
'dragdiv/text'],
drop: drop
}
}
}
}"/>
</fieldset>
</div>
<div style="clear:both" ></div>
<p/>
Raw
dashboard.js
/*
* Your dashboard ViewModel code goes here
*/
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojtree'],
function (oj, ko, $) {
function DashboardModel(id)
{
var self = this;
function treeModel(id)
{
self.id = id;
self.$tree = $("#" + id);
self.drop = function (event, ui)
{
var dt = event.originalEvent.dataTransfer;
var bNode = ($.inArray("application/ojtreenodes+json", dt.types) >= 0);
var bDiv = ($.inArray("dragdiv/text", dt.types) >= 0);
var id, data;
if (bNode) {
// Draggable tree node(s)
// We know we have tree node data because we used dataTypes in both the
// drag source tree and this drop target tree.
if (!ui.reorder) {
data = dt.getData("application/ojtreenodes+json");
data = JSON.parse(data);
self.$tree.ojTree("create", ui.reference, ui.position, data);
}
} else if (bDiv) {
// Draggable div is being dropped.
// We know we have div data because we used dataTypes in both the drag
// source and this drop target.
id = dt.getData("dragdiv/text");
self.$tree.ojTree("create", ui.reference, // add a simple node
ui.position, {
"title": id,
"attr": {"id": id}
});
}
return false; // drop accepted
};
self.dragEnd = function (event, ui)
{
var selections;
if (!ui.reorder) {
if (event.originalEvent.dataTransfer.dropEffect === "move") {
// Remove the moved nodes. If node is selected, remove
// all selected nodes.
if (self.$tree.ojTree("isSelected", event.target)) {
selections = self.$tree.ojTree("option", "selection");
for (i = 0; i < selections.length; i++) {
self.$tree.ojTree("remove", selections[i]);
}
} else {
// Single unselected node moved
self.$tree.ojTree("remove", event.target);
}
}
}
};
self.getJson = function (node, fn)
{
var data = (self.id === "tree1") ? getJson1() : getJson2();
fn(data);
};
}
; // end treeModel
//the jQuery DOMReady function won't run at appropriate time inside a viewModel
//so going to move the code into handleAttached and handleBindingsApplied
// $(function() {
//
// // see below for copy-pasted code into handleAttached and handleBindingsApplied
// });
self.handleAttached = function (info) {
var vmTree1 = new treeModel("tree1");
var vmTree2 = new treeModel("tree2");
// applyBindings is handled after oj.Router.sync() in main.js
// ko.applyBindings(vmTree1, document.getElementById('tree1'));
// ko.applyBindings(vmTree2, document.getElementById('tree2'));
};
self.handleBindingsApplied = function (info) {
for (var i = 1; i <= 3; i++)
{
var div = document.getElementById("dragdiv" + i);
div.addEventListener("dragstart", dragDivStart, false);
div.addEventListener("dragend", dragDivEnd, false);
}
};
function dragDivStart(ev)
{
console.log('dragDivStart');
var id = ev.currentTarget.id;
ev.dataTransfer.setData("dragdiv/text", ev.currentTarget.textContent);
ev.dataTransfer.effectAllowed = (ev.ctrlKey ? "copy" : "move");
}
;
function dragDivEnd(ev)
{
console.log('dragDivEnd');
var div;
var de = ev.dataTransfer.dropEffect;
if (de == "move") {
div = document.getElementById(ev.currentTarget.id);
div.parentNode.removeChild(div);
}
}
;
// Demonstration data for Tree1
function getJson1()
{
return [
{
"title": "Home",
"attr": {"id": "home"}
},
{
"title": "News",
"attr": {"id": "news"}
},
{
"title": "Blogs",
"attr": {"id": "blogs"},
"children": [{"title": "Today",
"attr": {"id": "today"}
},
{"title": "Yesterday",
"attr": {"id": "yesterday"}
},
{"title": "2 Days Back",
"attr": {"id": "2daysback"}
},
{"title": "Archive",
"attr": {"id": "archive"}
}
]
},
{
"title": "Links",
"attr": {"id": "links"},
"children": [{"title": "Oracle",
"attr": {"id": "oracle"}
},
{"title": "IBM",
"attr": {"id": "ibm"}
},
{"title": "Microsoft",
"attr": {"id": "ms"},
"children": [{"title": "USA",
"attr": {"id": "msusa"},
"children": [{"title": "North",
"attr": {"id": "msusanorth"}
},
{"title": "South",
"attr": {"id": "msusasouth"}
},
{"title": "East",
"attr": {"id": "msusaeast"}
},
{"title": "West",
"attr": {"id": "msusawest"}
}
]
},
{"title": "Europe",
"attr": {"id": "msuerope"}
},
{"title": "Asia",
"attr": {"id": "msasia"},
"children": [{"title": "Japan",
"attr": {"id": "asiajap"}
},
{"title": "China",
"attr": {"id": "asiachina"}
},
{"title": "India",
"attr": {"id": "asiaindia"}
}
]
}
]
}
]
},
{
"title": "Sponsors",
"attr": {"id": "sponsors"}
},
{
"title": "References",
"attr": {"id": "references"},
"children": [{"title": "All",
"attr": {"id": "refsall"}
},
{"title": "USA",
"attr": {"id": "refsusa"}
},
{"title": "Europe",
"attr": {"id": "refseurope"}
},
{"title": "Asia",
"attr": {"id": "refsasia"}
}
]
}
];
}
;
// Demonstration data for Tree2
function getJson2()
{
return [
{
"title": "Companies",
"attr": {"id": "companies"},
"children": [
{
"title": "Corporate",
"attr": {"id": "corporate"}
},
{
"title": "Subsidiaries",
"attr": {"id": "subsids"}
},
{
"title": "External",
"attr": {"id": "external"}
}
]
},
{
"title": "Divisions",
"attr": {"id": "divs"},
"children": [
{
"title": "Financial",
"attr": {"id": "finance"}
},
{
"title": "Marketing",
"attr": {"id": "marketing"}
},
{
"title": "Sales",
"attr": {"id": "sales"}
},
{
"title": "Production",
"attr": {"id": "production"}
}
]
},
{
"title": "Legal",
"attr": {"id": "legal"}
},
{
"title": "Public Relations",
"attr": {"id": "pr"}
},
{
"title": "Investor Relations",
"attr": {"id": "invest"}
}
];
}
;
}
; // end DashboardModel
return new DashboardModel();
}
);
self.$tree.ojTree("remove", selections[i]);
}
} else {
// Single unselected node moved
self.$tree.ojTree("remove", event.target);
}
}
}
};
self.getJson = function (node, fn)
{
var data = (self.id === "tree1") ? getJson1() : getJson2();
fn(data);
};
}
; // end treeModel
//the jQuery DOMReady function won't run at appropriate time inside a viewModel
//so going to move the code into handleAttached and handleBindingsApplied
// $(function() {
//
// // see below for copy-pasted code into handleAttached and handleBindingsApplied
// });
self.handleAttached = function (info) {
var vmTree1 = new treeModel("tree1");
var vmTree2 = new treeModel("tree2");
// applyBindings is handled after oj.Router.sync() in main.js
// ko.applyBindings(vmTree1, document.getElementById('tree1'));
// ko.applyBindings(vmTree2, document.getElementById('tree2'));
};
self.handleBindingsApplied = function (info) {
for (var i = 1; i <= 3; i++)
{
var div = document.getElementById("dragdiv" + i);
div.addEventListener("dragstart", dragDivStart, false);
div.addEventListener("dragend", dragDivEnd, false);
}
};
function dragDivStart(ev)
{
console.log('dragDivStart');
var id = ev.currentTarget.id;
ev.dataTransfer.setData("dragdiv/text", ev.currentTarget.textContent);
ev.dataTransfer.effectAllowed = (ev.ctrlKey ? "copy" : "move");
}
;
function dragDivEnd(ev)
{
console.log('dragDivEnd');
var div;
var de = ev.dataTransfer.dropEffect;
if (de == "move") {
div = document.getElementById(ev.currentTarget.id);
div.parentNode.removeChild(div);
}
}
;
// Demonstration data for Tree1
function getJson1()
{
return [
{
"title": "Home",
"attr": {"id": "home"}
},
{
"title": "News",
"attr": {"id": "news"}
},
{
"title": "Blogs",
"attr": {"id": "blogs"},
"children": [{"title": "Today",
"attr": {"id": "today"}
},
{"title": "Yesterday",
"attr": {"id": "yesterday"}
},
{"title": "2 Days Back",
"attr": {"id": "2daysback"}
},
{"title": "Archive",
"attr": {"id": "archive"}
}
]
},
{
"title": "Links",
"attr": {"id": "links"},
"children": [{"title": "Oracle",
"attr": {"id": "oracle"}
},
{"title": "IBM",
"attr": {"id": "ibm"}
},
{"title": "Microsoft",
"attr": {"id": "ms"},
"children": [{"title": "USA",
"attr": {"id": "msusa"},
"children": [{"title": "North",
"attr": {"id": "msusanorth"}
},
{"title": "South",
"attr": {"id": "msusasouth"}
},
{"title": "East",
"attr": {"id": "msusaeast"}
},
{"title": "West",
"attr": {"id": "msusawest"}
}
]
},
{"title": "Europe",
"attr": {"id": "msuerope"}
},
{"title": "Asia",
"attr": {"id": "msasia"},
"children": [{"title": "Japan",
"attr": {"id": "asiajap"}
},
{"title": "China",
"attr": {"id": "asiachina"}
},
{"title": "India",
"attr": {"id": "asiaindia"}
}
]
}
]
}
]
},
{
"title": "Sponsors",
"attr": {"id": "sponsors"}
},
{
"title": "References",
"attr": {"id": "references"},
"children": [{"title": "All",
"attr": {"id": "refsall"}
},
{"title": "USA",
"attr": {"id": "refsusa"}
},
{"title": "Europe",
"attr": {"id": "refseurope"}
},
{"title": "Asia",
"attr": {"id": "refsasia"}
}
]
}
];
}
;
// Demonstration data for Tree2
function getJson2()
{
return [
{
"title": "Companies",
"attr": {"id": "companies"},
"children": [
{
"title": "Corporate",
"attr": {"id": "corporate"}
},
{
"title": "Subsidiaries",
"attr": {"id": "subsids"}
},
{
"title": "External",
"attr": {"id": "external"}
}
]
},
{
"title": "Divisions",
"attr": {"id": "divs"},
"children": [
{
"title": "Financial",
"attr": {"id": "finance"}
},
{
"title": "Marketing",
"attr": {"id": "marketing"}
},
{
"title": "Sales",
"attr": {"id": "sales"}
},
{
"title": "Production",
"attr": {"id": "production"}
}
]
},
{
"title": "Legal",
"attr": {"id": "legal"}
},
{
"title": "Public Relations",
"attr": {"id": "pr"}
},
{
"title": "Investor Relations",
"attr": {"id": "invest"}
}
];
}
;
}
; // end DashboardModel
return new DashboardModel();
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment