winery/org.eclipse.winery.topologymodeler/src/main/webapp/WEB-INF/tags/common/templates/toggleButtons.tag

   1 <%--
   2 /*******************************************************************************
   3  * Copyright (c) 2013 University of Stuttgart.
   4  * All rights reserved. This program and the accompanying materials
   5  * are made available under the terms of the Eclipse Public License v1.0
   6  * and the Apache License 2.0 which both accompany this distribution,
   7  * and are available at http://www.eclipse.org/legal/epl-v10.html
   8  * and http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Contributors:
  11  *    Oliver Kopp - initial API and implementation and/or initial documentation
  12  *******************************************************************************/
  13 --%>
  14 <%@tag description="Toggle buttons for visual appearance" pageEncoding="UTF-8"%>
  15 <script>
  16 var JQUERY_ANIMATION_DURATION = 400;
  17
  18 function doShowOrHide(elements, showThem) {
  19         if (elements.length == 0) {
  20                 // e.g., no properties defined
  21                 return;
  22         }
  23         if (showThem) {
  24                 elements.slideDown();
  25         } else {
  26                 elements.slideUp();
  27         }
  28         window.setTimeout(function() {
  29                 jsPlumb.repaint(elements.parent());
  30         }, JQUERY_ANIMATION_DURATION);
  31 }
  32
  33 function showIds(cb) {
  34         var elements;
  35         if ($("div.NodeTemplateShape.selected").size() > 0) {
  36                 elements = $("div.NodeTemplateShape.selected div.id.nodetemplate");
  37         } else {
  38                 elements = $("div.NodeTemplateShape:visible div.id.nodetemplate");
  39         }
  40
  41         if ($(cb).hasClass("active")) {
  42                 elements.fadeOut();
  43         } else {
  44                 elements.fadeIn();
  45         }
  46         // no repaint required as no nodes are moved
  47         // window.setTimeout(jsPlumb.repaintEverything, JQUERY_ANIMATION_DURATION);
  48 }
  49
  50 /**
  51  * Toogles visiblity of both node types and relationship types
  52  */
  53 function showTypes(showThem) {
  54         // types at node templates
  55         var elements;
  56         var typesOfRelationshipTemplates;
  57         if ($("div.NodeTemplateShape.selected").size() > 0) {
  58                 elements = $("div.NodeTemplateShape.selected div.type.nodetemplate");
  59                 // TODO: We should put into typesOfRelationshipTemplates all type divs of relationshiptemplates connecting highlighted node templates
  60                 //       This should be done when doing the multiselect
  61                 //       And there should be a second if similar to the node templates for relationship templates
  62                 typesOfRelationshipTemplates = $(".todo");
  63         } else {
  64                 elements = $("div.NodeTemplateShape:visible div.type.nodetemplate");
  65                 // TODO: we should check for a single relationship template being selected
  66                 typesOfRelationshipTemplates = $(".relationshipTypeLabel");
  67         }
  68
  69         if (showThem) {
  70                 elements.fadeIn();
  71                 typesOfRelationshipTemplates.fadeIn();
  72         } else {
  73                 elements.fadeOut();
  74                 typesOfRelationshipTemplates.fadeOut();
  75         }
  76
  77         // no repaint required as no nodes are moved
  78         // window.setTimeout(jsPlumb.repaintEverything, JQUERY_ANIMATION_DURATION);
  79 }
  80
  81 function showOrHideProperties(showThem) {
  82         var elements;
  83         if ($("div.NodeTemplateShape.selected").size() > 0) {
  84                 elements = $("div.NodeTemplateShape.selected > div.propertiesContainer");
  85         } else {
  86                 elements = $("div.NodeTemplateShape:visible > div.propertiesContainer");
  87         }
  88         doShowOrHide(elements, showThem);
  89 }
  90
  91
  92 function showOrHideDeploymentArtifacts(showThem) {
  93         var elements;
  94         if ($("div.NodeTemplateShape.selected").size() > 0) {
  95                 elements = $("div.NodeTemplateShape:visible.selected > div.deploymentArtifactsContainer");
  96         } else {
  97                 elements = $("div.NodeTemplateShape:visible > div.deploymentArtifactsContainer");
  98         }
  99         doShowOrHide(elements, showThem);
 100 }
 101
 102 function showOrHideReqCaps(showThem) {
 103         var elements;
 104         if ($("div.NodeTemplateShape.selected").size() > 0) {
 105                 elements = $("div.NodeTemplateShape:visible.selected > div.requirementsContainer, div.NodeTemplateShape:visible.selected > div.capabilitiesContainer");
 106         } else {
 107                 elements = $("div.NodeTemplateShape:visible > div.requirementsContainer, div.NodeTemplateShape:visible > div.capabilitiesContainer");
 108         }
 109         doShowOrHide(elements, showThem);
 110 }
 111
 112 function showOrHidePolicies(showThem) {
 113         var elements;
 114         if ($("div.NodeTemplateShape.selected").size() > 0) {
 115                 elements = $("div.NodeTemplateShape:visible.selected > div.policiesContainer");
 116         } else {
 117                 elements = $("div.NodeTemplateShape:visible > div.policiesContainer");
 118         }
 119         doShowOrHide(elements, showThem);
 120 }
 121 </script>
 122
 123 <div class="btn-group" data-toggle="buttons-checkbox" id="toggleButtons">
 124         <button class="btn btn-default" id="toggleIdVisibility" onclick="showIds(this);">Ids</button>
 125         <button class="btn active" id="toggleTypeVisibility" onclick="showTypes(!$(this).hasClass('active'));">Types</button>
 126         <button class="btn btn-default" id="togglePropertiesVisibility" onclick="showOrHideProperties(!$(this).hasClass('active'));">Properties</button>
 127         <button class="btn btn-default" id="toggleDeploymentArtifactsVisibility" onclick="showOrHideDeploymentArtifacts(!$(this).hasClass('active'));">Deployment Artifacts</button>
 128         <button class="btn btn-default" id="toggleReqCapsVisibility" onclick="showOrHideReqCaps(!$(this).hasClass('active'));">Requirements &amp; Capabilities</button>
 129         <button class="btn btn-default" id="PoliciesVisibility" onclick="showOrHidePolicies(!$(this).hasClass('active'));">Policies</button>
 130 </div>
 131