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.195
edited by bougault
on 2019/05/17 10:51
Change comment: There is no comment for this version
To version 2.181
edited by bougault
on 2019/05/16 07:14
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,140 +1,24 @@
1 1  {{velocity}}
2 -#set ($discard = $doc.use('InstalledApp.Code.InstalledAppClass'))
2 +{{html clean="false"}}
3 +## space: $spaceDoc <br />
4 +## children: $spaceDoc.getChildren()
5 +
3 3  #set($query = 'select doc from Document doc, doc.object(ExternalApps.Code.ExternalAppsClass) as app')
4 4  #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)
70 70  <style>
71 -#document-title {
72 - visibility: hidden;
73 -}
74 -
75 75  .applications {
76 76   display: grid;
77 - grid-gap: 20px;
12 + grid-template-columns: 1fr 1fr 1fr 1fr;
13 + grid-gap: 10px;
78 78  }
79 79  
80 -@media screen and (min-width: 640px) {
81 - .applications {
82 - grid-template-columns: 1fr 1fr;
83 - }
84 -}
85 -/*
86 -@media screen and (min-width: 900px) {
87 - .applications {
88 - grid-template-columns: 1fr 1fr 1fr;
89 - }
90 -}
91 -*/
92 -
93 -@media screen and (min-width: 1200px) {
94 - .applications {
95 - grid-template-columns: 1fr 1fr 1fr;
96 - }
97 -}
98 -
99 -@media screen and (min-width: 1800px) {
100 - .applications {
101 - grid-template-columns: 1fr 1fr 1fr 1fr;
102 - }
103 -}
104 104  .application {
105 -background: var(--color-support-light);
106 -}
107 -
108 -.application-content {
109 109   border: 1px solid var(--color-support-light);
110 - background: var(--color-white);
111 111   padding: 1rem;
112 112   height: 100%;
113 - font-weight: normal;
114 - display: block;
115 - position: relative;
116 - padding-bottom: 3rem;
117 117  }
118 118  
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 -
138 138  .application img {
139 139   display: block;
140 140   margin: 0 auto 1.5rem auto;
... ... @@ -161,121 +161,36 @@
161 161  .application .description {
162 162   text-align: center;
163 163  }
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 -}
224 224  </style>
225 225  
226 226  
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>
51 +<div class="applications">
52 + #foreach($application in $applications)
53 + #set($app = $xwiki.getDocument($application))
54 + #set($URL = $app.display('url'))
55 + #set($title = $app.display('title'))
56 + #set($category = $app.display('category'))
57 + <div>
58 + <div class="application">
59 + #if($app.getAttachment('logo.png').isImage())
60 + <img src="$app.getAttachmentURL('logo.png')" width="75" height="75" alt="$title.replace('"', '\"')">
61 + #else
62 + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89x8AAuEB74Y0o2cAAAAASUVORK5CYII=" width="75" height="75" alt="">
63 + #end
64 + <div class="tags"><span>$category</span></div>
65 + <h3 class="title">$title</h3>
66 + ##<a href="$URL">$URL</a>
67 + <p class="description">$!app.getValue('description')</p>
68 + ##<input id="$application.concat('-visibility')" type="checkbox" #if($app.getValue('private') == 1)checked#end disabled /><label for="$application.concat('-visibility')">Private</label>
69 +
70 + <div>
71 + ##$app.getValue('maintainers')
72 + ##$app.display('maintainers')
73 + </div>
74 +
75 + </div>
275 275   </div>
276 - <iframe id="iframeApp" src="$app.get('url')"></iframe>
77 + #end
277 277  </div>
278 278  {{/html}}
279 -#end
280 -
281 281  {{/velocity}}