Failed to execute template. Cause: [Access denied when checking [script] access to [xwiki:Collaboratory.UX.HbpSkin.WebHome] for user [xwiki:XWiki.Admin]]. Click on this message for details.

ExternalApps - HBP Wiki

IAM21 instance, do not create collab nor modify a team, your changes will be lost


Changes for page ExternalApps

Last modified by bougault on 2019/09/12 12:46
From version 2.183
edited by bougault
on 2019/05/16 07:18
Change comment: There is no comment for this version
To version 2.195
edited by bougault
on 2019/05/17 10:51
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,15 +1,80 @@
1 1  {{velocity}}
2 -{{html clean="false"}}
3 -## space: $spaceDoc <br />
4 -## children: $spaceDoc.getChildren()
5 -
2 +#set ($discard = $doc.use('InstalledApp.Code.InstalledAppClass'))
6 6  #set($query = 'select doc from Document doc, doc.object(ExternalApps.Code.ExternalAppsClass) as app')
7 7  #set($applications = $services.query.xwql($query).addFilter('hidden').execute())
5 +#if ($xcontext.action == 'edit')
6 +#set ($discard = $xwiki.ssx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppCss'))
7 +#set ($discardjs = $xwiki.jsx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppJs'))
8 8  
9 +#macro( applications $applications)
10 +<div class="applications">
11 + #foreach($application in $applications)
12 + #set($selectField = $application.toString().concat('-selected'))
13 + #set($detailsField = $application.toString().concat('-details'))
14 + <div class="application">
15 + ## TODO: if not in edit mode, do not define the input + fieldname
16 + <input type="radio" data-type="select" name="InstalledApp.Code.InstalledAppClass_0_app" id="$selectField" value="$application" />
17 + <input type="checkbox" data-type="details" name="detailedView" id="$detailsField" />
18 + <label for="$detailsField" class="details-overlay"></label>
19 + #application( $application $selectField $detailsField)
20 + </div>
21 + #end
22 +</div>
23 +#end
24 +
25 +#macro( application $application $selectField $detailsField)
26 + #set($app = $xwiki.getDocument($application))
27 + #set($title = $app.getDisplayTitle())
28 + <div class="application-content">
29 + #if($app.getAttachment('logo.png').isImage())
30 + <img src="$app.getAttachmentURL('logo.png')" width="75" height="75" alt="$app.getValue('title').replace('"', '\"')">
31 + #else
32 + <img
33 + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89x8AAuEB74Y0o2cAAAAASUVORK5CYII="
34 + width="75"
35 + height="75"
36 + alt=""
37 + >
38 + #end
39 + <div class="tags"><span>$app.getValue('category')</span></div>
40 + <h3 class="title">$title</h3>
41 + <p class="description">$!app.getValue('description')</p>
42 + <div class="application-buttons">
43 + <label for="$detailsField" class="btn label-more"></label>
44 + <label for="$selectField" class="btn btn-primary choose-app">Choose this App</label>
45 + </div>
46 + <div class="details">
47 + <h4>Maintainers</h4>
48 + [list of maintainers]
49 + <h4>Documentation</h4>
50 + App documentation link
51 + <h4>URL</h4>
52 + $app.getValue('url')
53 + </div>
54 + </div>
55 +#end
56 +
57 +{{html wiki="true"}}
58 +(% class="xform" %)
59 +(((
60 + ; <label#if ($xcontext.action == 'edit') for="ExternalApps.Code.ExternalAppsClass_0_title"#end>$escapetool.xml($doc.displayPrettyName('title', false, false))</label>##
61 + (% class="xHint" %)$services.localization.render('Required. This is how the item will be displayed in the navigation')
62 + : $doc.display('title')
63 +)))
64 +{{/html}}
65 +
66 +{{html clean="false"}}
67 +
68 +##{{html clean="false"}}
69 +##set ($displayDocExtra = false)
9 9  <style>
71 +#document-title {
72 + visibility: hidden;
73 +}
74 +
10 10  .applications {
11 11   display: grid;
12 - grid-gap: 10px;
77 + grid-gap: 20px;
13 13  }
14 14  
15 15  @media screen and (min-width: 640px) {
... ... @@ -17,31 +17,59 @@
17 17   grid-template-columns: 1fr 1fr;
18 18   }
19 19  }
20 -
85 +/*
21 21  @media screen and (min-width: 900px) {
22 22   .applications {
23 23   grid-template-columns: 1fr 1fr 1fr;
24 24   }
25 25  }
91 +*/
26 26  
27 27  @media screen and (min-width: 1200px) {
28 28   .applications {
29 - grid-template-columns: 1fr 1fr 1fr 1fr;
95 + grid-template-columns: 1fr 1fr 1fr;
30 30   }
31 31  }
32 32  
33 33  @media screen and (min-width: 1800px) {
34 34   .applications {
35 - grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
101 + grid-template-columns: 1fr 1fr 1fr 1fr;
36 36   }
37 37  }
38 -
39 39  .application {
105 +background: var(--color-support-light);
106 +}
107 +
108 +.application-content {
40 40   border: 1px solid var(--color-support-light);
110 + background: var(--color-white);
41 41   padding: 1rem;
42 42   height: 100%;
113 + font-weight: normal;
114 + display: block;
115 + position: relative;
116 + padding-bottom: 3rem;
43 43  }
44 44  
119 +.application-content .details {
120 + display: none;
121 +}
122 +
123 +
124 +.application .application-buttons {
125 + display: flex;
126 + position: absolute;
127 + bottom: 0px;
128 + left: 0;
129 + right:0;
130 +}
131 +
132 +.application .application-buttons .btn {
133 + width: 50%;
134 + margin: 0;
135 + border-radius: 0 !important;
136 +}
137 +
45 45  .application img {
46 46   display: block;
47 47   margin: 0 auto 1.5rem auto;
... ... @@ -68,36 +68,121 @@
68 68  .application .description {
69 69   text-align: center;
70 70  }
164 +
165 +.applications input[type="radio"],
166 +.applications input[type="checkbox"]{
167 +display: none;
168 +}
169 +
170 +
171 +.applications input[data-type="select"]:checked ~ div.application-content {
172 + border: 1px solid var(--color-primary);
173 +}
174 +
175 +
176 +.applications input[data-type="details"]:checked ~ div.application-content {
177 + position: fixed;
178 + top: 50%;
179 + left: 50%;
180 + width: 80vw;
181 + height: 80vh;
182 + margin-left:-40vw;
183 + margin-top: -40vh;
184 + background: #FFF;
185 + z-index: 255;
186 + overflow: auto;
187 +}
188 +
189 +.label-more {
190 + cursor: zoom-in;
191 +}
192 +.label-more::before {
193 + content: "More";
194 +}
195 +.applications input[data-type="details"]:checked ~ .application-content .details {
196 + display: block;
197 +}
198 +
199 +.details-overlay {
200 + display: none;
201 + cursor: zoom-out;
202 +}
203 +
204 +.applications input[data-type="details"]:checked ~ .details-overlay {
205 + width:100vw;
206 + height: 100vh;
207 + background: var(--color-support-dark);
208 + opacity: .7;
209 + content: '';
210 + display: block;
211 + position: fixed;
212 + margin: 0;
213 + top:0;
214 + left:0;
215 + z-index: 254;
216 +}
217 +
218 +.applications input[data-type="details"]:checked ~ div .label-more {
219 + cursor: zoom-out;
220 +}
221 +.applications input[data-type="details"]:checked ~ div .label-more::before {
222 + content:"Close";
223 +}
71 71  </style>
72 72  
73 73  
74 -<div class="applications">
75 - #foreach($application in $applications)
76 - #set($app = $xwiki.getDocument($application))
77 - #set($URL = $app.display('url'))
78 - #set($title = $app.display('title'))
79 - #set($category = $app.display('category'))
80 - <div>
81 - <div class="application">
82 - #if($app.getAttachment('logo.png').isImage())
83 - <img src="$app.getAttachmentURL('logo.png')" width="75" height="75" alt="$title.replace('"', '\"')">
84 - #else
85 - <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89x8AAuEB74Y0o2cAAAAASUVORK5CYII=" width="75" height="75" alt="">
86 - #end
87 - <div class="tags"><span>$category</span></div>
88 - <h3 class="title">$title</h3>
89 - ##<a href="$URL">$URL</a>
90 - <p class="description">$!app.getValue('description')</p>
91 - ##<input id="$application.concat('-visibility')" type="checkbox" #if($app.getValue('private') == 1)checked#end disabled /><label for="$application.concat('-visibility')">Private</label>
92 -
93 - <div>
94 - ##$app.getValue('maintainers')
95 - ##$app.display('maintainers')
96 - </div>
97 -
98 - </div>
227 +
228 +<div class="xform">
229 +<dl>
230 +<dt>
231 +<label>Choose an application in the list below</label>
232 +<dt>
233 +</dl>
234 +</div>
235 +
236 +#applications( $applications )
237 +
238 +<script>
239 +document.addEventListener('DOMContentLoaded', function() {
240 + let saveAndView = document.querySelector('input[name="action_save"]');
241 + Array.from(document.querySelectorAll('label.choose-app')).forEach(function(button){
242 + button.addEventListener('click', function() { setTimeout(function() { saveAndView.click() }, 250)});
243 + });
244 +});
245 +</script>
246 +
247 +{{/html}}
248 +#else
249 +##set($discard = $doc.use('InstalledApp.Code.InstalledAppClass'))
250 +#set($appId = $doc.display('app'))
251 +#set($app = $xwiki.getDocument($appId))
252 +#*{{html clean="false"}}
253 +<style>
254 +#external-app {
255 +width: 100%;
256 +height: 100vh;
257 +}
258 +</style>
259 +<iframe id="external-app" src="$app.getValue('url')"></iframe>
260 +{{/html}}
261 +*#
262 +
263 +{{html clean="false"}}
264 +#set ($discard = $xwiki.ssx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppCss'))
265 +#set ($discardjs = $xwiki.jsx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppJs'))
266 +<style>
267 +#iframeApp-container {
268 +background: #FFF;
269 +}
270 +</style>
271 +
272 +<div id="iframeApp-container">
273 + <div class="app-toolbar">
274 + <button id="iframeApp-fullscreen"><span class="fa fa-arrows-alt"></span></button>
99 99   </div>
100 - #end
276 + <iframe id="iframeApp" src="$app.get('url')"></iframe>
101 101  </div>
102 102  {{/html}}
279 +#end
280 +
103 103  {{/velocity}}