Simple Ace placeholder (#1240)

* Start off with this `GPL-3.0+` SPDX help sample. Obviously an Author can pick a different OSI SPDX license.

NOTE(S):
* This isn't a substitute for user templates but is a system help template.
* We will be pulling off `@name` eventually for Library Name.
* Due to some features in other .user.js engines and their versions `@exclude *` will always be needed. Not to mention it's wise to do this for security.
* Will convert this out of jQuery later

Applies to #1232

Auto-merge

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);
  });
 
  })();