Presentation mode is not complete, but it's ready for testing

Author: rafajaques

CREDITS

@@ -15,6 +15,9 @@ i18n-node https://www.npmjs.com/package/i18n-node
 Atom Electron
 NodeJS
 
+[Icons]
+Presentation icons made by EpicCoders and Freepik from www.flaticon.com 
+
 [HTML/CSS/JS]
 Twitter Bootstrap
 Split.js https://github.com/nathancahill/Split.js

css/index.css

@@ -83,6 +83,22 @@ body{
   margin-left:0;
 }
 
+/**
+ * Presentation modal
+ */
+.presentation-button{
+  text-align: center;
+  border-radius: 10px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.presentation-button:hover{
+  background-color: #f2f2f2;
+}
+.presentation-button img{
+  width: 200px;
+}
+
 /**
  * Editor and output
  */

gfx/presentation/multi.png

@@ -282,8 +282,21 @@ <h2 class="text-center">PHP Assistant <span id="version"></span></h2>
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-body">
-            <button onclick="presentationSingle();">Single</button>
-            <button onclick="presentationMulti();">Multi</button>
+
+            <!-- Choose presentation mode -->
+            <div class="container-fluid">
+              <div class="row">
+                <div id="presentation-single-button" class="col-xs-6 presentation-button">
+                  <img src="gfx/presentation/single.png">
+                  <h2 data-string="Single Display Mode"></h2>
+                </div>
+                <div id="presentation-multi-button" class="col-xs-6 presentation-button">
+                  <img src="gfx/presentation/multi.png">
+                  <h2 data-string="Multi Display Mode"></h2>
+                </div>
+              </div>
+            </div>
+
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal" data-string="Close"></button>

gfx/presentation/single.png

@@ -118,6 +118,10 @@ function renderApp(refresh) {
 
       $("*[data-event='sidebar-presentation']").click(checkPresentation); // Invoke checkPresentation();
 
+      // Presentation modal
+      $("#presentation-single-button").click(presentationSingle);
+      $("#presentation-multi-button").click(presentationMulti);
+
       // Settings modal
       // "Save" button click
       $("#settings-save").click(saveSettings) // Invoke saveSettings()

index.html

@@ -94,3 +94,8 @@ function multiLayoutOff() {
   ipc.send("asynchronous-message", "attach-output");
   $("*[data-event='sidebar-presentation']").removeClass("active");
 }
+
+// Signal when output window is closed
+function outputClosed() {
+  presentationEnd();
+}

js/index.js

@@ -69,6 +69,8 @@
 	"Output": "Output",
 	"Inscrease font size": "Aumentar tamanho da fonte",
 	"Decrease font size": "Diminuir tamanho da fonte",
-	"Presentation": "Presentation",
-	"Try to open secondary window in another display": "Try to open secondary window in another display"
-}
+	"Presentation": "Apresentação",
+	"Try to open secondary window in another display": "Tentar abrir janela secundária em outro monitor",
+	"Single Display Mode": "Modo Monitor Único",
+	"Multi Display Mode": "Modo Múltiplos Monitores"
+}

js/presentation.js

@@ -161,6 +161,11 @@ ipc.on('asynchronous-message', function(event, arg) {
 
     outputWindow.loadURL('file://' + Path.join(__dirname, 'output.html'));
 
+    // We need to tell main window that output window was closed
+    outputWindow.on('closed', function() {
+      mainWindow.webContents.executeJavaScript('outputClosed();');
+    });
+
     // Debug
     if (debug)
       outputWindow.toggleDevTools();