openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

panel.html (3457B)

      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>