[Task] Markdown Examples under textarea 92/25892/1
authorBastian Bringenberg <spam@bastian-bringenberg.de>
Mon, 2 Dec 2013 20:00:27 +0000 (21:00 +0100)
committerBastian Bringenberg <spam@bastian-bringenberg.de>
Mon, 2 Dec 2013 20:00:27 +0000 (21:00 +0100)
* CSS file Created
* JavaScript for Toogle Created
* Examples from typo3wiki on Forge moved to edit.html template

Change-Id: I057c64b4814663ad7686c1656e71efbfd64cbfe8
Resolves: #54150
Refs: #41966

Configuration/TypoScript/setup.txt
Resources/Private/Templates/Page/Edit.html
Resources/Public/Css/typo3wiki.css [new file with mode: 0644]
Resources/Public/JavaScript/typo3wiki.js [new file with mode: 0644]

index a2de818..b6e0c8a 100755 (executable)
@@ -44,4 +44,7 @@ plugin.tx_typo3wiki._CSS_DEFAULT_STYLE (
        .tx-typo3wiki table td {
                vertical-align:top;
        }
-)
\ No newline at end of file
+)
+
+page.includeJS.typo3wiki = EXT:typo3wiki/Resources/Public/JavaScript/typo3wiki.js
+page.includeCSS.typo3wiki = EXT:typo3wiki/Resources/Public/Css/typo3wiki.css
\ No newline at end of file
index 6390bc2..aa83334 100755 (executable)
@@ -3,9 +3,11 @@
     <h1>Edit Page</h1>
     <f:if condition="{preview}">
         <f:then>
+               <h2>{page.pageTitle}</h2>
             <f:render partial="Page/Preview" arguments="{text:preview}"/>
         </f:then>
     </f:if>
+    
     <h2>{page.pageTitle}</h2>
     <f:form action="update" arguments="{page:page}">
         <f:form.textarea cols="20" rows="5" name="text" value="{unrenderedText}" />
         <f:form.submit name="command" value="Save" />
         <f:form.submit name="preview" value="Preview" />
     </f:form>
+    <div class="tx_typo3wiki_examples">
+       <span class="tx_typo3wiki_examples_toggle">Example Texts</span>
+       <div class="tx_typo3wiki_examples_content">
+               <table class="tx_typo3wiki_examples_table">
+                       <tr>
+                               <th>Bold</th>
+                               <td>**bold text**</td>
+                       </tr>
+                       <tr>
+                               <th>Italic</th>
+                               <td>*underscored text*</td>
+                       </tr>
+                       <tr>
+                               <th>Internal Link</th>
+                               <td>[[PageName]]
+[[My long Title|PageName]]
+                               </td>
+                       </tr>
+                       <tr>
+                               <th>External Link</th>
+                               <td>&lt;http://example.com/&gt;
+[YouTube](http://www.youtube.com)
+                               </td>
+                       </tr>
+                       <tr>
+                               <th>Image</th>
+                               <td>![Alt text](/path/to/img.jpg)</td>
+                       </tr>
+                       <tr>
+                               <th>Headlines</th>
+                               <td># Headline 1
+## Headline 2
+### Headline 3
+#### Headline 4
+##### Headline 5
+                               </td>
+                       </tr>
+                       <tr>
+                               <th>Table of Content</th>
+                               <td>&#x007b;TOC&#x007d;</td>
+                       </tr>
+                       <tr>
+                               <th>Table</th>
+                               <td>First Header  | Second Header
+------------ | -------------
+Content Cell  | Content Cell
+Content Cell  | Content Cell
+                               </td>
+                       </tr>
+                       <tr>
+                               <th>Code</th>
+                               <td>Lang: PHP
+&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php
+&nbsp;&nbsp;&nbsp;&nbsp;echo 'As you can __see__ here';
+&nbsp;&nbsp;&nbsp;&nbsp;$return = myCallableFunction($var1, $var2, 'text');
+                               </td>
+                       </tr>
+               </table>
+       </div>
+    </div>
+
 </f:section>
\ No newline at end of file
diff --git a/Resources/Public/Css/typo3wiki.css b/Resources/Public/Css/typo3wiki.css
new file mode 100644 (file)
index 0000000..0ffaf8c
--- /dev/null
@@ -0,0 +1,27 @@
+span.tx_typo3wiki_examples_toggle {
+       font-size: 0.9em;
+       font-weight: bold;
+       text-align: right;
+       width: 100%;
+       float: right;
+}
+
+span.tx_typo3wiki_examples_toggle:hover {
+       text-decoration: underline;
+}
+
+table.tx_typo3wiki_examples_table {
+       border-collapse: collapse;
+}
+
+table.tx_typo3wiki_examples_table td {
+       white-space: pre;
+       font-family: monospace;
+       display: block;
+       padding: .5em;
+}
+
+table.tx_typo3wiki_examples_table th {
+       vertical-align: top;
+       padding: .5em;
+}
\ No newline at end of file
diff --git a/Resources/Public/JavaScript/typo3wiki.js b/Resources/Public/JavaScript/typo3wiki.js
new file mode 100644 (file)
index 0000000..56185ef
--- /dev/null
@@ -0,0 +1,54 @@
+function typo3wiki_toogleExample($) {
+       console.log('func');
+       $(document).ready(function(){
+               $('.tx_typo3wiki_examples_content').hide();
+               $('.tx_typo3wiki_examples_toggle').click(function(){
+                       $('.tx_typo3wiki_examples_content').toggle('slow');
+               });
+       });
+}
+
+// Only do anything if jQuery isn't defined
+if (typeof jQuery == 'undefined') {
+       console.log('undefined!');
+       if (typeof $ == 'function') {
+               // warning, global var
+               thisPageUsingOtherJSLibrary = true;
+       }
+       function getScript(url, success) {
+               var script     = document.createElement('script');
+                    script.src = url;
+               var head = document.getElementsByTagName('head')[0],
+               done = false;
+               // Attach handlers for all browsers
+               script.onload = script.onreadystatechange = function() {
+                       if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
+                       done = true;
+                               // callback function provided as param
+                               success();
+                               script.onload = script.onreadystatechange = null;
+                               head.removeChild(script);       
+                       };
+               };
+               head.appendChild(script);
+       };
+       getScript('https://code.jquery.com/jquery-1.10.1.min.js', function() {
+               if (typeof jQuery=='undefined') {
+                       // Super failsafe - still somehow failed...
+               } else {
+                       // jQuery loaded! Make sure to use .noConflict just in case
+                       fancyCode();
+                       if (thisPageUsingOtherJSLibrary) {
+                               // Run your jQuery Code
+                               typo3wiki_toogleExample(jQuery);
+                       } else {
+                               // Use .noConflict(), then run your jQuery Code
+                               typo3wiki_toogleExample(jQuery);
+                       }
+               }
+       });
+} else { // jQuery was already loaded
+       // Run your jQuery Code
+       console.log('defined!');
+       typo3wiki_toogleExample(jQuery);
+};
\ No newline at end of file