Reveal.js 来自 JHipster 的全屏演示

Question

我正在尝试从 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>

Answer 1

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

JHipster 的产品build 只优化src/main/webapp/scripts 和src/main/webapp/assets 目录下的文件。因此，将包含 revealjs 的演示文稿文件放在另一个文件夹下（例如 src/main/webapp/slides），然后使用应用程序中的简单 link 来加载演示文稿。

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

下为 swagger-ui 所做的

Answer 2

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

解决方法： 1.在要隐藏的元素中添加"hidewhenfullscreen" class。 2.使用javascript到show/hide个元素 3. 添加第二个全页 ui-专为全屏设计的视图 4. 从控制器

引用整页ui-视图

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 到 show/hide 个元素

<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'
            }
        }
    })

该页面有一个小的 "Home" 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 配置起作用，尽管这个想法似乎与单页面设计概念背道而驰。入乡随俗

Reveal.js 来自 JHipster 的全屏演示

Reveal.js presentation full screen from JHipster

reveal.js

jhipster