-
Notifications
You must be signed in to change notification settings - Fork 5
JS Perfect Storm : Understanding dynamic event handling
David Gonzalez edited this page Apr 17, 2017
·
13 revisions
Warming up: Understanding GitHub Wiki Syntax
source: SeeCodeRun/src/traceView/expression-data-explorer.js
//[some code]
export class ExpressionDataExplorer{
//[more code]
attached(){
let self = this;
console.log("this", this);
//[more code]
$editorTooltip.on('inserted.bs.popover', function(){
let $popoverContentTreeViewContent = $("#" + self.editorTooltipContentId);
$popoverContentTreeViewContent.html("");
$popoverContentTreeViewContent.append(self.title);
$popoverContentTreeViewContent.append(self.content);
self.title = "";
self.content = "";
CollapsibleLists.apply();
$('[data-toggle="tooltip"]').tooltip();
});
$editorTooltip.on('shown.bs.popover', function () {
console.log("pop", this);
let $popoverContentTreeViewContainer = $("#" + $(this).attr("aria-describedby"));
$popoverContentTreeViewContainer.find(".collapsibleList li").on("click", function (event) {
if ($(event.target).hasClass("collapsibleListOpen")) {
let maxX = $("#previewTab").offset().left;
let maxWidth = maxX - $popoverContentTreeViewContainer.offset().left - 6;//padding
let $treeView = $("#treeViewContent");
if ($treeView.width() > maxWidth) {
$popoverContentTreeViewContainer.width(maxWidth);
console.log("width changed");
}
console.log("List open, tooltip width: ", $popoverContentTreeViewContainer.width(), "max width", maxWidth, "splitter x", maxX, "tooltip left", $popoverContentTreeViewContainer.offset().left, "tree width", $treeView.width());
}
if ($(event.target).hasClass("collapsibleListClosed")) {
console.log("List Closed, tooltip width: ", $popoverContentTreeViewContainer.width());
}
});
$popoverContentTreeViewContainer.resizable({
handles: "n, e, s, w"
});
$editorTooltip.on("hidden.bs.popover", function(){
$popoverContentTreeViewContainer.width("inherit");
});
});
//[more code]
}
//[more code]
}
Aurelia uses a MVC design pattern: M-V-VM. Source: https://msdn.microsoft.com/en-us/library/hh848246.aspx
ExpressionDataExplorer.js is the VM (ViewModel).
export class ExpressionDataExplorer{
attached(){
...
}
}