Simple Ace placeholder

views/includes/scripts/scriptEditor.html

@@ -1,9 +1,16 @@
 <script type="text/javascript" charset="UTF-8" src="/redist/npm/ace-builds/src/ace.js"></script>
 <script type="text/javascript">
   (function () {
+    'use strict';
 
     $(document).ready(function () {
+
       var editor = ace.edit("editor");
+      var placeholder = null;
+      var username = '{{authedUser.name}}' || 'username';
+      var isLib = !!'{{isLib}}';
+      var now = new Date();
+      var year = now.getFullYear();
 
       function hasRelative(aPrefix) {
         var hasCalc = null;
@@ -35,6 +42,21 @@
         editor.resize(true);
       }
 
+      function oninput() {
+        var shouldShow = !editor.session.getValue().length;
+        var node = editor.renderer.emptyMessageNode;
+        if (!shouldShow && node) {
+          editor.renderer.scroller.removeChild(editor.renderer.emptyMessageNode);
+          editor.renderer.emptyMessageNode = null;
+        } else if (shouldShow && !node) {
+          node = editor.renderer.emptyMessageNode = document.createElement("div");
+          node.textContent = placeholder;
+          node.className = "ace_invisible ace_emptyMessage";
+          node.style.padding = "0 0.75em";
+          editor.renderer.scroller.appendChild(node);
+        }
+      }
+
       editor.setTheme("ace/theme/dawn");
       editor.getSession().setMode("ace/mode/javascript");
 
@@ -57,6 +79,59 @@
           window.attachEvent('resize', onresize);
         }
       }
+
+      placeholder = (
+        isLib
+          ? [
+            '// ==UserScript==',
+            '// @exclude       *',
+            '// @namespace     https://openuserjs.org/users/' + username,
+            '',
+            '// ==OpenUserJS==',
+            '// @name          Getting Started with a Library',
+            '// @description   '
+              + 'Showing the current basic and recommended format for a Library script.',
+            '// @copyright     ' + year + ', ' +  username
+              + ' (https://openuserjs.org/users/' + username + ')',
+            '// @license       GPL-3.0+; http://www.gnu.org/licenses/gpl-3.0.txt',
+            '// @version       0.0.0',
+            '// ==/UserScript==',
+            '',
+            '// @author ' + username,
+            '// ==/OpenUserJS==',
+            '',
+            '/**',
+            '  *',
+            '  * Please begin typing or paste your Library now.',
+            '  *',
+            '  */'
+          ] : [
+            '// ==UserScript==',
+            '// @namespace     https://openuserjs.org/users/' + username,
+            '// @name          Getting Started with a Userscript',
+            '// @description   ' +
+              'Showing the current basic and recommended format for a User script.',
+            '// @copyright     ' + year + ', ' +  username
+              + ' (https://openuserjs.org/users/' + username + ')',
+            '// @license       GPL-3.0+; http://www.gnu.org/licenses/gpl-3.0.txt',
+            '// @version       0.0.0',
+            '// @include       https://www.example.com/*',
+            '// @grant none',
+            '// ==/UserScript==',
+            '',
+            '// ==OpenUserJS==',
+            '// @author ' + username,
+            '// ==OpenUserJS==',
+            '/**',
+            '  *',
+            '  * Please begin typing or paste your Userscript now.',
+            '  *',
+            '  */'
+          ]
+      ).join('\n');
+
+      editor.on("input", oninput);
+      setTimeout(oninput, 250);
     });
 
   })();