Add warning modal

css/scratchx.css

@@ -412,6 +412,11 @@ button {
   user-select: none;
   vertical-align: middle;
   white-space: nowrap; }
+  button.success:hover, button.success:focus, input[type="button"].success:hover, input[type="button"].success:focus, input[type="reset"].success:hover, input[type="reset"].success:focus, input[type="submit"].success:hover, input[type="submit"].success:focus,
+  button.success:hover,
+  button.success:focus {
+    background-color: #0f7623;
+    color: #fff; }
   button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus,
   button:hover,
   button:focus {
@@ -699,8 +704,8 @@ picture {
     cursor: pointer; }
 .modal .modal-close {
   position: absolute;
-  top: 1.5em;
+  top: 0.75em;
-  right: 1.5em;
+  right: 0.75em;
   height: 1.5em;
   width: 1.5em;
   background: #fff;
@@ -734,7 +739,6 @@ picture {
   -webkit-transition: opacity 0.25s ease;
   -moz-transition: opacity 0.25s ease;
   transition: opacity 0.25s ease;
-  background: #fff;
   border-radius: 5px;
   padding: 1.5em;
   position: relative;
@@ -794,7 +798,7 @@ dialog {
     */
     border: 1px solid; }
 
-.message, .warning, .info {
+.message {
   border-radius: 5px;
   text-align: center;
   margin: 1.5em 0;
@@ -808,6 +812,10 @@ dialog {
   background-color: #dfe3e7;
   color: #58595b; }
 
+.success {
+  background-color: #18ba37;
+  color: #fff; }
+
 article header h1 {
   text-align: center; }
 
@@ -882,6 +890,29 @@ article header h1 + p {
   background-color: #21b4f0;
   color: #fff; }
 
+#modal-template-warning .modal-inner {
+  border: 1px solid #dfe3e7;
+  padding: 0;
+  width: 50%;
+  text-align: center; }
+#modal-template-warning section {
+  padding: 2em;
+  overflow: hidden; }
+#modal-template-warning header {
+  background: #dfe3e7;
+  text-align: right;
+  line-height: 1.5;
+  position: relative;
+  height: 3em; }
+#modal-template-warning .modal-close {
+  background: #dfe3e7; }
+  #modal-template-warning .modal-close:before, #modal-template-warning .modal-close:after {
+    background: #556372; }
+  #modal-template-warning .modal-close:hover:before, #modal-template-warning .modal-close:hover:after {
+    background: #3f4a55; }
+#modal-template-warning button {
+  width: auto; }
+
 a[href=""] {
   outline: 1px solid red; }
 
@@ -969,20 +1000,20 @@ body > section {
 body #home {
   display: block; }
 
-#dialogs, #modal-dialogs .modal-inner {
+#dialogs, .modal-inner {
   display: block; }
-  #dialogs::after, #modal-dialogs .modal-inner::after {
+  #dialogs::after, .modal-inner::after {
     clear: both;
     content: "";
     display: table; }
-  #dialogs dialog, #modal-dialogs .modal-inner dialog {
+  #dialogs dialog, .modal-inner dialog {
     float: left;
     display: block;
     margin-right: 1.25%;
     width: 32.5%; }
-    #dialogs dialog:last-child, #modal-dialogs .modal-inner dialog:last-child {
+    #dialogs dialog:last-child, .modal-inner dialog:last-child {
       margin-right: 0; }
-    #dialogs dialog p, #modal-dialogs .modal-inner dialog p {
+    #dialogs dialog p, .modal-inner dialog p {
       text-align: center; }
 
 #modal-dialogs .modal-inner {

index.html

@@ -83,7 +83,7 @@
                     </dialog>
                 </section>
 
-                <aside class="info">
+                <aside class="info message">
                     <strong>Note:</strong> To use any physical extensions, you need to download the <a href="https://scratch.mit.edu/scratchr2/static/ext/download.html">Hardware Plugin</a>.<br />
                     Official Scratch Extensions (such as LEGO WeDo) are available on the main <a href="https://scratch.mit.edu">Scratch site</a>.
                 </aside>
@@ -246,6 +246,19 @@
     </div>
     <div class="scratch_loading"></div>
 </section>
+<script type="text/template" id="template-warning">
+<div>
+<header><a class="modal-close" href="#"></a></header>
+<section class="warning">
+    <h2>Warning: all extensions are experimental</h2>
+    <p>Content on this site is <strong>not</strong> a product of the Scratch Team. Please use caution when using publically created extensions. <a href="#faq">Learn More</a></p>
+</section>
+<section>
+<button data-action="show" data-target="#home">Back to ScratchX Home</button>
+<button class="success">I understand, continue</button>
+</section>
+</div>
+</script>
 <script type="text/javascript" src="libs/base64ab.js"></script>
 <script type="text/javascript" src="scratch_extensions/scratch_ext.js"></script>
 <script type="text/javascript" src="js/scratchx.js"></script>

js/scratchx.js

@@ -243,6 +243,7 @@ function showModal(templateId) {
         $(".modal-fade-screen", $modal).removeClass("visible");
         $(this).off();
     });
+    return $modal;
 }
 
 $(document).keyup(function(e) {
@@ -262,6 +263,15 @@ $(document).on('click', "[data-action='modal']", function(e){
     showModal($(this).data("template"));
 });
 
+function JSshowWarning(extensionData) {
+    $modal = showModal("template-warning");
+    $("button, .modal-close", $modal).click(function(e){
+        e.preventDefault();
+        $(document).trigger("modal:exit")
+    });
+
+}
+
 
 /* Page switching */
 

sass/base/_base.scss

@@ -58,17 +58,20 @@ dialog {
 }
 
 .warning {
-    @extend .message;
     background-color: $yellow;
     color: $dark-gray;
 }
 
 .info {
-    @extend .message;
     background-color: $light-gray;
     color: $dark-gray;
 }
 
+.success {
+    background-color: $green;
+    color: $white;
+}
+
 article header h1 {
     text-align: center;
 }
@@ -123,3 +126,41 @@ body > main > article > section {
         color: $white;
     }
 }
+
+#modal-template-warning {
+    .modal-inner {
+        border: 1px solid $light-gray;
+        padding: 0;
+        width: 50%;
+        text-align: center;
+    }
+    section {
+        padding: 2em;
+        overflow: hidden;
+    }
+
+    header {
+        background: $light-gray;
+        text-align: right;
+        line-height: 1.5;
+        position: relative;
+        height: 3em;
+    }
+
+    .modal-close {
+        background: $light-gray;
+
+        &:before, &:after {
+            background: darken($light-gray, 50%);
+        }
+
+        &:hover:before, &:hover:after {
+            background: darken($light-gray, 60%);
+        }
+    }
+
+    button {
+        width: auto;
+    }
+
+}

sass/base/_buttons.scss

@@ -18,6 +18,14 @@ button {
   vertical-align: middle;
   white-space: nowrap;
 
+  &.success {
+    &:hover,
+    &:focus {
+      background-color: darken($green, 15%);
+      color: $white;
+    }
+  }
+
   &:hover,
   &:focus {
     background-color: darken($action-color, 15%);

sass/base/_modal.scss

@@ -58,7 +58,7 @@
   }
 
   .modal-close {
-    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
+    @include position(absolute, ($modal-padding /4) ($modal-padding /4) null null);
     @include size(1.5em);
     background: $modal-background;
     cursor: pointer;
@@ -86,7 +86,6 @@
 
   .modal-inner {
     @include transition(opacity 0.25s ease);
-    background: $modal-background;
     border-radius: $base-border-radius;
     padding: $modal-padding / 2;
     position: relative;

sass/scratchx.scss

@@ -47,7 +47,7 @@ body {
     }
 }
 
-#dialogs, #modal-dialogs .modal-inner {
+#dialogs, .modal-inner {
     @include row();
     dialog {
         @include span-columns(4);