Question

我试图从JHipster单页应用程序全屏显示reveal.js演示文稿。下面的reveal.js示例在JHipster中运行良好，它不是全屏。它可以通过创建第二页来全屏显示，但是如果将JHipster的设计作为单页应用程序，那么咕噜声和生产配置文件就会变得混乱。我还尝试隐藏了应用程序菜单栏和页脚div元素，但是显示的演示文稿仍然在它周围填充。理想情况下，可以配置全屏视图。

简单显示幻灯片

<div ng-cloak>
  <div class="reveal">
    <div class="slides">
      <section data-background="#faebd7">
        <h1>FULL SCREEN SLIDE</h1>
       </section>
      </div>
    </div>
</div>

Answer 1

第二页是下去的方式，是JHipster的生产版本进行旁路优化的一种方式。

JHipster的生产版本仅优化src/main/webapp/scripts和src/main/webapp/assets目录下的文件。因此，将您的演示文稿文件（包括revealjs）放在另一个文件夹（例如src/main/webapp/slides）下，并使用应用中的简单链接加载演示文稿。

这是为src/main/webapp/swagger-ui

下的swagger-ui所做的

Answer 2

我在保持单页应用的同时解决了这个问题。以前我试图隐藏阻止全屏的页面元素，但主div容器上的填充阻止了全屏。解决方案是创建第二个ui-view div，专为全屏设计并隐藏所有其他div元素。

解决方案： 1.添加＆＃34; hidewhenfullscreen＆＃34;要隐藏的元素的类。 2.使用javascript显示/隐藏元素 3.添加第二个全屏ui-view，专为全屏设计 4.参考控制器的全页ui-view

的index.html

<div ng-show="{{ENV === 'dev'}}" class="development hidewhenfullscreen" ng-cloak=""></div>
<div ui-view="navbar" ng-cloak="" class="hidewhenfullscreen"></div>
<div class="container hidewhenfullscreen">
    <div class="well" ui-view="content"></div>

    <div class="footer">
        <p translate="footer">This is your footer</p>
    </div>
</div>

显示/隐藏元素的JavaScript

<script>
    hide(document.querySelectorAll('.hidewhenfullscreen'));

    function hide (elements) {
        elements = elements.length ? elements : [elements];
        for (var index = 0; index < elements.length; index++) {
            elements[index].style.display = 'none';
        }
    }
    function show (elements) {
        elements = elements.length ? elements : [elements];
        for (var index = 0; index < elements.length; index++) {
            elements[index].style.display = 'block';
        }
    }
</script>

JavaScript控制器

    .state('show', {
        parent: '',
        url: '/show/{presentationName}',
        data: {
            authorities: [],  // none, wide open
            pageTitle: 'page title'
        },
        views: {
            'fullpage@': {
                templateUrl: 'scripts/show/show.html',
                controller: 'ShowController'
            }
        }
    })

该页面有一个小的＆＃34; Home＆＃34;调用show函数的href。这样，用户可以在全屏显示演示文稿和标准jHipster视图之间来回切换。

show.html

<div ng-show="{{ENV === 'dev'}}" class="development"></div>
<div class="miniMenu" id="miniMenu" ng-cloak="">
    <a href="/" onClick="show(document.querySelectorAll('.hidewhenfullscreen')); ">Home</a>
</div>
<div class="reveal">
    <div class="slides">
        <section data-background={{getBackgroundURI($index)}} ng-repeat="slide in slides track by $index">
            <div ng-bind-html="getContent($index)"></div>
        </section>
    </div>
</div>

为了完整起见，创建第二页可以工作，但我认为值得增加复杂性。两页解决方案在开发配置文件中运行良好，但生产配置文件存在缓存共享css文件，js文件和字体的问题。凭借时间和精力，我确信可以使用正确的grunt配置，尽管这个想法似乎与单页设计概念背道而驰。在罗马时，像罗马人一样。

来自JHipster的Reveal.js演示全屏

2 个答案: