| Index: trunk/extensions/VisualEditor/demos/playground/ie.html |
| — | — | @@ -0,0 +1,47 @@ |
| | 2 | +<!doctype html> |
| | 3 | +<html> |
| | 4 | +<head> |
| | 5 | + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
| | 6 | + <script src="../../modules/rangy/rangy-core.js"></script> |
| | 7 | + <script> |
| | 8 | + $(function() { |
| | 9 | + // Don't allow dragging of any elements |
| | 10 | + $('#editor').on('dragover drop', function( e ) { |
| | 11 | + e.preventDefault(); |
| | 12 | + } ); |
| | 13 | + |
| | 14 | + // When a table is clicked, put move the cursor |
| | 15 | + $('#editor table').on('mouseup', function(e) { |
| | 16 | + if (e.target.nodeName.toLowerCase() == 'table') { |
| | 17 | + moveCursor(); |
| | 18 | + } |
| | 19 | + }); |
| | 20 | + |
| | 21 | + // Prevent resizing of tables. Works for all IE. |
| | 22 | + document.getElementsByTagName('table')[0].onresizestart = function(e) { |
| | 23 | + return false; |
| | 24 | + } |
| | 25 | + }); |
| | 26 | + function moveCursor() { |
| | 27 | + console.log('moving cursor'); |
| | 28 | + sel = rangy.getSelection(); |
| | 29 | + range = rangy.createRange(); |
| | 30 | + range.setStart( $('#editor td:first')[0], 0 ); |
| | 31 | + range.setEnd( $('#editor td:first')[0], 0 ); |
| | 32 | + sel.setSingleRange( range ); |
| | 33 | + } |
| | 34 | + </script> |
| | 35 | + <style> |
| | 36 | + #editor table, #editor td { |
| | 37 | + border: 1px solid #CCC; |
| | 38 | + } |
| | 39 | + #editor table { |
| | 40 | + // Works for IE 9 and lower |
| | 41 | + // -ms-behavior: url(noresize.htc); |
| | 42 | + } |
| | 43 | + </style> |
| | 44 | +</head> |
| | 45 | +<body> |
| | 46 | + <div id="editor" contenteditable="true"><p class="ce-leafNode es-paragraphView es-viewBranchNode-firstChild">In <span class="es-contentView-format-link" data-title="wiki/Computer_science">computer science</span>, <b>direct <i>manipulation</i></b><i></i> is a <span class="es-contentView-format-link" data-title="wiki/Human-computer interaction">human-computer interaction</span> style which involves continuous representation of objects of interest, and rapid, reversible, incremental actions and feedback. The intention is to allow a user to directly manipulate objects presented to them, using actions that correspond at least loosely to the physical world. An example of direct-manipulation is resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse.</p><table><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table></div> |
| | 47 | +</body> |
| | 48 | +</html> |
| Index: trunk/extensions/VisualEditor/demos/playground/noresize.htc |
| — | — | @@ -0,0 +1,10 @@ |
| | 2 | +<PUBLIC:COMPONENT> |
| | 3 | +<PUBLIC:ATTACH EVENT="onresizestart" ONEVENT="resize()" /> |
| | 4 | +<SCRIPT LANGUAGE="JScript"> |
| | 5 | +function resize(){ |
| | 6 | + event.cancelBubble = true; |
| | 7 | + event.returnValue = false; |
| | 8 | +return false; |
| | 9 | +} |
| | 10 | +</SCRIPT> |
| | 11 | +</PUBLIC:COMPONENT> |