Platform: add EmscriptenApplication::setContainerCssClass().

doc/platforms-html5.dox

@@ -329,7 +329,8 @@ the @cb{.css} div#sizer @ce will center it, following the canvas width. If you
 need more advanced styling, check out [m.css](http://mcss.mosra.cz).
 
 @note It's also possible to modify the container CSS classes from the C++ side
-    using @ref Platform::Sdl2Application::setContainerCssClass().
+    using @ref Platform::EmscriptenApplication::setContainerCssClass() /
+    @ref Platform::Sdl2Application::setContainerCssClass().
 
 @section platforms-html5-events Controlling event behavior
 

src/Magnum/Platform/EmscriptenApplication.cpp

@@ -382,6 +382,13 @@ Vector2i EmscriptenApplication::framebufferSize() const {
 }
 #endif
 
+void EmscriptenApplication::setContainerCssClass(const std::string& cssClass) {
+    #pragma GCC diagnostic push
+    #pragma GCC diagnostic ignored "-Wdollar-in-identifier-extension"
+    EM_ASM_({document.getElementById('container').className = AsciiToString($0);}, cssClass.data());
+    #pragma GCC diagnostic pop
+}
+
 void EmscriptenApplication::swapBuffers() {
     emscripten_webgl_commit_frame();
 }

src/Magnum/Platform/EmscriptenApplication.h

@@ -447,6 +447,18 @@ class EmscriptenApplication {
          */
         Vector2 devicePixelRatio() const { return _devicePixelRatio; }
 
+        /**
+         * @brief Set container CSS class
+         *
+         * Assigns given CSS class to the @cb{.html} <div class="container"> @ce.
+         * Useful for example to change aspect ratio of the view or stretch it
+         * to cover the full page. See @ref platforms-html5-layout for more
+         * information about possible values. Note that this replaces any
+         * existing class, to set multiple classes separate them with
+         * whitespace.
+         */
+        void setContainerCssClass(const std::string& cssClass);
+
         /**
          * @brief Swap buffers
          *

src/Magnum/Platform/Test/EmscriptenApplicationTest.cpp

@@ -99,6 +99,9 @@ struct EmscriptenApplicationTest: Platform::Application {
         } else if(event.key() == KeyEvent::Key::Esc) {
             Debug{} << "stopping text input";
             stopTextInput();
+        } else if(event.key() == KeyEvent::Key::F) {
+            Debug{} << "toggling fullscreen";
+            setContainerCssClass((_fullscreen ^= true) ? "fullsize" : "");
         }
 
         event.setAccepted();
@@ -125,6 +128,8 @@ struct EmscriptenApplicationTest: Platform::Application {
         event.setAccepted();
     }
 
+    private:
+        bool _fullscreen = false;
 };
 
 }}}