Moved css into library.

h5p.classes.php

@@ -246,6 +246,16 @@ interface H5PFrameworkInterface {
    * Check if export is enabled.
    */
   public function isExportEnabled();
+  
+  /**
+   * Defines getEditorLibraries.
+   *
+   * @param $machineName Library identifier.
+   * @param $majorVersion Library identfier.
+   * @param $minorVersion Library identfier.
+   * @return array Editor libraries?
+   */
+  public function getEditorLibraries($machineName, $majorVersion, $minorVersion, $complete = FALSE);
 }
 
 /**
@@ -1121,7 +1131,7 @@ Class H5PExport {
       // Build h5p.json
       $h5pJson = array (
         'title' => $title,
-        'language' => $exportData['language'] ? $exportData['language'] : 'und',
+        'language' => $language ? $language : 'und',
         'mainLibrary' => $exportData['mainLibrary'],
         'embedTypes' => $embedTypes,
       );
@@ -1145,8 +1155,8 @@ Class H5PExport {
       }
       
       // Add preloaded and dynamic dependencies if they exist
-      if ($preloadedDependencies) { $h5pJson['preloadedDependencies'] = $preloadedDependencies; }
+      if (isset($preloadedDependencies)) { $h5pJson['preloadedDependencies'] = $preloadedDependencies; }
-      if ($dynamicDependencies) { $h5pJson['dynamicDependencies'] = $dynamicDependencies; }
+      if (isset($dynamicDependencies)) { $h5pJson['dynamicDependencies'] = $dynamicDependencies; }
 
       // Save h5p.json
       $results = print_r(json_encode($h5pJson), true);
@@ -1198,7 +1208,7 @@ Class H5PExport {
     $h5pDir = $this->h5pF->getH5pPath() . DIRECTORY_SEPARATOR;
     $zipPath = $h5pDir . 'exports' . DIRECTORY_SEPARATOR . $contentId . '.h5p';
     if (file_exists($zipPath)) {
-      file_delete($zipPath);
+      unlink($zipPath);
     }
   }
 

images/h5p_logo.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M0.126,13.306h3.07l0.365,3.476h3.354L6.55,13.306h3.083l1.044,9.934H7.594l-0.422-4.018H3.818L4.24,23.24
+		H1.17L0.126,13.306z"/>
+	<path fill="#FFFFFF" d="M27.738,13.306h5.103c1.111,0,1.916,0.264,2.414,0.793c0.498,0.529,0.696,1.281,0.593,2.257
+		c-0.105,1.003-0.489,1.787-1.152,2.351c-0.662,0.565-1.613,0.847-2.85,0.847h-1.681l-0.387,3.686h-3.083L27.738,13.306z
+		 M30.376,17.541h0.752c0.592,0,1.018-0.103,1.279-0.308c0.261-0.205,0.408-0.469,0.442-0.789c0.033-0.312-0.043-0.576-0.228-0.793
+		c-0.185-0.217-0.564-0.325-1.138-0.325h-0.874L30.376,17.541z"/>
+	<g>
+		<polygon fill="#E24E26" points="12.431,25.515 11.035,9.851 26.38,9.851 24.982,25.512 18.698,27.254 		"/>
+		<polygon fill="#F06529" points="18.707,25.923 23.785,24.515 24.98,11.132 18.707,11.132 		"/>
+		<polygon fill="#EAEAEA" points="18.707,16.941 16.165,16.941 15.99,14.974 18.707,14.974 18.707,13.053 18.701,13.053 
+			13.89,13.053 13.936,13.568 14.408,18.862 18.707,18.862 		"/>
+		<polygon fill="#EAEAEA" points="18.707,21.93 18.699,21.933 16.56,21.355 16.423,19.823 15.383,19.823 14.494,19.823 
+			14.763,22.839 18.699,23.932 18.707,23.929 		"/>
+		<polygon fill="#FFFFFF" points="18.701,16.941 18.701,18.862 21.066,18.862 20.843,21.354 18.701,21.932 18.701,23.931 
+			22.639,22.839 22.668,22.514 23.119,17.457 23.166,16.941 22.649,16.941 		"/>
+		<polygon fill="#FFFFFF" points="18.701,13.053 18.701,14.246 18.701,14.969 18.701,14.974 23.335,14.974 23.335,14.974 
+			23.341,14.974 23.38,14.542 23.467,13.568 23.513,13.053 		"/>
+	</g>
+</g>
+</svg>

js/h5p.js

@@ -33,7 +33,7 @@ H5P.init = function () {
     else if (document.documentElement.mozRequestFullScreen) {
       H5P.fullScreenBrowserPrefix = 'moz';
     }
-    else if (document.documentElement.msRequestFullScreen) {
+    else if (document.documentElement.msRequestFullscreen) {
       H5P.fullScreenBrowserPrefix = 'ms';
     }
   }
@@ -65,24 +65,30 @@ H5P.init = function () {
       var $iframe = H5P.jQuery(iframe),
         contentId = $iframe.data('content-id'),
         mainLibrary = $iframe.data('class');
+        
+      $iframe.ready(function () {      
+        // This is a bit hacky but necessary until libraries runs callbacks or similar when "done" or resizing or something.
+        resizeIframeInterval = setInterval(function () {
+          var $doc = $iframe.contents(); 
+          var contentHeight = $doc.height();
+          var frameHeight = $iframe.innerHeight();
+          
+          if (frameHeight !== contentHeight) {
+            H5P.resizeIframe(contentId, contentHeight);
+            $doc[0].documentElement.style.margin = '0 0 1px 0';
+          }
+          else {
+            // Small trick to make scrollbars go away in ie.
+            $doc[0].documentElement.style.margin = '0 0 0 0';
+          }
+          
+        }, 300);
+      });
 
       iframe.contentDocument.open();
       iframe.contentDocument.write('<!doctype html><html><head>' + H5PIntegration.getHeadTags(contentId) + '</head><body><div class="h5p-content" data-class="' + mainLibrary + '" data-content-id="' + contentId + '"/></body></html>');
       iframe.contentDocument.close();
     });
-
-    // TODO: This seems very hacky... why can't we just use the resize event? What happens if we ain't done before the next interval starts?
-    setInterval(function () {
-      $h5pIframes.each(function (idx, iframe) {
-        var $iframe = H5P.jQuery(iframe);
-        var contentHeight = $iframe.contents().height();
-        var frameHeight = $iframe.innerHeight();
-
-        if (frameHeight !== contentHeight) {
-          H5P.resizeIframe($iframe.data('content-id'), contentHeight);
-        }
-      });
-    }, 250);
   }
 };
 
@@ -175,7 +181,7 @@ H5P.fullScreen = function ($el, obj, exitCallback, $body) {
     $body.keyup(keyup);
   }
   else {
-    var first, eventName = H5P.fullScreenBrowserPrefix + 'fullscreenchange';
+    var first, eventName = (H5P.fullScreenBrowserPrefix === 'ms' ? 'MSFullscreenChange' : H5P.fullScreenBrowserPrefix + 'fullscreenchange');
     H5P.isFullscreen = true;
     document.addEventListener(eventName, function () {
       if (first === undefined) {
@@ -203,7 +209,9 @@ H5P.fullScreen = function ($el, obj, exitCallback, $body) {
       $el[0].requestFullScreen();
     }
     else {
-      $el[0][H5P.fullScreenBrowserPrefix + 'RequestFullScreen'](H5P.fullScreenBrowserPrefix === 'webkit' ? Element.ALLOW_KEYBOARD_INPUT : undefined);
+      var method = (H5P.fullScreenBrowserPrefix === 'ms' ? 'msRequestFullscreen' : H5P.fullScreenBrowserPrefix + 'RequestFullScreen');
+      var params = (H5P.fullScreenBrowserPrefix === 'webkit' ? Element.ALLOW_KEYBOARD_INPUT : undefined);
+      $el[0][method](params);
     }
 
     $el.add(H5P.$body).addClass('h5p-fullscreen');

styles/h5p.css

@@ -27,6 +27,8 @@ div.h5p-semi-fullscreen {
   top: 0;
   left: 0;
   z-index: 101;
+  width: 100%;
+  height: 100%;
 }
 
 .h5p-content-controls {
@@ -84,7 +86,7 @@ div.h5p-semi-fullscreen {
   background: -ms-linear-gradient(top,  rgba(4,104,206,1) 0%,rgba(100,152,254,1) 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0468ce', endColorstr='#6498fe',GradientType=0 ); /* IE6-9 */
 }
-.h5p-iframe-wrapper.h5p-fullscreen {
+div.h5p-fullscreen {
   width: 100%;
   height: 100%;
 }
@@ -167,3 +169,50 @@ body.h5p-iframe-content div.h5p-content {
 body.h5p-iframe-content.h5p-fullscreen div.h5p-content {
   height: 100%;
 }
+
+.h5p-export {
+  margin-top: 6px;
+  display: block;
+  position: relative;
+  float: left;
+  border-radius: 4px;
+  padding: 4px 58px 3px 12px;
+  font-weight: 900; 
+  font-family: "Arial Black", Arial, sans-serif;
+  text-transform: uppercase;
+  color: white !important;
+  background-color: #ccc;
+  box-shadow: 0px 0px 4px #666;
+}
+
+.h5p-export:after {
+  content: "";
+  
+  display: inline;
+  width: 45px;
+  height: 27px;
+  
+  position: absolute;
+  right: 0;
+  top: 0;
+  
+  background-image: url(../images/h5p_logo.png);
+  background-image: url(../images/h5p_logo.svg), none;
+  background-repeat: no-repeat;
+  background-position: left center;
+}
+
+.h5p-export:hover {
+  text-decoration: none;
+  color: white;
+  box-shadow: 0px 0px 6px #333;
+  background-color: #0092bf;
+  /* Firefox */
+  -moz-transition: all 0.4s ease-in;
+  /* WebKit */
+  -webkit-transition: all 0.4s ease-in;
+  /* Opera */
+  -o-transition: all 0.4s ease-in;
+  /* Standard */
+  transition: all 0.4s ease-in;
+}