CODEWITHSUNDEEP
jhipsterreveal.js
MobileMateo
MobileMateo

Reputation: 459

Reveal.js presentation full screen from JHipster

I am trying to show a reveal.js presentation full screen from a JHipster single page app. The reveal.js example below works fine inside JHipster, it's just not full screen. It can be made full screen by creating a second page, but given JHipster's design as a single page app things get messy with grunt and the production profile. I've also tried hiding the app menu bar and footer div elements but the reveal presentation still has padding around it. Ideally a full-screen view can configured.

Simple Reveal slide

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

Upvotes: 0

Views: 920

Answers (2)

MobileMateo
MobileMateo

Reputation: 459

I solved the problem while keeping it a single page app. Previously I tried hiding elements of the page that prevented full-screen, but padding on the main div container was preventing full screen. The solution was to create a second ui-view div designed for full screen and hide all other div elements.

Solution: 1. Add "hidewhenfullscreen" class to the elements to hide. 2. Use javascript to show/hide elements 3. Add a second fullpage ui-view designed for full screen 4. Reference the fullpage ui-view from the controller

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 to show/hide elements

<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 controller

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

The page has a single small "Home" href that calls the show function. This way the user can go back and forth between the full-screen Reveal presentation and the standard jHipster view.

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>

For completeness, creating a second page can work but I don't think it is worth the added complexity. A two-page solution worked fine in the development profile, but the production profile had issues with caching shared css files, js files and fonts. With time and energy, I am sure the proper grunt configuration can be made to work, although the idea seems to counter the single page design concept. While in Rome, do as the Romans do.

Upvotes: 0

Ga&#235;l Marziou
Ga&#235;l Marziou

Reputation: 16284

A second page is the way to go and below is a way to by-pass optimizations made by JHipster's production build.

JHipster's production build only optimizes files under src/main/webapp/scripts and src/main/webapp/assets directories. So, put your presentation files including revealjs under another folder (e.g. src/main/webapp/slides) and use a simple link from your app to load the presentation.

This is what is done for swagger-ui under src/main/webapp/swagger-ui

Upvotes: 0

Related Questions