winery/org.eclipse.winery.repository/src/main/webapp/jsp/entitytypes/relationshiptypes/visualappearance.jsp

   1 <%--
   2 /*******************************************************************************
   3  * Copyright (c) 2012-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  *    Yves Schubert - switch to bootstrap 3
  13  *******************************************************************************/
  14 --%>
  15 <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  16 <%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
  17
  18 <script type='text/javascript' src='${pageContext.request.contextPath}/components/raphael/raphael.js'></script>
  19 <script type='text/javascript' src='${pageContext.request.contextPath}/components/colorwheel/javascripts/colorwheel.js'></script>
  20
  21 <ul class="nav nav-tabs" id="myTab">
  22         <li class="active"><a href="#icon">Icon</a></li>
  23         <li><a href="#colors">Colors</a></li>
  24         <li><a href="#arrow">Arrow</a></li>
  25 </ul>
  26
  27 <div class="tab-content">
  28         <div class="tab-pane active" id="icon">
  29                 <br />
  30                 <t:imageUpload
  31                         label="Icon (16x16) used in palette"
  32                         URL="visualappearance/16x16"
  33                         id="upSmall"
  34                         width="16px"
  35                         resize="16"
  36                         accept="image/*"/>
  37         </div>
  38
  39         <div class="tab-pane" id="colors">
  40                 <br />
  41                 <form>
  42                         <fieldset>
  43                                 <t:colorwheel label="Line Color" color="${it.color}" id="color" url="color" />
  44                                 <t:colorwheel label="Hover Color" color="${it.hoverColor}" id="hovercolor" url="hovercolor" />
  45                         </fieldset>
  46                 </form>
  47         </div>
  48
  49         <div class="tab-pane" id="arrow">
  50                 <br />
  51                 <form>
  52                         <fieldset>
  53                                 <div class="form-group">
  54                                         <label for="arrow">Arrow appearance</label>
  55                                         <div style="width:100%" id="arrow">
  56                                                 <div style="float:left; width:50px;">
  57                                                         <!-- Same values as the beginning of the file names in src\main\webapp\images\relationshiptype -->
  58                                                         <select id="dropDownSourceHead">
  59                                                                 <option value="none"></option>
  60                                                                 <option value="PlainArrow"></option>
  61                                                                 <option value="Diamond"></option>
  62                                                                 <!--  not yet supported
  63                                                                 <option value="simpleArrow"></option>
  64                                                                 <option value="doubleArrow"></option>
  65                                                                 <option value="circle"></option>
  66                                                                 <option value="square"></option> -->
  67                                                         </select>
  68                                                 </div>
  69                                                 <div style="float:left; width:80px;">
  70                                                         <select id="lineSelect">
  71                                                                 <option value="plain"></option>
  72                                                                 <option value="dotted"></option>
  73                                                                 <option value="dotted2"></option>
  74                                                         </select>
  75                                                 </div>
  76                                                 <div style="float:left; width:50px;">
  77                                                         <select id="dropDownTargetHead">
  78                                                                 <option value="none"></option>
  79                                                                 <option value="PlainArrow"></option>
  80                                                                 <option value="Diamond"></option>
  81                                                                 <!--  not yet supported
  82                                                                 <option value="simpleArrow"></option>
  83                                                                 <option value="doubleArrow"></option>
  84                                                                 <option value="circle"></option>
  85                                                                 <option value="square"></option> -->
  86                                                         </select>
  87                                                 </div>
  88                                         </div>
  89                                 </div>
  90                         </fieldset>
  91                 </form>
  92         </div>
  93 </div>
  94
  95 <script>
  96 $('#myTab a').click(function (e) {
  97         e.preventDefault();
  98         $(this).tab('show');
  99 });
 100
 101 /**
 102  * @param sourceOrTarget "Source" or "Target"
 103  */
 104 function formatArrow(config, sourceOrTarget) {
 105         var path = "${pageContext.request.contextPath}/images/relationshiptype/" + config.id + sourceOrTarget + ".png";
 106         return "<img src='" + path +"' />";
 107 }
 108
 109 var globalAJAXParamsForSelect2VisualAppearance = {
 110         type  : "PUT",
 111         contentType : "text/plain",
 112         success : function() {
 113                 vShowSuccess("Successfully updated arrow appearance");
 114         },
 115         error : function(jqXHR, textStatus, errorThrown) {
 116                 vShowAJAXError("Could not supdate arrow appearance", jqXHR, errorThrown);
 117         }
 118 }
 119
 120 /* source arrow head */
 121
 122 function formatArrowSource(config) {
 123         return formatArrow(config, "Source");
 124 }
 125
 126 // set stored value
 127 $("#dropDownSourceHead").val("${it.sourceArrowHead}")
 128 // enable storage on change of element
 129 .on("change", function(e) {
 130         params = globalAJAXParamsForSelect2VisualAppearance;
 131         params.url = "visualappearance/sourcearrowhead";
 132         params.data = e.val;
 133         $.ajax(params);
 134 })
 135 // make the selection box show arrows
 136 .select2({
 137         formatResult: formatArrowSource,
 138         formatSelection: formatArrowSource,
 139         escapeMarkup: function(m) { return m; },
 140         minimumResultsForSearch: -1
 141 });
 142
 143
 144 /* line */
 145 function formatLine(config) {
 146         var path = "${pageContext.request.contextPath}/images/relationshiptype/" + config.id + "Line.png";
 147         return "<img src='" + path +"' />";
 148 }
 149
 150 //set stored value
 151 $("#lineSelect").val("${it.dash}")
 152 //enable storage on change of element
 153 .on("change", function(e) {
 154         params = globalAJAXParamsForSelect2VisualAppearance;
 155         params.url = "visualappearance/dash";
 156         params.data = e.val;
 157         $.ajax(params);
 158 })
 159 //make the selection box show arrows
 160 .select2({
 161         formatResult: formatLine,
 162         formatSelection: formatLine,
 163         escapeMarkup: function(m) { return m; },
 164         minimumResultsForSearch: -1
 165 });
 166
 167
 168
 169 /* target arrow head */
 170
 171 function formatArrowTarget(config) {
 172         return formatArrow(config, "Target");
 173 }
 174
 175 //set stored value
 176 $("#dropDownTargetHead").val("${it.targetArrowHead}")
 177 //enable storage on change of element
 178 .on("change", function(e) {
 179         params = globalAJAXParamsForSelect2VisualAppearance;
 180         params.url = "visualappearance/targetarrowhead";
 181         params.data = e.val;
 182         $.ajax(params);
 183 })
 184 //make the selection box show arrows
 185 .select2({
 186         formatResult: formatArrowTarget,
 187         formatSelection: formatArrowTarget,
 188         escapeMarkup: function(m) { return m; },
 189         minimumResultsForSearch: -1
 190 });
 191
 192 </script>
 193