third-party/codemirror-3.15/mode/cobol/index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: COBOL mode</title>
   6     <link rel="stylesheet" href="../../lib/codemirror.css">
   7     <script src="../../lib/codemirror.js"></script>
   8     <script src="../../addon/edit/matchbrackets.js"></script>
   9     <script src="cobol.js"></script>
  10     <link rel="stylesheet" href="../../theme/neat.css">
  11     <link rel="stylesheet" href="../../theme/elegant.css">
  12     <link rel="stylesheet" href="../../theme/erlang-dark.css">
  13     <link rel="stylesheet" href="../../theme/night.css">
  14     <link rel="stylesheet" href="../../theme/monokai.css">
  15     <link rel="stylesheet" href="../../theme/cobalt.css">
  16     <link rel="stylesheet" href="../../theme/eclipse.css">
  17     <link rel="stylesheet" href="../../theme/rubyblue.css">
  18     <link rel="stylesheet" href="../../theme/lesser-dark.css">
  19     <link rel="stylesheet" href="../../theme/xq-dark.css">
  20     <link rel="stylesheet" href="../../theme/xq-light.css">
  21     <link rel="stylesheet" href="../../theme/ambiance.css">
  22     <link rel="stylesheet" href="../../theme/blackboard.css">
  23     <link rel="stylesheet" href="../../theme/vibrant-ink.css">
  24     <link rel="stylesheet" href="../../theme/solarized.css">
  25     <link rel="stylesheet" href="../../theme/twilight.css">
  26     <link rel="stylesheet" href="../../theme/midnight.css">
  27     <link rel="stylesheet" href="../../addon/dialog/dialog.css">
  28     <script src="../../addon/selection/active-line.js"></script>
  29     <script src="../../addon/search/search.js"></script>
  30     <script src="../../addon/dialog/dialog.js"></script>
  31     <script src="../../addon/search/searchcursor.js"></script>
  32     <style>
  33         .CodeMirror {
  34           border: 1px solid #eee;
  35           font-size : 20px;
  36           height : auto !important;
  37         }
  38         .CodeMirror-activeline-background {background: #555555 !important;}
  39     </style>
  40   </head>
  41   <body>
  42     <p> Select Theme <select onchange="selectTheme()" id="selectTheme">
  43         <option>default</option>
  44         <option>ambiance</option>
  45         <option>blackboard</option>
  46         <option>cobalt</option>
  47         <option>eclipse</option>
  48         <option>elegant</option>
  49         <option>erlang-dark</option>
  50         <option>lesser-dark</option>
  51         <option>midnight</option>
  52         <option>monokai</option>
  53         <option>neat</option>
  54         <option>night</option>
  55         <option>rubyblue</option>
  56         <option>solarized dark</option>
  57         <option>solarized light</option>
  58         <option selected>twilight</option>
  59         <option>vibrant-ink</option>
  60         <option>xq-dark</option>
  61         <option>xq-light</option>
  62     </select>    Select Font Size <select onchange="selectFontsize()" id="selectFontSize">
  63           <option value="13px">13px</option>
  64           <option value="14px">14px</option>
  65           <option value="16px">16px</option>
  66           <option value="18px">18px</option>
  67           <option value="20px" selected="selected">20px</option>
  68           <option value="24px">24px</option>
  69           <option value="26px">26px</option>
  70           <option value="28px">28px</option>
  71           <option value="30px">30px</option>
  72           <option value="32px">32px</option>
  73           <option value="34px">34px</option>
  74           <option value="36px">36px</option>
  75         </select>
  76 <label for="checkBoxReadOnly">Read-only</label>
  77 <input type="checkbox" id="checkBoxReadOnly" onchange="selectReadOnly()">
  78 <label for="id_tabToIndentSpace">Insert Spaces on Tab</label>
  79 <input type="checkbox" id="id_tabToIndentSpace" onchange="tabToIndentSpace()">
  80 </p>
  81 <textarea id="code" name="code">
  82 ---------1---------2---------3---------4---------5---------6---------7---------8
  83 12345678911234567892123456789312345678941234567895123456789612345678971234567898
  84 000010 IDENTIFICATION DIVISION.                                        MODTGHERE
  85 000020 PROGRAM-ID.       SAMPLE.
  86 000030 AUTHOR.           TEST SAM.
  87 000040 DATE-WRITTEN.     5 February 2013
  88 000041
  89 000042* A sample program just to show the form.
  90 000043* The program copies its input to the output,
  91 000044* and counts the number of records.
  92 000045* At the end this number is printed.
  93 000046
  94 000050 ENVIRONMENT DIVISION.
  95 000060 INPUT-OUTPUT SECTION.
  96 000070 FILE-CONTROL.
  97 000080     SELECT STUDENT-FILE     ASSIGN TO SYSIN
  98 000090         ORGANIZATION IS LINE SEQUENTIAL.
  99 000100     SELECT PRINT-FILE       ASSIGN TO SYSOUT
 100 000110         ORGANIZATION IS LINE SEQUENTIAL.
 101 000120
 102 000130 DATA DIVISION.
 103 000140 FILE SECTION.
 104 000150 FD  STUDENT-FILE
 105 000160     RECORD CONTAINS 43 CHARACTERS
 106 000170     DATA RECORD IS STUDENT-IN.
 107 000180 01  STUDENT-IN              PIC X(43).
 108 000190
 109 000200 FD  PRINT-FILE
 110 000210     RECORD CONTAINS 80 CHARACTERS
 111 000220     DATA RECORD IS PRINT-LINE.
 112 000230 01  PRINT-LINE              PIC X(80).
 113 000240
 114 000250 WORKING-STORAGE SECTION.
 115 000260 01  DATA-REMAINS-SWITCH     PIC X(2)      VALUE SPACES.
 116 000261 01  RECORDS-WRITTEN         PIC 99.
 117 000270
 118 000280 01  DETAIL-LINE.
 119 000290     05  FILLER              PIC X(7)      VALUE SPACES.
 120 000300     05  RECORD-IMAGE        PIC X(43).
 121 000310     05  FILLER              PIC X(30)     VALUE SPACES.
 122 000311
 123 000312 01  SUMMARY-LINE.
 124 000313     05  FILLER              PIC X(7)      VALUE SPACES.
 125 000314     05  TOTAL-READ          PIC 99.
 126 000315     05  FILLER              PIC X         VALUE SPACE.
 127 000316     05  FILLER              PIC X(17)
 128 000317                 VALUE  'Records were read'.
 129 000318     05  FILLER              PIC X(53)     VALUE SPACES.
 130 000319
 131 000320 PROCEDURE DIVISION.
 132 000321
 133 000330 PREPARE-SENIOR-REPORT.
 134 000340     OPEN INPUT  STUDENT-FILE
 135 000350          OUTPUT PRINT-FILE.
 136 000351     MOVE ZERO TO RECORDS-WRITTEN.
 137 000360     READ STUDENT-FILE
 138 000370         AT END MOVE 'NO' TO DATA-REMAINS-SWITCH
 139 000380     END-READ.
 140 000390     PERFORM PROCESS-RECORDS
 141 000410         UNTIL DATA-REMAINS-SWITCH = 'NO'.
 142 000411     PERFORM PRINT-SUMMARY.
 143 000420     CLOSE STUDENT-FILE
 144 000430           PRINT-FILE.
 145 000440     STOP RUN.
 146 000450
 147 000460 PROCESS-RECORDS.
 148 000470     MOVE STUDENT-IN TO RECORD-IMAGE.
 149 000480     MOVE DETAIL-LINE TO PRINT-LINE.
 150 000490     WRITE PRINT-LINE.
 151 000500     ADD 1 TO RECORDS-WRITTEN.
 152 000510     READ STUDENT-FILE
 153 000520         AT END MOVE 'NO' TO DATA-REMAINS-SWITCH
 154 000530     END-READ.
 155 000540
 156 000550 PRINT-SUMMARY.
 157 000560     MOVE RECORDS-WRITTEN TO TOTAL-READ.
 158 000570     MOVE SUMMARY-LINE TO PRINT-LINE.
 159 000571     WRITE PRINT-LINE.
 160 000572
 161 000580
 162 </textarea>
 163     <script>
 164       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 165         lineNumbers: true,
 166         matchBrackets: true,
 167         mode: "text/x-cobol",
 168         theme : "twilight",
 169         styleActiveLine: true,
 170         showCursorWhenSelecting : true,
 171       });
 172       function selectTheme() {
 173         var themeInput = document.getElementById("selectTheme");
 174         var theme = themeInput.options[themeInput.selectedIndex].innerHTML;
 175         editor.setOption("theme", theme);
 176       }
 177       function selectFontsize() {
 178         var fontSizeInput = document.getElementById("selectFontSize");
 179         var fontSize = fontSizeInput.options[fontSizeInput.selectedIndex].innerHTML;
 180         editor.getWrapperElement().style["font-size"] = fontSize;
 181         editor.refresh();
 182       }
 183       function selectReadOnly() {
 184         editor.setOption("readOnly", document.getElementById("checkBoxReadOnly").checked);
 185       }
 186       function tabToIndentSpace() {
 187         if (document.getElementById("id_tabToIndentSpace").checked) {
 188             editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection("    ", "end"); }});
 189         } else {
 190             editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection("    ", "end"); }});
 191         }
 192       }
 193     </script>
 194   </body>
 195 </html>