Changes for page ExternalApps

Last modified by bougault on 2019/09/12 12:46

From 2.194 to 2.195 From 2.205 to 2.206

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.205

edited by bougault
on 2019/05/24 12:19

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

@@ -1,281 +1,43 @@
++{{include reference='Collaboratory.Apps.Apps.Code.AppsMacros' /}}
  {{velocity}}
--#set ($discard = $doc.use('InstalledApp.Code.InstalledAppClass'))
++{{html clean="false"}}
++## space: $spaceDoc <br />
++## children: $spaceDoc.getChildren()
++#set ($discard = $xwiki.ssx.use('Collaboratory.Apps.Apps.Code.AppsCss'))
  #set($query = 'select doc from Document doc, doc.object(ExternalApps.Code.ExternalAppsClass) as app')
  #set($applications = $services.query.xwql($query).addFilter('hidden').execute())
--#if ($xcontext.action == 'edit')
--#set ($discard = $xwiki.ssx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppCss'))
--#set ($discardjs = $xwiki.jsx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppJs'))
--#macro( applications $applications)
++#applications( $applications false)
++
++#*
  <div class="applications">
    #foreach($application in $applications)
--    #set($selectField = $application.toString().concat('-selected'))
--    #set($detailsField = $application.toString().concat('-details'))
--    <div class="application">
--      ## TODO: if not in edit mode, do not define the input + fieldname
--      <input type="radio" data-type="select" name="InstalledApp.Code.InstalledAppClass_0_app" id="$selectField" value="$application" />
--      <input type="checkbox" data-type="details" name="detailedView" id="$detailsField" />
--      <label for="$detailsField" class="details-overlay"></label>
--      #application( $application $selectField $detailsField)
--    </div>
--  #end
--</div>
--#end
--
--#macro( application $application $selectField $detailsField)
      #set($app = $xwiki.getDocument($application))
++    #set($URL = $app.getValue('url'))
      #set($title = $app.getDisplayTitle())
--    <div class="application-content">
--       #if($app.getAttachment('logo.png').isImage())
--        <img src="$app.getAttachmentURL('logo.png')" width="75" height="75" alt="$app.getValue('title').replace('"', '\"')">
--       #else
--         <img
--           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89x8AAuEB74Y0o2cAAAAASUVORK5CYII="
--           width="75"
--           height="75"
--           alt=""
--         >
++    #set($category = $app.display('category'))
++    <div>
++      <div class="application">
++      #if($app.getAttachment('logo.png').isImage())
++        <img src="$app.getAttachmentURL('logo.png')" width="75" height="75" alt="$title.replace('"', '\"')">
++      #else
++         <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89x8AAuEB74Y0o2cAAAAASUVORK5CYII=" width="75" height="75" alt="">
        #end
--      <div class="tags"><span>$app.getValue('category')</span></div>
++      <div class="tags"><span>$category</span></div>
        <h3 class="title">$title</h3>
++      <a href="$URL">$URL</a>
        <p class="description">$!app.getValue('description')</p>
--      <div class="application-buttons">
--        <label for="$detailsField" class="btn label-more"></label>
--        <label for="$selectField" class="btn btn-primary choose-app">Choose this App</label>
++      ##<input id="$application.concat('-visibility')" type="checkbox" #if($app.getValue('private') == 1)checked#end disabled /><label for="$application.concat('-visibility')">Private</label>
++
++       <div>
++         ##$app.getValue('maintainers')
++        ##$app.display('maintainers')
        </div>
--      <div class="details">
--        <h4>Maintainers</h4>
--        [list of maintainers]
--        <h4>Documentation</h4>
--        App documentation link
--        <h4>URL</h4>
--        $app.getValue('url')
++Application document: <a href="$app.getURL()">$app.getURL()</a>
        </div>
      </div>
--#end
--
--{{html wiki="true"}}
--(% class="xform" %)
--(((
--  ; <label#if ($xcontext.action == 'edit') for="ExternalApps.Code.ExternalAppsClass_0_title"#end>$escapetool.xml($doc.displayPrettyName('title', false, false))</label>##
--    (% class="xHint" %)$services.localization.render('Required. This is how the item will be displayed in the navigation')
--  : $doc.display('title')
--)))
--{{/html}}
--
--{{html clean="false"}}
--
--##{{html clean="false"}}
--##set ($displayDocExtra = false)
--<style>
--#document-title {
--  visibility: hidden;
--}
--
--.applications {
--  display: grid;
--  grid-gap: 20px;
--}
--
--@media screen and (min-width: 640px) {
--  .applications {
--    grid-template-columns: 1fr 1fr;
--   }
--}
--/*
--@media screen and (min-width: 900px) {
--  .applications {
--    grid-template-columns: 1fr 1fr 1fr;
--  }
--}
--*/
--
--@media screen and (min-width: 1200px) {
--  .applications {
--    grid-template-columns: 1fr 1fr 1fr;
--  }
--}
--
--@media screen and (min-width: 1800px) {
--  .applications {
--    grid-template-columns: 1fr 1fr 1fr 1fr;
--  }
--}
--.application {
--background: var(--color-support-light);
--}
--
--.application-content {
--  border: 1px solid var(--color-support-light);
--  background: var(--color-white);
--  padding: 1rem;
--  height: 100%;
--  font-weight: normal;
--  display: block;
--  position: relative;
--  padding-bottom: 3rem;
--}
--
--.application-content .details {
--  display: none;
--}
--
--
--.application .application-buttons {
--  display: flex;
--  position: absolute;
--  bottom: 0px;
--  left: 0;
--  right:0;
--}
--
--.application .application-buttons .btn {
--  width: 50%;
--  margin: 0;
--  border-radius: 0 !important;
--}
--
--.application img {
--  display: block;
--  margin: 0 auto 1.5rem auto;
--}
--
--.application .title {
--  text-align: center;
--  height: 3em;
--}
--
--.application .tags {
--  display: flex;
--  justify-content: space-around;
--  margin-bottom: 1.5rem;
--}
--
--.application .tags span {
--  font-size: .8rem;
--  border: 1px solid var(--color-support-dark);
--  padding: .2rem .3rem;
--  border-radius: var(--border-radius-default);
--}
--
--.application .description {
--  text-align: center;
--}
--
--.applications input[type="radio"],
--.applications input[type="checkbox"]{
--display: none;
--}
--
--
--.applications input[data-type="select"]:checked ~ div.application-content {
--  border: 1px solid var(--color-primary);
--}
--
--
--.applications input[data-type="details"]:checked ~ div.application-content {
--  position: fixed;
--  top: 50%;
--  left: 50%;
--  width: 80vw;
--  height: 80vh;
--  margin-left:-40vw;
--  margin-top: -40vh;
--  background: #FFF;
--  z-index: 255;
--  overflow: auto;
--}
--
--.label-more {
--  cursor: zoom-in;
--}
--.label-more::before {
--  content: "More";
--}
--.applications input[data-type="details"]:checked ~ .application-content .details {
--  display: block;
--}
--
--.details-overlay {
--  display: none;
--  cursor: zoom-out;
--}
--
--.applications input[data-type="details"]:checked ~ .details-overlay {
--  width:100vw;
--  height: 100vh;
--  background: var(--color-support-dark);
--  opacity: .7;
--  content: '';
--  display: block;
--  position: fixed;
--  margin: 0;
--  top:0;
--  left:0;
--  z-index: 254;
--}
--
--.applications input[data-type="details"]:checked ~ div .label-more {
-- cursor: zoom-out;
--}
--.applications input[data-type="details"]:checked ~ div .label-more::before {
--  content:"Close";
--}
--</style>
--
--
--
--<div class="xform">
--<dl>
--<dt>
--<label>Choose an application in the list below</label>
--<dt>
--</dl>
++  #end
  </div>
--
--#applications( $applications )
--
--<script>
--document.addEventListener('DOMContentLoaded', function() {
--  let saveAndView = document.querySelector('input[name="action_save"]');
--  Array.from(document.querySelectorAll('label.choose-app')).forEach(function(button){
--    button.addEventListener('click', function() { setTimeout(function() { saveAndView.click() }, 250)});
--  });
--});
--</script>
--
--{{/html}}
--#else
--##set($discard = $doc.use('InstalledApp.Code.InstalledAppClass'))
--#set($appId = $doc.display('app'))
--#set($app = $xwiki.getDocument($appId))
--#*{{html clean="false"}}
--<style>
--#external-app {
--width: 100%;
--height: 100vh;
--}
--</style>
--<iframe id="external-app" src="$app.getValue('url')"></iframe>
--{{/html}}
  *#
--
--{{html clean="false"}}
--#set ($discard = $xwiki.ssx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppCss'))
--#set ($discardjs = $xwiki.jsx.use('Collaboratory.Apps.IFrameApp.Code.IFrameAppJs'))
--<style>
--#iframeApp-container {
--background: #FFF;
--}
--</style>
--
--<div id="iframeApp-container">
--    <div class="app-toolbar">
--        <button id="iframeApp-fullscreen"><span class="fa fa-arrows-alt"></span></button>
--    </div>
--    <iframe id="iframeApp" src="$app.get('url')"></iframe>
--</div>
  {{/html}}
--#end
--
  {{/velocity}}