Guest User

index.html

a guest
Sep 16th, 2020
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.13 KB | None | 0 0
  1. <!-- ---
  2. layout: example
  3. permalink: /examples/ace/
  4. exampleId: ace
  5. stylesheets:
  6. - /libs/@convergence/ace-collab-ext/css/ace-collab-ext.css
  7. - /examples/ace/ace.css
  8. overview: |-
  9. This example demonstrates building a realtime source code editor with the
  10. <a href="https://ace.c9.io/">Ace Editor</a>. This example uses the
  11. <a href="https://github.com/convergencelabs/ace-collab-ext">Ace Collaborative Extensions</a> to
  12. add in remote cursors, selections, and a Radar View that shows where other users are editing.
  13. --- -->
  14. <div class="wrapped-editor">
  15. <div class="editor ace_editor ace-monokai ace_dark" id="ace-editor" style="height: 100%; width: 400px;"><textarea class="ace_text-input" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; font-size: 1px; height: 1px; width: 1px; top: 14px; left: 51px;" wrap="off"></textarea><div class="ace_gutter" aria-hidden="true" style="left: 0px; width: 47px;"><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="height: 1000000px; top: 0px; left: 0px; width: 47px;"><div class="ace_gutter-cell ace_gutter-active-line " style="height: 14px; top: 0px;">1<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 14px;">2<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 28px;">3<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 42px;">4<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 56px;">5<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 70px;">6<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 84px;">7<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 98px;">8<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 112px;">9<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 126px;">10<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 140px;">11<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 154px;">12<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 168px;">13<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 182px;">14<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 196px;">15<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 210px;">16<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 224px;">17<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 238px;">18<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 252px;">19<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 266px;">20<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 280px;">21<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 294px;">22<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 308px;">23<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 322px;">24<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 336px;">25<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 350px;">26<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 364px;">27<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 378px;">28<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 392px;">29<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 406px;">30<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 420px;">31<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 434px;">32<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 448px;">33<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 462px;">34<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 476px;">35<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 490px;">36<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 504px;">37<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 518px;">38<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 532px;">39<span style="display: none;"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 546px;">40<span style="display: inline-block; height: 14px;" class="ace_fold-widget ace_start ace_open"></span></div><div class="ace_gutter-cell " style="height: 14px; top: 560px;">41<span style="display: none;"></span></div></div></div><div class="ace_scroller" style="left: 47px; right: 17px; bottom: 0px;"><div class="ace_content" style="top: 0px; left: 0px; width: 1023px; height: 559px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 564px; visibility: visible;"></div></div><div class="ace_layer ace_marker-layer"><div style="height: 14px; top: 0px; left: 0px; right: 0px;" class="ace_active-line"></div></div><div class="ace_layer ace_text-layer" style="height: 1000000px; margin: 0px 4px; top: 0px; left: 0px;"><div style="height: 14px; top: 0px;" class="ace_line"><span class="ace_storage ace_type">var</span> <span class="ace_identifier">observableProto</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 14px;" class="ace_line"></div><div style="height: 14px; top: 28px;" class="ace_line"><span class="ace_comment ace_doc">/**</span></div><div style="height: 14px; top: 42px;" class="ace_line"><span class="ace_comment ace_doc"> * Represents a push-style collection.</span></div><div style="height: 14px; top: 56px;" class="ace_line"><span class="ace_comment ace_doc"> */</span></div><div style="height: 14px; top: 70px;" class="ace_line"><span class="ace_storage ace_type">var</span> <span class="ace_identifier">Observable</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">Rx</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">Observable</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_paren ace_lparen">(</span><span class="ace_storage ace_type">function</span> <span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span></div><div style="height: 14px; top: 84px;" class="ace_line"></div><div style="height: 14px; top: 98px;" class="ace_line"> <span class="ace_storage ace_type">function</span> <span class="ace_entity ace_name ace_function">makeSubscribe</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable ace_parameter">self</span><span class="ace_punctuation ace_operator">, </span><span class="ace_variable ace_parameter">subscribe</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span></div><div style="height: 14px; top: 112px;" class="ace_line"> <span class="ace_keyword">return</span> <span class="ace_storage ace_type">function</span> <span class="ace_paren ace_lparen">(</span><span class="ace_identifier">o</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span></div><div style="height: 14px; top: 126px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_storage ace_type">var</span> <span class="ace_identifier">oldOnError</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">o</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">onError</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 140px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_storage ace_type">o</span><span class="ace_punctuation ace_operator">.</span><span class="ace_entity ace_name ace_function">onError</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_storage ace_type">function</span> <span class="ace_paren ace_lparen">(</span><span class="ace_variable ace_parameter">e</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span></div><div style="height: 14px; top: 154px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_identifier">makeStackTraceLong</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">e</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">self</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 168px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_identifier">oldOnError</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function">call</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">o</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">e</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 182px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_paren ace_rparen">}</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 196px;" class="ace_line"></div><div style="height: 14px; top: 210px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_keyword">return</span> <span class="ace_identifier">subscribe</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function">call</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">self</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">o</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 224px;" class="ace_line"> <span class="ace_paren ace_rparen">}</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 238px;" class="ace_line"> <span class="ace_paren ace_rparen">}</span></div><div style="height: 14px; top: 252px;" class="ace_line"></div><div style="height: 14px; top: 266px;" class="ace_line"> <span class="ace_storage ace_type">function</span> <span class="ace_entity ace_name ace_function">Observable</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span></div><div style="height: 14px; top: 280px;" class="ace_line"> <span class="ace_keyword">if</span> <span class="ace_paren ace_lparen">(</span><span class="ace_identifier">Rx</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">config</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">longStackSupport</span> <span class="ace_keyword ace_operator">&amp;&amp;</span> <span class="ace_identifier">hasStacks</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span></div><div style="height: 14px; top: 294px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_storage ace_type">var</span> <span class="ace_identifier">oldSubscribe</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable ace_language">this</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">_subscribe</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 308px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_storage ace_type">var</span> <span class="ace_identifier">e</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">tryCatch</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">thrower</span><span class="ace_paren ace_rparen">)</span><span class="ace_paren ace_lparen">(</span><span class="ace_keyword">new</span> <span class="ace_variable ace_language">Error</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">))</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">e</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 322px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_variable ace_language">this</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">stack</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">e</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">stack</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function">substring</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">e</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">stack</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function">indexOf</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'</span><span class="ace_constant ace_language ace_escape">\n</span><span class="ace_string">'</span><span class="ace_paren ace_rparen">)</span> <span class="ace_keyword ace_operator">+</span> <span class="ace_constant ace_numeric">1</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 336px;" class="ace_line"><span class="ace_indent-guide"> </span> <span class="ace_variable ace_language">this</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">_subscribe</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">makeSubscribe</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable ace_language">this</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">oldSubscribe</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 350px;" class="ace_line"> <span class="ace_paren ace_rparen">}</span></div><div style="height: 14px; top: 364px;" class="ace_line"> <span class="ace_paren ace_rparen">}</span></div><div style="height: 14px; top: 378px;" class="ace_line"></div><div style="height: 14px; top: 392px;" class="ace_line"> <span class="ace_identifier">observableProto</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">Observable</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_constant">prototype</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 406px;" class="ace_line"></div><div style="height: 14px; top: 420px;" class="ace_line"> <span class="ace_comment ace_doc">/**</span></div><div style="height: 14px; top: 434px;" class="ace_line"><span class="ace_comment ace_doc"> * Determines whether the given object is an Observable</span></div><div style="height: 14px; top: 448px;" class="ace_line"><span class="ace_comment ace_doc"> * </span><span class="ace_comment ace_doc ace_tag">@param</span><span class="ace_comment ace_doc"> {Any} An object to determine whether it is an Observable</span></div><div style="height: 14px; top: 462px;" class="ace_line"><span class="ace_comment ace_doc"> * </span><span class="ace_comment ace_doc ace_tag">@returns</span><span class="ace_comment ace_doc"> {Boolean} true if an Observable, else false.</span></div><div style="height: 14px; top: 476px;" class="ace_line"><span class="ace_comment ace_doc"> */</span></div><div style="height: 14px; top: 490px;" class="ace_line"> <span class="ace_storage ace_type">Observable</span><span class="ace_punctuation ace_operator">.</span><span class="ace_entity ace_name ace_function">isObservable</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_storage ace_type">function</span> <span class="ace_paren ace_lparen">(</span><span class="ace_variable ace_parameter">o</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span></div><div style="height: 14px; top: 504px;" class="ace_line"> <span class="ace_keyword">return</span> <span class="ace_identifier">o</span> <span class="ace_keyword ace_operator">&amp;&amp;</span> <span class="ace_identifier">isFunction</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">o</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">subscribe</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 518px;" class="ace_line"> <span class="ace_paren ace_rparen">}</span><span class="ace_punctuation ace_operator">;</span></div><div style="height: 14px; top: 532px;" class="ace_line"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor" style="display: block; top: 0px; left: 4px; width: 7px; height: 14px;"></div></div></div></div><div class="ace_scrollbar ace_scrollbar-v" style="width: 22px; bottom: 17px;"><div class="ace_scrollbar-inner" style="width: 22px; height: 1176px;"></div></div><div class="ace_scrollbar ace_scrollbar-h" style="height: 22px; left: 47px; right: 17px;"><div class="ace_scrollbar-inner" style="height: 22px; width: 1023px;"></div></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;"><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;">הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה</div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-language-override: inherit; font-feature-settings: inherit; font-variation-settings: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></div>
  16. <div class="radar-view" id="radar-view" style="position: relative;"></div>
  17.  
  18. <script src="/convdemo/ace_example/src/libs/ace-builds/src/ace.js"></script>
  19. <script src="/convdemo/ace_example/src/libs/@convergence/ace-collab-ext/umd/ace-collab-ext.js" type="text/javascript" charset="utf-8"></script>
  20. <script src="/convdemo/ace_example/src/libs/@convergence/color-assigner/umd/color-assigner.js" type="text/javascript" charset="utf-8"></script>
  21. <script src="default_editor_contents.js" type="text/javascript" charset="utf-8"></script>
  22. <!-- Convergence resources -->
  23. <script src="/convdemo/ace_example/src/config.js"></script>
  24. <script src="/convdemo/ace_example/src/libs/rxjs/bundles/rxjs.umd.min.js"></script>
  25. <script src="/convdemo/ace_example/src/libs/@convergence/convergence/convergence.global.js"></script>
  26. <script src="ace.js" type="text/javascript" charset="utf-8"></script>
  27. </div>
  28. </div>
Add Comment
Please, Sign In to add comment