github.com/cs3org/reva/v2@v2.27.7/pkg/siteacc/html/template.go (about)

     1  // Copyright 2018-2020 CERN
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //     http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  //
    15  // In applying this license, CERN does not waive the privileges and immunities
    16  // granted to it by virtue of its status as an Intergovernmental Organization
    17  // or submit itself to any jurisdiction.
    18  
    19  package html
    20  
    21  const panelTemplate = `
    22  <!DOCTYPE html>
    23  <html>
    24  <head>	
    25  	<script>
    26  		const STATE_NONE = 0
    27  		const STATE_STATUS = 1
    28  		const STATE_SUCCESS = 2
    29  		const STATE_ERROR = 3
    30  
    31  		function enableForm(id, enable) {
    32  			var form = document.getElementById(id);
    33  			var elements = form.elements;
    34  			for (var i = 0, len = elements.length; i < len; ++i) {
    35  				elements[i].disabled = !enable;
    36  			}
    37  		}
    38  
    39  		function setElementVisibility(id, visible) {
    40  			var elem = document.getElementById(id);
    41  			if (visible) {			
    42  				elem.classList.add("visible");
    43  				elem.classList.remove("hidden");
    44  			} else {
    45  				elem.classList.remove("visible");
    46  				elem.classList.add("hidden");
    47  			}
    48  		}
    49  
    50  		function setState(state, msg = "", formId = null, focusElem = null, formState = null) {
    51  			setElementVisibility("status", state == STATE_STATUS);
    52  			setElementVisibility("success", state == STATE_SUCCESS);
    53  			setElementVisibility("error", state == STATE_ERROR);
    54  
    55  			var elem = null;
    56  			switch (state) {
    57  			case STATE_STATUS:
    58  				elem = document.getElementById("status");	
    59  				break;
    60  
    61  			case STATE_SUCCESS:
    62  				elem = document.getElementById("success");	
    63  				break;
    64  
    65  			case STATE_ERROR:
    66  				elem = document.getElementById("error");	
    67  				break;
    68  			}
    69  
    70  			if (elem !== null) {
    71  				elem.innerHTML = msg;
    72  			}
    73  
    74  			if (formId !== null && formState !== null) {
    75  				enableForm(formId, formState);
    76  			}
    77  
    78  			if (focusElem !== null) {
    79  				var elem = document.getElementById(focusElem);
    80  				elem.focus();
    81  			}
    82  		}
    83  
    84  		FormData.prototype.getTrimmed = function(id) {
    85  			var val = this.get(id);
    86  
    87  			if (val != null) {
    88  				return val.trim();
    89  			} else {
    90  				return "";
    91  			}
    92  		}
    93  
    94  		$(CONTENT_JAVASCRIPT)
    95  	</script>
    96  	<style>
    97  		form {
    98  			border-color: lightgray !important;
    99  		}
   100  		button {
   101  			min-width: 140px;
   102  		}
   103  		input {
   104  			width: 95%;
   105  		}
   106  		label {
   107  			font-weight: bold;
   108  		}
   109  		h1 {
   110  			text-align: center;
   111  		}
   112  
   113  		.box {
   114  			width: 100%;
   115  			border: 1px solid black;
   116  			border-radius: 10px;
   117  			padding: 10px;
   118  		}
   119  		.container {
   120  			width: 900px;
   121  			display: grid;
   122  			grid-gap: 10px;
   123  			position: absolute;
   124  			left: 50%;
   125  			transform: translate(-50%, 0);
   126  		}
   127  		.container-inline {
   128  			display: inline-grid;
   129  			grid-gap: 10px;
   130  		}
   131  		.status {
   132  			border-color: #F7B22A;
   133  			background: #FFEABF;
   134  		}
   135  		.success {
   136  			border-color: #3CAC3A;
   137  			background: #D3EFD2;
   138  		}
   139  		.error {
   140  			border-color: #F20000;
   141  			background: #F4D0D0;
   142  		}
   143  		.visible {
   144  			display: block;
   145  		}
   146  		.hidden {
   147  			display: none;
   148  		}
   149  
   150  		$(CONTENT_STYLESHEET)
   151  	</style>
   152  	<title>$(TITLE)</title>
   153  </head>
   154  <body>
   155  
   156  <div class="container">
   157  	<div><h1>$(CAPTION)</h1></div>
   158  	
   159  	$(CONTENT_BODY)
   160  	
   161  	<div id="status" class="box status hidden">
   162  	</div>
   163  	<div id="success" class="box success hidden">
   164  	</div>
   165  	<div id="error" class="box error hidden">
   166  	</div>
   167  </div>
   168  </body>
   169  </html>
   170  `