来自 JHipster 的 Reveal.js 演示全屏答案

【问题标题】：Reveal.js presentation full screen from JHipster来自 JHipster 的 Reveal.js 演示全屏
【发布时间】：2016-02-12 19:00:50
【问题描述】：

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

简单的显示幻灯片

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

【问题讨论】：

标签： jhipster reveal.js

【解决方案1】：

第二页是要走的路，下面是绕过 JHipster 的生产构建所做的优化的方法。

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

这就是src/main/webapp/swagger-ui下swagger-ui所做的事情

【讨论】：

这是个好建议。我将继续沿着第二页的路径。挑战在于我仍然需要访问 ui.router、spring-security 等。
spring-security 应该不是问题，具体取决于您使用的身份验证类型。为什么在你的reveal.js 演示中需要ui-router？
我尝试了第二页方法，但从未解决生产配置文件问题。 swagger-ui 示例没有太大帮助，它使用主要内容 ui-view，并且未在生产配置文件中显示。第二页还存在缓存页面之间共享的 js、css 和字体文件的生产配置文件问题。 Ui-router 是 JHipster 的一个不错的功能。它允许应用根据 URL 路径和参数从数据库中提取特定的 Reveal 演示文稿。
swagger-ui index.html没有使用ui-view，它显示在一个iframe中，只有iframe在ui-view中，swagger-ui在prod中被SwaggerConfiguration类禁用，只需在此处删除@Profile 即可。生产缓存在 WebConfigurer 中配置，只需调整它。对于您所描述的内容，您根本不需要 angular-ui 路由器。

【解决方案2】：

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

解决方案： 1.为要隐藏的元素添加“hidewhenfullscreen”类。 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'
            }
        }
    })

页面有一个小的“主页”href，它调用显示函数。这样，用户可以在全屏 Reveal 演示和标准 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 配置起作用，尽管这个想法似乎与单页设计理念背道而驰。在罗马时，像罗马人那样做。

【讨论】：