| Index: trunk/parsers/wikidom/demos/es/index2.html |
| — | — | @@ -0,0 +1,308 @@ |
| | 2 | +<!doctype html>
|
| | 3 | +
|
| | 4 | +<html>
|
| | 5 | + <head>
|
| | 6 | + <title>EditSurface Demo</title>
|
| | 7 | + <link rel="stylesheet" href="../../lib/es/es.Surface.css">
|
| | 8 | + <style>
|
| | 9 | + body {
|
| | 10 | + font-family: "Arial";
|
| | 11 | + font-size: 1em;
|
| | 12 | + width: 100%;
|
| | 13 | + margin: 0;
|
| | 14 | + padding: 0;
|
| | 15 | + overflow-y: scroll;
|
| | 16 | + -webkit-user-select: none;
|
| | 17 | + }
|
| | 18 | + #es-toolbar,
|
| | 19 | + #es-editor {
|
| | 20 | + border: solid 1px silver;
|
| | 21 | + margin-top: 1em;
|
| | 22 | + margin-left: auto;
|
| | 23 | + margin-right: auto;
|
| | 24 | + width: 95%;
|
| | 25 | + }
|
| | 26 | + .es-toolbarTool {
|
| | 27 | + float: left;
|
| | 28 | + width: 23px;
|
| | 29 | + height: 23px;
|
| | 30 | + margin: 0.5em 0 0.5em 0.5em;
|
| | 31 | + }
|
| | 32 | + .es-toolbarTool img {
|
| | 33 | + border: solid 1px white;
|
| | 34 | + cursor: pointer;
|
| | 35 | + }
|
| | 36 | + .es-toolbarTool img:hover {
|
| | 37 | + border-color: silver;
|
| | 38 | + }
|
| | 39 | + #source-wrapper {
|
| | 40 | + width: 95%;
|
| | 41 | + margin: auto;
|
| | 42 | + }
|
| | 43 | + #wikitext-source {
|
| | 44 | + min-height: 150px;
|
| | 45 | + margin: 0;
|
| | 46 | + padding: 1em;
|
| | 47 | + border: solid 1px silver;
|
| | 48 | + white-space: pre-wrap;
|
| | 49 | + font-family: "Droid Sans Mono", monospace;
|
| | 50 | + }
|
| | 51 | + </style>
|
| | 52 | + </head>
|
| | 53 | + <body>
|
| | 54 | + <table width="100%">
|
| | 55 | + <tr valign="top">
|
| | 56 | + <td width="50%">
|
| | 57 | + <div id="es-toolbar" class="es-toolbar">
|
| | 58 | + <div class="es-toolbarTool" id="es-toolbar-bold"><img src="images/bold.png"></div>
|
| | 59 | + <div class="es-toolbarTool" id="es-toolbar-italic"><img src="images/italic.png"></div>
|
| | 60 | + <div class="es-toolbarTool" id="es-toolbar-link"><img src="images/link.png"></div>
|
| | 61 | + <div class="es-toolbarTool" id="es-toolbar-small"><img src="images/small.png"></div>
|
| | 62 | + <div class="es-toolbarTool" id="es-toolbar-big"><img src="images/big.png"></div>
|
| | 63 | + <div class="es-toolbarTool" id="es-toolbar-sub"><img src="images/sub.png"></div>
|
| | 64 | + <div class="es-toolbarTool" id="es-toolbar-super"><img src="images/super.png"></div>
|
| | 65 | + <div class="es-toolbarTool" id="es-toolbar-clear"><img src="images/clear.png"></div>
|
| | 66 | + <div style="clear:both"></div>
|
| | 67 | + </div>
|
| | 68 | + <div id="es-editor"></div>
|
| | 69 | + </td>
|
| | 70 | + <td width="50%">
|
| | 71 | + <div id="source-wrapper">
|
| | 72 | + <h3>Wikitext Source</h3>
|
| | 73 | + <div id="wikitext-source"></div>
|
| | 74 | + </div>
|
| | 75 | + </td>
|
| | 76 | + </tr>
|
| | 77 | + </table>
|
| | 78 | +
|
| | 79 | + <script type="text/javascript" src="../../lib/jquery.js"></script>
|
| | 80 | + <script type="text/javascript" src="../../lib/es/es.js"></script>
|
| | 81 | + <script type="text/javascript" src="../../lib/es/es.EventEmitter.js"></script>
|
| | 82 | + <script type="text/javascript" src="../../lib/es/es.Position.js"></script>
|
| | 83 | + <script type="text/javascript" src="../../lib/es/es.Location.js"></script>
|
| | 84 | + <script type="text/javascript" src="../../lib/es/es.Range.js"></script>
|
| | 85 | + <script type="text/javascript" src="../../lib/es/es.Selection.js"></script>
|
| | 86 | + <script type="text/javascript" src="../../lib/es/es.Content.js"></script>
|
| | 87 | + <script type="text/javascript" src="../../lib/es/es.Container.js"></script>
|
| | 88 | + <script type="text/javascript" src="../../lib/es/es.Block.js"></script>
|
| | 89 | + <script type="text/javascript" src="../../lib/es/es.Document.js"></script>
|
| | 90 | + <script type="text/javascript" src="../../lib/es/es.Surface.js"></script>
|
| | 91 | + <script type="text/javascript" src="../../lib/es/es.TextFlow.js"></script>
|
| | 92 | + <script type="text/javascript" src="../../lib/es/es.ParagraphBlock.js"></script>
|
| | 93 | + <script type="text/javascript" src="../../lib/es/es.ListBlockList.js"></script>
|
| | 94 | + <script type="text/javascript" src="../../lib/es/es.ListBlockItem.js"></script>
|
| | 95 | + <script type="text/javascript" src="../../lib/es/es.ListBlock.js"></script>
|
| | 96 | + <script type="text/javascript" src="../../lib/es/es.Cursor.js"></script>
|
| | 97 | +
|
| | 98 | + <!-- Demo -->
|
| | 99 | + <script>
|
| | 100 | + $(document).ready( function() {
|
| | 101 | + doc = es.Document.newFromWikiDomDocument( { 'blocks': [
|
| | 102 | + {
|
| | 103 | + "type": "paragraph",
|
| | 104 | + "lines": [
|
| | 105 | + {
|
| | 106 | + 'text': "In text display, line wrap is the feature of continuing on a new line when a line is full, such that each line fits in the viewable window, allowing text to be read from top to bottom without any horizontal scrolling.",
|
| | 107 | + 'annotations': [
|
| | 108 | + // "In text display" should be bold
|
| | 109 | + { 'type': 'bold', 'range': { 'start': 0, 'end': 15 } },
|
| | 110 | + // "line wrap" should be italic
|
| | 111 | + { 'type': 'italic', 'range': { 'start': 17, 'end': 26 } },
|
| | 112 | + // "wrap is" should be a link to "#"
|
| | 113 | + {
|
| | 114 | + 'type': 'link',
|
| | 115 | + 'data': { 'href': './' },
|
| | 116 | + 'range': { 'start': 22, 'end': 29 }
|
| | 117 | + },
|
| | 118 | + ]
|
| | 119 | + },
|
| | 120 | + { 'text': "Word wrap is the additional feature of most text editors, word processors, and web browsers, of breaking lines between and not within words, except when a single word is longer than a line." },
|
| | 121 | + ]
|
| | 122 | + },
|
| | 123 | + {
|
| | 124 | + "type": "paragraph",
|
| | 125 | + "lines": [
|
| | 126 | + {
|
| | 127 | + 'text': "It is usually done on the fly when viewing or printing a document, so no line break code is manually entered, or stored. If the user changes the margins, the editor will either automatically reposition the line breaks to ensure that all the text will \"flow\" within the margins and remain visible, or provide the typist some convenient way to reposition the line breaks.",
|
| | 128 | + 'annotations': [
|
| | 129 | + // "[citation needed]" should be super
|
| | 130 | + {
|
| | 131 | + 'type': 'template',
|
| | 132 | + 'data': {
|
| | 133 | + 'html': '<sup><small><a href="#">[citation needed]</a></small></sup>'
|
| | 134 | + },
|
| | 135 | + 'range': { 'start': 120, 'end': 121 }
|
| | 136 | + }
|
| | 137 | + ]
|
| | 138 | + },
|
| | 139 | + { 'text': "A soft return is the break resulting from line wrap or word wrap, whereas a hard return is an intentional break, creating a new paragraph." },
|
| | 140 | + ]
|
| | 141 | + },
|
| | 142 | + {
|
| | 143 | + 'type': 'list',
|
| | 144 | + 'style': 'number',
|
| | 145 | + 'items': [
|
| | 146 | + {
|
| | 147 | + 'line': { 'text': 'Operating Systems' },
|
| | 148 | + 'lists': [
|
| | 149 | + {
|
| | 150 | + 'style': 'bullet',
|
| | 151 | + 'items': [
|
| | 152 | + {
|
| | 153 | + 'line': { 'text': 'Linux' },
|
| | 154 | + 'lists': [
|
| | 155 | + {
|
| | 156 | + 'style': 'bullet',
|
| | 157 | + 'items': [
|
| | 158 | + {
|
| | 159 | + 'line': { 'text': 'Ubuntu' },
|
| | 160 | + 'lists': [
|
| | 161 | + {
|
| | 162 | + 'style': 'bullet',
|
| | 163 | + 'items': [
|
| | 164 | + {
|
| | 165 | + 'line': {
|
| | 166 | + 'text': 'Desktop: Intuitive office apps, safe and fast web browsing, and seamless integration. Ubuntu brings the very best technologies straight to the desktop.',
|
| | 167 | + 'annotations': [
|
| | 168 | + // "[citation needed 2]" should be super
|
| | 169 | + {
|
| | 170 | + 'type': 'template',
|
| | 171 | + 'data': {
|
| | 172 | + 'html': '<sup><small><a href="#">[citation needed 2]</a></small></sup>'
|
| | 173 | + },
|
| | 174 | + 'range': { 'start': 85, 'end': 86 }
|
| | 175 | + }
|
| | 176 | + ]
|
| | 177 | + }
|
| | 178 | + },
|
| | 179 | + { 'line': { 'text': 'Server: Secure, fast and powerful, Ubuntu Server is transforming IT environments worldwide. Realise the full potential of your infrastructure with a reliable, easy-to-integrate technology platform. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. Lorem ipsum.. ' } },
|
| | 180 | + { 'line': { 'text': 'Cloud: Ubuntu cloud computing puts you in control of your IT infrastructure. It helps you access computing power as and when you need it so you can meet user demand more effectively.' } }
|
| | 181 | + ]
|
| | 182 | + }
|
| | 183 | + ]
|
| | 184 | + },
|
| | 185 | + { 'line': { 'text': 'Fedora' } },
|
| | 186 | + { 'line': { 'text': 'Gentoo' } }
|
| | 187 | + ]
|
| | 188 | + }
|
| | 189 | + ]
|
| | 190 | + },
|
| | 191 | + { 'line': { 'text': 'Windows' } },
|
| | 192 | + { 'line': { 'text': 'Mac' } }
|
| | 193 | + ]
|
| | 194 | + }
|
| | 195 | + ]
|
| | 196 | + },
|
| | 197 | + {
|
| | 198 | + 'line': {
|
| | 199 | + 'text': 'Second item',
|
| | 200 | + 'annotations': [
|
| | 201 | + {
|
| | 202 | + 'type': 'italic',
|
| | 203 | + 'range': {
|
| | 204 | + 'start': 0,
|
| | 205 | + 'end': 6
|
| | 206 | + }
|
| | 207 | + }
|
| | 208 | + ]
|
| | 209 | + }
|
| | 210 | + },
|
| | 211 | + {
|
| | 212 | + 'line': {
|
| | 213 | + 'text': 'Third item',
|
| | 214 | + 'annotations': [
|
| | 215 | + {
|
| | 216 | + 'type': 'bold',
|
| | 217 | + 'range': {
|
| | 218 | + 'start': 0,
|
| | 219 | + 'end': 5
|
| | 220 | + }
|
| | 221 | + }
|
| | 222 | + ]
|
| | 223 | + }
|
| | 224 | + },
|
| | 225 | + {
|
| | 226 | + 'line': {
|
| | 227 | + 'text': 'Fourth item',
|
| | 228 | + 'annotations': [
|
| | 229 | + {
|
| | 230 | + 'type': 'link',
|
| | 231 | + 'range': {
|
| | 232 | + 'start': 7,
|
| | 233 | + 'end': 11
|
| | 234 | + },
|
| | 235 | + 'data': { 'title': 'User:JohnDoe' }
|
| | 236 | + }
|
| | 237 | + ]
|
| | 238 | + }
|
| | 239 | + }
|
| | 240 | + ]
|
| | 241 | + },
|
| | 242 | + {
|
| | 243 | + 'type': 'paragraph',
|
| | 244 | + 'lines': [
|
| | 245 | + { 'text': 'The soft returns are usually placed after the ends of complete words, or after the punctuation that follows complete words. However, word wrap may also occur following a hyphen.' },
|
| | 246 | + { 'text': 'Word wrap following hyphens is sometimes not desired, and can be avoided by using a so-called non-breaking hyphen instead of a regular hyphen. On the other hand, when using word processors, invisible hyphens, called soft hyphens, can also be inserted inside words so that word wrap can occur following the soft hyphens.' },
|
| | 247 | + { 'text': 'Sometimes, word wrap is not desirable between words. In such cases, word wrap can usually be avoided by using a hard space or non-breaking space between the words, instead of regular spaces.' },
|
| | 248 | + { 'text': 'OccasionallyThereAreWordsThatAreSoLongTheyExceedTheWidthOfTheLineAndEndUpWrappingBetweenMultipleLines.' },
|
| | 249 | + { 'text': 'Text might have\ttabs\tin it too. Not all text will end in a line breaking character' }
|
| | 250 | + ]
|
| | 251 | + }
|
| | 252 | + ] } );
|
| | 253 | + var surface = new es.Surface( $('#es-editor'), doc );
|
| | 254 | +
|
| | 255 | + $( '#es-toolbar .es-toolbarTool' ).mousedown( function( e ) {
|
| | 256 | + e.preventDefault();
|
| | 257 | + return false;
|
| | 258 | + } );
|
| | 259 | + $( '#es-toolbar-bold' ).click( function() {
|
| | 260 | + surface.annotateContent( 'toggle', { 'type': 'bold' } );
|
| | 261 | + return false;
|
| | 262 | + } );
|
| | 263 | + $( '#es-toolbar-italic' ).click( function() {
|
| | 264 | + surface.annotateContent( 'toggle', { 'type': 'italic' } );
|
| | 265 | + return false;
|
| | 266 | + } );
|
| | 267 | + $( '#es-toolbar-small' ).click( function() {
|
| | 268 | + surface.annotateContent( 'toggle', {
|
| | 269 | + 'type': 'size',
|
| | 270 | + 'data': { 'type': 'small' }
|
| | 271 | + } );
|
| | 272 | + return false;
|
| | 273 | + } );
|
| | 274 | + $( '#es-toolbar-big' ).click( function() {
|
| | 275 | + surface.annotateContent( 'toggle', {
|
| | 276 | + 'type': 'size',
|
| | 277 | + 'data': { 'type': 'big' }
|
| | 278 | + } );
|
| | 279 | + return false;
|
| | 280 | + } );
|
| | 281 | + $( '#es-toolbar-sub' ).click( function() {
|
| | 282 | + surface.annotateContent( 'toggle', {
|
| | 283 | + 'type': 'script',
|
| | 284 | + 'data': { 'type': 'sub' }
|
| | 285 | + } );
|
| | 286 | + return false;
|
| | 287 | + } );
|
| | 288 | + $( '#es-toolbar-super' ).click( function() {
|
| | 289 | + surface.annotateContent( 'toggle', {
|
| | 290 | + 'type': 'script',
|
| | 291 | + 'data': { 'type': 'super' }
|
| | 292 | + } );
|
| | 293 | + return false;
|
| | 294 | + } );
|
| | 295 | + $( '#es-toolbar-link' ).click( function() {
|
| | 296 | + surface.annotateContent( 'toggle', {
|
| | 297 | + 'type': 'link',
|
| | 298 | + 'data': { 'href': '#' }
|
| | 299 | + } );
|
| | 300 | + return false;
|
| | 301 | + } );
|
| | 302 | + $( '#es-toolbar-clear' ).click( function() {
|
| | 303 | + surface.annotateContent( 'remove', { 'type': 'all' } );
|
| | 304 | + return false;
|
| | 305 | + } );
|
| | 306 | + } );
|
| | 307 | + </script>
|
| | 308 | + </body>
|
| | 309 | +</html>
|
| Property changes on: trunk/parsers/wikidom/demos/es/index2.html |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1 | 310 | + text/plain |