Warming up: Understanding GitHub Wiki Syntax

The Storm

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]
}

Why is so perfect?

Attached(): An aurelia lifecycle callback

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(){
  ...
 }
}