File modules/editor/codemirror/demo/panel.html

Last commit: Tue May 22 22:39:49 2018 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.


     1 <!doctype html>
     2 
     3 <title>CodeMirror: Panel Demo</title>
     4 <meta charset="utf-8"/>
     5 <link rel=stylesheet href="../doc/docs.css">
     6 
     7 <link rel="stylesheet" href="../lib/codemirror.css">
     8 <script src="../lib/codemirror.js"></script>
     9 <script src="../mode/javascript/javascript.js"></script>
    10 <script src="../mode/xml/xml.js"></script>
    11 <script src="../mode/htmlmixed/htmlmixed.js"></script>
    12 <script src="../addon/display/panel.js"></script>
    13 <style type="text/css">
    14   .border {
    15     border: 1px solid #f7f7f7;
    16   }
    17   .add-panel {
    18     background: orange;
    19     padding: 3px 6px;
    20     color: white !important; 
    21     border-radius: 3px;
    22   }
    23   .add-panel, .remove-panel {
    24     cursor: pointer;
    25   }
    26   .remove-panel {
    27     float: right;
    28   }
    29   .panel {
    30     background: #f7f7f7;
    31     padding: 3px 7px;
    32     font-size: 0.85em;
    33   }
    34   .panel.top, .panel.after-top {
    35     border-bottom: 1px solid #ddd;
    36   }
    37   .panel.bottom, .panel.before-bottom {
    38     border-top: 1px solid #ddd;
    39   }
    40 </style>
    41 
    42 <div id=nav>
    43   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
    44 
    45   <ul>
    46     <li><a href="../index.html">Home</a>
    47     <li><a href="../doc/manual.html">Manual</a>
    48     <li><a href="https://github.com/codemirror/codemirror">Code</a>
    49   </ul>
    50   <ul>
    51     <li><a class=active href="#">Panel</a>
    52   </ul>
    53 </div>
    54 
    55 <article>
    56 
    57 <h2>Panel Demo</h2>
    58 
    59 <div class="border">
    60     <textarea id="code" name="code"></textarea>
    61 </div>
    62 
    63 <p>
    64   The <a href="../doc/manual.html#addon_panel"><code>panel</code></a>
    65   addon allows you to display panels above or below an editor.
    66   <br>
    67   Click the links below to add panels at the given position:
    68 </p>
    69 
    70 <div id="demo">
    71 <p>
    72   <a class="add-panel" onclick="addPanel('top')">top</a>
    73   <a class="add-panel" onclick="addPanel('after-top')">after-top</a>
    74   <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>
    75   <a class="add-panel" onclick="addPanel('bottom')">bottom</a>
    76 </p>
    77 <p>
    78   You can also replace an existing panel:
    79 </p>
    80 <form onsubmit="return replacePanel(this);" name="replace_panel">
    81   <input type="submit" value="Replace panel n°" />
    82   <input type="number" name="panel_id" min="1" value="1" />
    83 </form>
    84 
    85 <script>
    86 var textarea = document.getElementById("code");
    87 var demo = document.getElementById("demo");
    88 var numPanels = 0;
    89 var panels = {};
    90 var editor;
    91 
    92 textarea.value = demo.innerHTML.trim();
    93 editor = CodeMirror.fromTextArea(textarea, {
    94   lineNumbers: true,
    95   mode: "htmlmixed"
    96 });
    97 
    98 function makePanel(where) {
    99   var node = document.createElement("div");
   100   var id = ++numPanels;
   101   var widget, close, label;
   102 
   103   node.id = "panel-" + id;
   104   node.className = "panel " + where;
   105   close = node.appendChild(document.createElement("a"));
   106   close.setAttribute("title", "Remove me!");
   107   close.setAttribute("class", "remove-panel");
   108   close.textContent = "✖";
   109   CodeMirror.on(close, "click", function() {
   110     panels[node.id].clear();
   111   });
   112   label = node.appendChild(document.createElement("span"));
   113   label.textContent = "I'm panel n°" + id;
   114   return node;
   115 }
   116 function addPanel(where) {
   117   var node = makePanel(where);
   118   panels[node.id] = editor.addPanel(node, {position: where, stable: true});
   119 }
   120 
   121 addPanel("top");
   122 addPanel("bottom");
   123 
   124 function replacePanel(form) {
   125   var id = form.elements.panel_id.value;
   126   var panel = panels["panel-" + id];
   127   var node = makePanel("");
   128 
   129   panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});
   130   return false;
   131 }
   132 </script>
   133 
   134 </div>
   135 
   136 </article>



Download modules/editor/codemirror/demo/panel.html


History
Tue, 22 May 2018 22:39:49 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.