Full screen scorm (#22)

 Add fullscreen button

scormxblock/scormxblock.py

@@ -360,4 +360,4 @@ def workbench_scenarios():
                 <scormxblock/>
                 </vertical_demo>
              """),
-        ]
+        ]

scormxblock/static/css/scormxblock.css

@@ -3,12 +3,59 @@
     border: none;
 }
 
-span.setting-input-file {
+.scormxblock_block span.setting-input-file {
     padding-left: 25%;
     margin-left: 14px;
     padding-top: 5px;
 }
 
-span.setting-input-file span{
+.scormxblock_block span.setting-input-file span {
     font-weight: bold;
+}
+
+.scormxblock_block .full-screen-scorm  .scorm_object {
+    position: fixed;
+    border: none;
+    overflow: hidden;
+    top: 55px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+}
+
+.scormxblock_block .full-screen-scorm {
+    position: fixed;
+    border: none;
+    overflow: hidden;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+    background-color: #ffffff;
+}
+
+.scormxblock_block .scorm_button {
+    padding-bottom: 20px;
+}
+
+.scormxblock_block .full-screen-scorm .scorm_button {
+    padding: 20px;
+}
+
+.scormxblock_block .full-screen-off {
+    display: none;
+}
+
+.scormxblock_block .full-screen-scorm .full-screen-off {
+    display: block;
+}
+
+.scormxblock_block .full-screen-scorm .full-screen-on {
+    display: none;
 }

scormxblock/static/html/scormxblock.html

@@ -1,13 +1,31 @@
 {% load i18n %}
 
 <div class="scormxblock_block">
+    {% if scorm_file_path %}
+
     {% if scorm_xblock.has_score %}
-    <p>(<span class="lesson_score">{{ scorm_xblock.lesson_score }}</span>/{{ scorm_xblock.weight }} {% trans "points" %}) <span class="completion_status">{% trans completion_status %}</span></p>
+    <p>
+        (<span class="lesson_score">{{ scorm_xblock.lesson_score }}</span>/{{ scorm_xblock.weight }} {% trans "points" %})
+        <span class="completion_status">{% trans completion_status %}</span>
+    </p>
     {% endif %}
-    {% if scorm_file_path %}
-    <iframe class="scorm_object"
-            src="{{ scorm_file_path }}"
-            width="{% if scorm_xblock.width %}{{ scorm_xblock.width }}{% else %}100%{% endif %}"
-            height="{{ scorm_xblock.height }}"></iframe>
+
+    <div class="js-scorm-block">
+        <div class="scorm_button">
+            <button class="js-button-full-screen full-screen-on">
+                {% trans "Full screen" %}
+            </button>
+            <button class="js-button-full-screen full-screen-off">
+                {% trans "Exit full screen" %}
+            </button>
+        </div>
+
+        <iframe class="scorm_object"
+                src="{{ scorm_file_path }}"
+                width="{% if scorm_xblock.width %}{{ scorm_xblock.width }}{% else %}100%{% endif %}"
+                height="{{ scorm_xblock.height }}"
+        ></iframe>
+     </div>
     {% endif %}
+
 </div>

scormxblock/static/js/src/scormxblock.js

@@ -73,6 +73,10 @@ function ScormXBlock(runtime, element, settings) {
   };
 
   var SetValue = function (cmi_element, value) {
+    if (cmi_element === 'cmi.core.exit' || cmi_element === 'cmi.exit') {
+      $(".js-scorm-block", element).removeClass('full-screen-scorm');
+    }
+
     var handlerUrl = runtime.handlerUrl( element, 'scorm_set_value');
 
     $.ajax({
@@ -97,5 +101,10 @@ function ScormXBlock(runtime, element, settings) {
     } else {
       API_1484_11 = new SCORM_2004_API();
     }
+
+    var $scormBlock = $(".js-scorm-block", element);
+    $('.js-button-full-screen', element).on( "click", function() {
+      $scormBlock.toggleClass("full-screen-scorm");
+    });
   });
 }

scormxblock/static/js/src/studio.js

@@ -9,6 +9,7 @@ function ScormStudioXBlock(runtime, element) {
     var has_score = $(element).find('select[name=has_score]').val();
     var width = $(element).find('input[name=width]').val();
     var height = $(element).find('input[name=height]').val();
+
     form_data.append('file', file_data);
     form_data.append('display_name', display_name);
     form_data.append('has_score', has_score);