index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0; padding: 0; height: 100%; overflow: hidden;">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<head>
  <title>Basic Primitives Diagrams</title>
  <script>
    var frameworksOrder = ["javascript", "pdfkit"];
    var frameworksLabels = {
      "javascript": "JavaScript",
      "pdfkit": "PDFkit"
    };
    var preferredFramework = "javascript";
    var activeFile;
    var samplesHash = {};
    var files = [
      {
        label: "Organizational Chart",
        items: [
          {
            label: "Large Hierarchy",
            frameworks: {
              javascript: "samples/javascript.controls/DemoLargeHierarchy.html",
              pdfkit: "samples/pdfkit.plugins/DemoLargeHierarchy.html"
            }
          },
          {
            label: "Dynamic Data Loading",
            frameworks: {
              javascript: "samples/javascript.controls/DemoDynamicLoading.html"
            }
          },
          {
            label: "Matrix Layout",
            frameworks: {
              javascript: "samples/javascript.controls/DemoOrgDiagramMatrixLayout.html",
              pdfkit: "samples/pdfkit.plugins/DemoOrgDiagramMatrixLayout.html"
            }
          },
          {
            label: "Vertical Layout",
            frameworks: {
              javascript: "samples/javascript.controls/DemoVerticalLayout.html"
            }
          },
          {
            label: "Cross-branch alignment",
            frameworks: {
              javascript: "samples/javascript.controls/DemoCrossBranchAlignment.html"
            }
          },
          {
            label: "Cross Team Working Group",
            frameworks: {
              javascript: "samples/javascript.controls/DemoCrossTeamGroup.html"
            }
          },
          {
            label: "Partners & Annotations",
            frameworks: {
              javascript: "samples/javascript.controls/DemoPartners.html"
            }
          },
          {
            label: "Demo Highlight & Connector Annotations",
            frameworks: {
              javascript: "samples/javascript.controls/DemoHighlightAndAnnotations.html"
            }
          }
        ]
      },
      {
        label: "Family Chart",
        items: [
          {
            label: "Family Tree Nodes Ordering",
            frameworks: {
              javascript: "samples/javascript.controls/DemoFamilyOrdering.html"
            }
          },
          {
            label: "Family Chart & Annotations",
            frameworks: {
              javascript: "samples/javascript.controls/DemoFamily.html"
            }
          },
          {
            label: "Tech Tree Chart",
            frameworks: {
              javascript: "samples/javascript.controls/DemoTechTree.html"
            }
          },
          {
            label: "Financial Ownership Chart",
            frameworks: {
              javascript: "samples/javascript.controls/DemoFinancialOwnership.html"
            }
          },
          {
            label: "Mutual Financial Ownership Chart",
            frameworks: {
              javascript: "samples/javascript.controls/DemoMutualFinancialOwnership.html"
            }
          },
          {
            label: "Dependencies Chart",
            frameworks: {
              javascript: "samples/javascript.controls/DemoDependencies.html"
            }
          },
          {
            label: "Patents & Hiding grand parents connectors",
            frameworks: {
              javascript: "samples/javascript.controls/DemoPatents.html"
            }
          }
        ]
      },
      {
        label: "Integration",
        items: [
          {
            label: "jQuery UI Widget Example",
            frameworks: {
              javascript: "samples/jquery.widgets/CaseFirstOrganizationalChartWidget.html"
            }
          },
          {
            label: "Nodes Vanilla JavaScript Drag & Drop",
            frameworks: {
              javascript: "samples/javascript.controls/DemoDragNDrop.html"
            }
          },
          {
            label: "Connector Annotation Drag & Drop using Interact.js",
            frameworks: {
              javascript: "samples/javascript.controls/DemoConnectorAnnotationDragNDrop.html"
            }
          }
        ]
      },
      {
        label: "PDFkit Specific Use Cases",
        items: [
          {
            label: "Auto size Organizational Chart to fit into Page",
            frameworks: {
              pdfkit: "samples/pdfkit.plugins/AutoSizeOrgDiagram.html"
            }
          },
          {
            label: "Auto size Page to fit Organizational Chart",
            frameworks: {
              pdfkit: "samples/pdfkit.plugins/AutoSizePageToFitOrgDiagram.html"
            }
          },
          {
            label: "Auto size Family Chart to fit into Page",
            frameworks: {
              pdfkit: "samples/pdfkit.plugins/AutoSizeFamDiagram.html"
            }
          },
          {
            label: "Auto size Page to Family Chart",
            frameworks: {
              pdfkit: "samples/pdfkit.plugins/AutoSizePageToFitFamDiagram.html"
            }
          },
          {
            label: "PDF File Download Sample",
            frameworks: {
              pdfkit: "samples/pdfkit.plugins/FileDownload.html"
            }
          },
          {
            label: "Multi-page Document Example",
            frameworks: {
              pdfkit: "samples/pdfkit.plugins/Multipage.html"
            }
          },
          {
            label: "User Item Template with custom graphics",
            frameworks: {
              pdfkit: "samples/pdfkit.plugins/UserItemTemplateWithShapes.html"
            }
          }
        ]
      },
      {
        label: "Create & Update use cases",
        items: [
          {
            label: "First Organizational Chart",
            frameworks: {
              javascript: "samples/javascript.controls/CaseFirstOrganizationalChart.html",
              pdfkit: "samples/pdfkit.plugins/FirstOrganizationalChart.html"
            }
          },
          {
            label: "First Family Chart",
            frameworks: {
              javascript: "samples/javascript.controls/CaseFirstFamilyChart.html",
              pdfkit: "samples/pdfkit.plugins/FirstFamilyChart.html"
            }
          },
          {
            label: "Adding new items to chart at runtime",
            frameworks: {
              javascript: "samples/javascript.controls/CaseAddingNewItemsToChartAtRuntime.html"
            }
          },
          {
            label: "Page Size Organizational Chart",
            frameworks: {
              javascript: "samples/javascript.controls/CasePageSizeDiagram.html"
            }
          },
          {
            label: "Auto size diagram in article",
            frameworks: {
              javascript: "samples/javascript.controls/CaseAutoSize.html"
            }
          },
          {
            label: "Popup Dialog",
            frameworks: {
              javascript: "samples/javascript.controls/CasePopupDialog.html"
            }
          }
        ]
      },
      {
        label: "User interface events & options",
        items: [
          {
            label: "Selecting cursor item",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSelectingCursorItem.html"
            }
          },
          {
            label: "Selecting highlight item",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSelectingHighlightItem.html"
            }
          },
          {
            label: "Selected items & Check boxes",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSelectedItems.html"
            }
          },
          {
            label: "Frame",
            frameworks: {
              javascript: "samples/javascript.controls/CaseShowFrame.html"
            }
          },
          {
            label: "Buttons panel",
            frameworks: {
              javascript: "samples/javascript.controls/CaseButtonsPanel.html"
            }
          },
          {
            label: "Item and group title colors",
            frameworks: {
              javascript: "samples/javascript.controls/CaseItemAndGroupTitleColors.html",
              pdfkit: "samples/pdfkit.plugins/ItemAndGroupTitleColors.html"
            }
          },
          {
            label: "Group title - Custom Template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseGroupTitleTemplate.html",
              pdfkit: "samples/pdfkit.plugins/GroupTitleTemplate.html"
            }
          }
        ]
      },
      {
        label: "Organizational Chart Layout Options",
        items: [
          {
            label: "Children Placement",
            frameworks: {
              javascript: "samples/javascript.controls/CaseChildrenPlacementType.html",
              pdfkit: "samples/pdfkit.plugins/ChildrenPlacementType.html"
            }
          },
          {
            label: "Cross-branch alignment",
            frameworks: {
              javascript: "samples/javascript.controls/CaseCrossBranchAlignment.html"
            }
          },
          {
            label: "Children & Assistants Levels",
            frameworks: {
              javascript: "samples/javascript.controls/CaseChildrenAndAssistantsLevelOffset.html"
            }
          },
          {
            label: "Adviser and Assistant item types",
            frameworks: {
              javascript: "samples/javascript.controls/CaseAdviserAndAssistantItemTypes.html"
            }
          },
          {
            label: "SubAdviser and SubAssistant item types",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSubAdviserAndSubAssistantItemTypes.html"
            }
          },
          {
            label: "General Partner item type",
            frameworks: {
              javascript: "samples/javascript.controls/CaseGeneralPartnerItemType.html"
            }
          },
          {
            label: "Limited Partner item type",
            frameworks: {
              javascript: "samples/javascript.controls/CaseLimitedPartnerItemType.html"
            }
          },
          {
            label: "Adviser Partner item type",
            frameworks: {
              javascript: "samples/javascript.controls/CaseAdviserPartnerItemType.html"
            }
          },
          {
            label: "Multiple root items in chart",
            frameworks: {
              javascript: "samples/javascript.controls/CaseMultipleRootItemsInChart.html"
            }
          },
          {
            label: "Matrix layout of multiple root items in chart",
            frameworks: {
              javascript: "samples/javascript.controls/CaseMatrixLayoutOfMultipleRootItemsInChart.html"
            }
          },
          {
            label: "Selection path mode",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSelectionPathMode.html"
            }
          },
          {
            label: "Inactive Items in layout",
            frameworks: {
              javascript: "samples/javascript.controls/CaseInactiveItems.html"
            }
          },
          {
            label: "Custom layout with invisible items",
            frameworks: {
              javascript: "samples/javascript.controls/CaseCustomLayoutWithInvisibleItems.html"
            }
          },
          {
            label: "Children levels with invisible items",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSkippedLevels.html"
            }
          },
          {
            label: "Advisers children placement",
            frameworks: {
              javascript: "samples/javascript.controls/CasePlaceAdvisersAboveChildren.html"
            }
          },
          {
            label: "Assistants children placement",
            frameworks: {
              javascript: "samples/javascript.controls/CasePlaceAssistantsAboveChildren.html"
            }
          }
        ]
      },
      {
        label: "Family Diagram Layout Use Cases",
        items: [
          {
            label: "Inactive Family Items in layout",
            frameworks: {
              javascript: "samples/javascript.controls/CaseInactiveFamilyItems.html"
            }
          },
          {
            label: "Family Relations Bundling",
            frameworks: {
              javascript: "samples/javascript.controls/CaseFamilyChartRelations.html"
            }
          },
          {
            label: "Matrix Nodes layout in Family Chart",
            frameworks: {
              javascript: "samples/javascript.controls/CaseMatrixLayoutInFamilyChart.html",
              pdfkit: "samples/pdfkit.plugins/FamilyMatrix.html"
            }
          },
          {
            label: "Matrix Groups in Family Chart",
            frameworks: {
              javascript: "samples/javascript.controls/CaseMatrixGroupsInFamilyChart.html",
              pdfkit: "samples/pdfkit.plugins/FamilyMatrixGroups.html"
            }
          },
          {
            label: "Labels cascades over connection lines in family chart. Custom label template.",
            frameworks: {
              javascript: "samples/javascript.controls/CaseLabelsCascadesInFamilyChart.html",
              pdfkit: "samples/pdfkit.plugins/LabelsCascadesInFamilyChart.html"
            }
          },
          {
            label: "Labels over matrix shaped nodes connection lines in family chart",
            frameworks: {
              javascript: "samples/javascript.controls/CaseLabelsNMatrixInFamilyChart.html"
            }
          },
          {
            label: "Nodes ordering",
            frameworks: {
              javascript: "samples/javascript.controls/CaseFamilyChartItemsOrdering.html",
              pdfkit: "samples/pdfkit.plugins/FamilyChartItemsOrdering.html"
            }
          },
          {
            label: "Families ordering",
            frameworks: {
              javascript: "samples/javascript.controls/CaseMultipleFamiliesOrdering.html"
            }
          },
          {
            label: "Primary Parent",
            frameworks: {
              javascript: "samples/javascript.controls/CaseFamilyChartPrimaryParent.html"
            }
          },
          {
            label: "Loops Layout Optimization",
            frameworks: {
              javascript: "samples/javascript.controls/CaseLoopsInFamilyChart.html",
              pdfkit: "samples/pdfkit.plugins/LoopsInFamilyChart.html"
            }
          },
          {
            label: "Selection Path",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSelectionPathModeInFamilyChart.html"
            }
          }
        ]
      },
      {
        label: "Item Template Use Cases",
        items: [
          {
            label: "Item template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseItemTemplate.html",
              pdfkit: "samples/pdfkit.plugins/UserItemTemplate.html"
            }
          },
          {
            label: "Adding Link To Item Template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseAddingLinkToItemTemplate.html"
            }
          },
          {
            label: "Zoom using item template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseZoomWithItemTemplate.html"
            }
          },
          {
            label: "Zoom using CSS Scale Transform",
            frameworks: {
              javascript: "samples/javascript.controls/CaseZoomWithCSSScaleTransform.html"
            }
          },
          {
            label: "Labels & Item Template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseItemTemplateLabel.html"
            }
          },
          {
            label: "Selection Checkbox Inside Item Template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseSelectionCheckboxInItemTemplate.html"
            }
          },
          {
            label: "Cursor Template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseCursorTemplate.html"
            }
          },
          {
            label: "Highlight template",
            frameworks: {
              javascript: "samples/javascript.controls/CaseHighlightTemplate.html"
            }
          }
        ]
      },
      {
        label: "Annotations",
        items: [
          {
            label: "On-screen Connector Annotation",
            frameworks: {
              javascript: "samples/javascript.controls/CaseConnectorAnnotation.html"
            }
          },
          {
            label: "Shape & Background Annotations",
            frameworks: {
              javascript: "samples/javascript.controls/CaseShapeAnnotation.html",
              pdfkit: "samples/pdfkit.plugins/ShapeAnnotation.html"
            }
          },
          {
            label: "Level Annotation",
            frameworks: {
              javascript: "samples/javascript.controls/CaseLevelAnnotation.html",
              pdfkit: "samples/pdfkit.plugins/LevelAnnotation.html"
            }
          },
          {
            label: "Level Annotation - Custom Templates",
            frameworks: {
              javascript: "samples/javascript.controls/CaseLevelAnnotationTemplate.html"
            }
          },
          {
            label: "Highlight Path Annotation",
            frameworks: {
              javascript: "samples/javascript.controls/CaseHighlightPathAnnotation.html"
            }
          },
          {
            label: "PERT chart & Critical Path Visualization",
            frameworks: {
              javascript: "samples/javascript.controls/CasePERTChart.html"
            }
          },
          {
            label: "Routing Highlight Path Annotation for hidden grand parents connections",
            frameworks: {
              javascript: "samples/javascript.controls/CaseFamilyHideGrandParentsConnections.html",
              pdfkit: "samples/pdfkit.plugins/HideGrandParentsConnectors.html"
            }
          }
        ]
      },
      {
        label: "Auxiliary Controls",
        items: [
          {
            label: "Rotated Text",
            frameworks: {
              javascript: "samples/javascript.controls/TestText.html"
            }
          },
          {
            label: "Callout Shape",
            frameworks: {
              javascript: "samples/javascript.controls/TestCallout.html"
            }
          },
          {
            label: "Shape Annotation",
            frameworks: {
              javascript: "samples/javascript.controls/TestShape.html"
            }
          },
          {
            label: "Connector Annotation",
            frameworks: {
              javascript: "samples/javascript.controls/TestConnector.html"
            }
          }
        ]
      },
      {
        label: "Reference",
        items: [
          {
            label: "Controls Processing Diagram",
            frameworks: {
              javascript: "samples/javascript.controls/TestProcessingDiagram.html"
            }
          }
        ]
      }
    ];

    document.addEventListener('DOMContentLoaded', function () {
      var request = new XMLHttpRequest();
      request.open('GET', 'package.json', true);
      request.onload = function() {
        if (this.status >= 200 && this.status < 400) {
          var package = JSON.parse(this.response);
          console.log();
          document.getElementById("version").appendChild(document.createTextNode(package.version));
        }
      };
      request.send();


      // build samples hash
      samplesHash = {};
      for (var index = 0; index < files.length; index += 1) {
        var optgroup = files[index];
        for (var itemIndex = 0; itemIndex < optgroup.items.length; itemIndex += 1) {
          var option = optgroup.items[itemIndex];
          var key = index + "-" + itemIndex;
          samplesHash[key] = option;
          if(activeFile === undefined) {
            activeFile = option;
          }
        }
      }

      updateFiles(activeFile);
      preferredFramework = updateFrameworks(activeFile.frameworks, preferredFramework);
      resizeWindow();
      Update();

      var filesElement = document.getElementById("files");
      filesElement.addEventListener("change", function (event) {
        var filesElement = document.getElementById("files");
        activeFile = samplesHash[filesElement.options[filesElement.selectedIndex].getAttribute("data-key")];
        preferredFramework = updateFrameworks(activeFile.frameworks, preferredFramework);
        Update();
      });
      

      var frameworksElement =  document.getElementById("frameworks");
      frameworksElement.addEventListener("click", function(event) {
        preferredFramework = event.target.getAttribute("id");
        preferredFramework = updateFrameworks(activeFile.frameworks, preferredFramework);
        Update();
      });

      var openUrlElement = document.getElementById("openURL");
      openUrlElement.addEventListener("click", function(event) {
        var frameworkUrl = activeFile.frameworks[preferredFramework];
        window.location.href = frameworkUrl;
      });

      window.addEventListener('resize', function (event) {
        resizeWindow();
      });
    });

    function resizeWindow() {
      var navigationBarElement = document.getElementById("navigationBar");
      var frameworksBarElement = document.getElementById("frameworksBar");
      var placeholderElement = document.getElementById("placeholder");
      placeholderElement.style.top = (navigationBarElement.offsetHeight + frameworksBarElement.offsetHeight) + "px";
    }

    function Update() {
      var frameworkUrl = activeFile.frameworks[preferredFramework];
      var contentElement = document.getElementById("content");
      contentElement.setAttribute('src', frameworkUrl);
    }

    function updateFiles(activeFile) {
      var activeFile;
      var filesElement = document.getElementById("files");
      filesElement.innerHTML = "";
      for (var index = 0; index < files.length; index += 1) {
        var optgroup = files[index];
        var optgroupElement = document.createElement('OPTGROUP');
        optgroupElement.setAttribute("label", optgroup.label);

        for (var itemIndex = 0; itemIndex < optgroup.items.length; itemIndex += 1) {
          var option = optgroup.items[itemIndex];
          var optionElement = document.createElement('OPTION');
          var key = index + "-" + itemIndex;
          optionElement.setAttribute("data-key", key);
          optionElement.appendChild(document.createTextNode(option.label));
          optgroupElement.appendChild(optionElement);
        }
        filesElement.appendChild(optgroupElement);
      }
    }

    function updateFrameworks(frameworks, preferredFramework) {
      if(!frameworks.hasOwnProperty(preferredFramework)) {
        for(var index=0; index < frameworksOrder.length; index+=1) {
          var framework = frameworksOrder[index];
          if(frameworks[framework] !== undefined) {
            preferredFramework = framework;
          }
        }
      }
      
      var frameworksElement =  document.getElementById("frameworks");
      frameworksElement.innerHTML = "";
      for (var index = 0; index < frameworksOrder.length; index += 1) {
        var framework = frameworksOrder[index];
        var frameworkElement =  document.createElement('li');
        frameworkElement.setAttribute('class', "nav-item");
        frameworkElement.setAttribute('id', framework);
        frameworkElement.setAttribute('value', framework);
        var hrefElement = document.createElement('a');
        hrefElement.setAttribute('class', "nav-link" + (framework === preferredFramework ? " active" : "") + (frameworks[framework] === undefined ? " disabled" : ""));
        hrefElement.setAttribute('id', framework);
        hrefElement.setAttribute('value', framework);
        hrefElement.setAttribute('href', "#");
        hrefElement.appendChild(document.createTextNode(frameworksLabels[framework]))
        frameworkElement.appendChild(hrefElement);
        frameworksElement.appendChild(frameworkElement);
      }
      return preferredFramework;
    }
  </script>
</head>

<body style="margin: 0; padding: 0; height: 100%; overflow: hidden;">
  <nav id="navigationBar" class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="https://www.basicprimitives.com">BASIC PRIMITIVES</a>&nbsp;v<label id="version"></label>
      <ul class="navbar-nav me-auto">
        <select class="form-select form-select-sm ms-2" id="files">
          <option selected>Choose sample...</option>
        </select>
        <li class="nav-item">
          <a id="openURL" class="nav-link" href="#">
            <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-folder-symlink" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.828 4a3 3 0 0 1-2.12-.879l-.83-.828A1 1 0 0 0 6.173 2H2.5a1 1 0 0 0-1 .981L1.546 4h-1L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3v1z"/>
              <path fill-rule="evenodd" d="M13.81 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zM2.19 3A2 2 0 0 0 .198 5.181l.637 7A2 2 0 0 0 2.826 14h10.348a2 2 0 0 0 1.991-1.819l.637-7A2 2 0 0 0 13.81 3H2.19z"/>
              <path d="M8.616 10.24l3.182-1.969a.443.443 0 0 0 0-.742l-3.182-1.97c-.27-.166-.616.036-.616.372V6.7c-.857 0-3.429 0-4 4.8 1.429-2.7 4-2.4 4-2.4v.769c0 .336.346.538.616.371z"/>
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  <nav id="frameworksBar" class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
      <ul id="frameworks" class="nav nav-tabs">
      </ul>
    </div>
  </nav>
  <div id="placeholder" style="position: absolute; top: 200px; left: 0px; right: 0px; bottom: 0px;">
    <iframe id="content" style="position:absolute; border-style: dotted; border-width: 1px;" width="100%" height="100%" src=""></iframe>
  </div>
</body>

</html>