Modal changes & improvements. (hedyorg#754)

coursedata/texts/cs.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: Máš nějaké skušenosti s programováním?
     yes: Ano
     no: Ne
+    ok: OK
+    cancel: Cancel
     languages: Které z těchto programovacích jazyku jsi už někdy použil*a?
     other_block: Jiný blokový jazyk
     other_text: Jiný textový jazyk

coursedata/texts/de.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: "Do you have programming experience?"
     yes: "Ja"
     no: "Nein"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Which of these programming languages have you used before?"
     other_block: "Another block language"
     other_text: "Another text language"

coursedata/texts/en.yaml

@@ -130,6 +130,8 @@ Auth:
     programming_experience: "Do you have programming experience?"
     yes: "Yes"
     no: "No"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Which of these programming languages have you used before?"
     other_block: "Another block language"
     other_text: "Another text language"

coursedata/texts/es.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: "Tienes experiencia con programación?"
     yes: "Sí"
     no: "No"
+    ok: "OK"
+    cancel: "Cancelar"
     languages: "Cuáles de estos lenguages de programación has usado?"
     other_block: "Otro lenguaje basado en bloques"
     other_text: "Otro lenguaje basado en texto"

coursedata/texts/fr.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: "Do you have programming experience?"
     yes: "Yes"
     no: "No"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Which of these programming languages have you used before?"
     other_block: "Another block language"
     other_text: "Another text language"

coursedata/texts/hu.yaml

@@ -125,6 +125,8 @@ Auth:
     programming_experience: "Do you have programming experience?"
     yes: "Yes"
     no: "No"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Which of these programming languages have you used before?"
     other_block: "Another block language"
     other_text: "Another text language"

coursedata/texts/it.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: "Do you have programming experience?"
     yes: "Yes"
     no: "No"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Which of these programming languages have you used before?"
     other_block: "Another block language"
     other_text: "Another text language"

coursedata/texts/nl.yaml

@@ -130,6 +130,8 @@ Auth:
     programming_experience: "Heb jij al eens geprogrammeerd?"
     yes: "Ja"
     no: "Nee"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Welke programmeertaal heb je wl eens gebruikt?"
     other_block: "Een andere blokkentaal"
     other_text: "Een andere teksttaal"

coursedata/texts/pt_br.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: "Você tem experiência em programação?"
     yes: "Sim"
     no: "Não"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Qual dessas linguagens de programação você já usou antes?"
     other_block: "Outra linguagem de bloco"
     other_text: "Outra linguagem de texto"

coursedata/texts/pt_pt.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: "Tens alguma experiência em programação?"
     yes: "Sim"
     no: "Não"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Quais destas linguagens de programação usaste anteriormente?"
     other_block: "Outro bloco de linguagem"
     other_text: "Outra linguagem de texto"

coursedata/texts/sw.yaml

@@ -120,6 +120,8 @@ Auth:
   programming_experience: "Do you have programming experience?"
   yes: "Yes"
   no: "No"
+  ok: "OK"
+  cancel: "Cancel"
   languages: "Which of these programming languages have you used before?"
   other_block: "Another block language"
   other_text: "Another text language"

coursedata/texts/zh.yaml

@@ -128,6 +128,8 @@ Auth:
     programming_experience: "Do you have programming experience?"
     yes: "Yes"
     no: "No"
+    ok: "OK"
+    cancel: "Cancel"
     languages: "Which of these programming languages have you used before?"
     other_block: "Another block language"
     other_text: "Another text language"

static/js/app.js

@@ -254,12 +254,7 @@ window.saveit = function saveit(level, lang, name, code, cb) {
         error.show(ErrorMessages.Transpile_error, response.Error);
         return;
       }
-      $ ('#okbox').show ();
-      $ ('#okbox .caption').html (window.auth.texts.save_success);
-      $ ('#okbox .details').html (window.auth.texts.save_success_detail);
-      setTimeout (function () {
-         $ ('#okbox').hide ();
-      }, 2000);
+      window.modal.alert (window.auth.texts.save_success_detail, 4000);
       // If we succeed, we need to update the default program name & program for the currently selected tab.
       // To avoid this, we'd have to perform a page refresh to retrieve the info from the server again, which would be more cumbersome.
       // The name of the program might have been changed by the server, so we use the name stated by the server.
@@ -302,18 +297,9 @@ window.share_program = function share_program (level, lang, id, Public, reload)
       contentType: 'application/json',
       dataType: 'json'
     }).done(function(response) {
-      if ($ ('#okbox') && $ ('#okbox').length) {
-        $ ('#okbox').show ();
-        $ ('#okbox .caption').html (window.auth.texts.save_success);
-        $ ('#okbox .details').html (Public ? window.auth.texts.share_success_detail : window.auth.texts.unshare_success_detail);
-        // If we're sharing the program, copy the link to the clipboard.
-        if (Public) window.copy_to_clipboard (viewProgramLink(id), true);
-      }
-      else {
-        // If we're sharing the program, copy the link to the clipboard.
-        if (Public) window.copy_to_clipboard (viewProgramLink(id), true);
-        window.modal.alert (Public ? window.auth.texts.share_success_detail : window.auth.texts.unshare_success_detail);
-      }
+      // If we're sharing the program, copy the link to the clipboard.
+      if (Public) window.copy_to_clipboard (viewProgramLink(id), true);
+      window.modal.alert (Public ? window.auth.texts.share_success_detail : window.auth.texts.unshare_success_detail, 4000);
       if (reload) setTimeout (function () {location.reload ()}, 1000);
     }).fail(function(err) {
       console.error(err);
@@ -353,7 +339,7 @@ window.copy_to_clipboard = function copy_to_clipboard (string, noAlert) {
      document.getSelection ().removeAllRanges ();
      document.getSelection ().addRange (selected);
   }
-  if (! noAlert) window.modal.alert (window.auth.texts.copy_clipboard);
+  if (! noAlert) window.modal.alert (window.auth.texts.copy_clipboard, 4000);
 }
 
 /**
@@ -618,7 +604,7 @@ function buildUrl(url, params) {
 })();
 
 window.create_class = function create_class() {
-  window.modal.prompt (window.auth.texts.class_name_prompt, function (class_name) {
+  window.modal.prompt (window.auth.texts.class_name_prompt, '', function (class_name) {
 
     $.ajax({
       type: 'POST',
@@ -638,7 +624,7 @@ window.create_class = function create_class() {
 }
 
 window.rename_class = function rename_class(id) {
-  window.modal.prompt (window.auth.texts.class_name_prompt, function (class_name) {
+  window.modal.prompt (window.auth.texts.class_name_prompt, '', function (class_name) {
 
     $.ajax({
       type: 'PUT',

static/js/auth.js

@@ -235,15 +235,15 @@ window.auth = {
   },
   markAsTeacher: function (username, is_teacher) {
     $.ajax ({type: 'POST', url: '/admin/markAsTeacher', data: JSON.stringify ({username: username, is_teacher: is_teacher}), contentType: 'application/json; charset=utf-8'}).done (function () {
-      window.modal.alert (['User', username, 'successfully', is_teacher ? 'marked' : 'unmarked', 'as teacher'].join (' '));
+      window.modal.alert (['User', username, 'successfully', is_teacher ? 'marked' : 'unmarked', 'as teacher'].join (' '), 4000);
     }).fail (function (error) {
       console.log (error);
       window.modal.alert (['Error when', is_teacher ? 'marking' : 'unmarking', 'user', username, 'as teacher'].join (' '));
     });
   },
 
   changeUserEmail: function (username, email) {
-    window.modal.prompt ('Please enter the corrected email', function (correctedEmail) {
+    window.modal.prompt ('Please enter the corrected email', email, function (correctedEmail) {
       if (correctedEmail === email) return;
       if (! correctedEmail.match (window.auth.emailRegex)) return window.modal.alert ('Please enter a valid email.');
       $.ajax ({type: 'POST', url: '/admin/changeUserEmail', data: JSON.stringify ({username: username, email: correctedEmail}), contentType: 'application/json; charset=utf-8'}).done (function () {

templates/layout.html

@@ -17,7 +17,7 @@
        <div id="modal-alert" class="hidden">
           <div id="modal-alert-text"></div>
           <div style="margin: auto; text-align: center;">
-            <button class="btn block mt-4" style="min-width:6em" onclick="window.modal.hide ()">{{auth.yes}}</button>
+            <button class="btn block mt-4" style="min-width:6em" onclick="window.modal.hide ()">{{auth.ok}}</button>
           </div>
        </div>
        <div id="modal-confirm" class="hidden">
@@ -32,8 +32,8 @@
           <div style="margin: auto; text-align: center;">
             <input id="modal-prompt-input" type="text" class="border border-green-400 rounded p-2 px-3 w-4/5 mt-1">
             <br>
-            <button class="btn block mt-4" style="min-width:6em" onclick="window.modal.promptcb ()">{{auth.yes}}</button>
-            <button class="btn block mt-4 ml-2" style="min-width:6em" onclick="window.modal.promptcb (true)">{{auth.no}}</button>
+            <button class="btn block mt-4" style="min-width:6em" onclick="window.modal.promptcb ()">{{auth.ok}}</button>
+            <button class="btn block mt-4 ml-2" style="min-width:6em" onclick="window.modal.promptcb (true)">{{auth.cancel}}</button>
           </div>
        </div>
     </div>
@@ -59,10 +59,11 @@
             $ ('#modal-prompt').hide ();
             $ ('#modal-confirm').hide ();
          },
-         alert: function (message) {
+         alert: function (message, timeout) {
             $ ('#modal-alert-text').text (message);
             window.modal.show ();
             $ ('#modal-alert').show ();
+            if (timeout) setTimeout (window.modal.hide, timeout);
          },
          confirm: function (message, cb) {
             $ ('#modal-confirm-text').text (message);
@@ -73,10 +74,11 @@
               if (proceed) cb ();
             }
          },
-         prompt: function (message, cb) {
+         prompt: function (message, defaultValue, cb) {
             $ ('#modal-prompt-text').text (message);
             window.modal.show ();
             $ ('#modal-prompt').show ();
+            if (defaultValue) $ ('#modal-prompt-input').val (defaultValue);
             window.modal.promptcb = function (cancel) {
               window.modal.hide ();
               if (cancel) return;