Commits

Michael Shepanski  committed 861d944

Cleanup wrapper HTML that gets added

  • Participants
  • Parent commits 32b83aa

Comments (0)

Files changed (8)

 3.) Hook in the script by calling .wysiwym() on the textarea element
     in your page. That's It!:
     $('#mytextarea').wysiwym(WysiwymMarkdown);
-    $('#mytextarea').wysiwym(WysiwymMarkdown, options);
+    $('#mytextarea').wysiwym(WysiwymMarkdown, {options});
 
 
 OPTIONS
 The options argument to wysiwym is a Javascript object that knows about the
 following attributes:
 
-theme           - Color theme to use (light or dark); Default: 'light'.
-buttonContainer - jQuery element to place buttons; Default: undefined (auto-created).
+containerButton - jQuery element to place buttons; Default: undefined (auto-created).
+containerHelp   - jQuery element to place help; Default: undefined (auto-created).
 helpEnabled     - Set false to disable the help menu; Default: true.
-helpContainer   - jQuery element to place help; Default: undefined (auto-created).
-helpFloat       - CSS float value for helpContainer and helpToggle link; Default 'left'.
 helpToggle      - Set false to always show the help menu (disable toggle); Default: true.
+helpToggleElem  - jQuery element to toggle help (makes <a> by default)
 helpTextShow    - Toggle text to display when help is not visible; Default: 'show markup syntax'.
 helpTextHide    - Toggle text to display when help is visible;  Default: 'hide markup syntax'.

File examples/basic.bbcode.html

       <p>Examples:
         <a href='basic.markdown.html'>Markdown</a>,
         <a href='basic.mediawiki.html'>MediaWiki</a>,
-        <a href='basic.bbcode.html'>BBCode</a>,
-        <a href='theme.dark.html'>Dark Theme</a>
+        <a href='basic.bbcode.html'>BBCode</a>
         (<a href='devel.markdown.html'>Devel</a>)
       </p>
-      <textarea id='mytextarea'></textarea>
+      <textarea id='mytextarea' wrap='off'></textarea>
     </div>
   </body>
 </html>

File examples/basic.markdown.html

         // Sets up the Wysiwym editor given a markup language Current markup
         // languages include: Wysiwym.Markup, Wysiwym.MediaWiki, Wysiwym.BBCode
         // For a list of other options see the README.txt.
-        $('#mytextarea').wysiwym(Wysiwym.Markdown, {
-            helpEnabled: true,
-            helpToggle: true
-        });
+        $('#mytextarea').wysiwym(Wysiwym.Markdown);
 
       });
     </script>
       <p>Examples:
         <a href='basic.markdown.html'>Markdown</a>,
         <a href='basic.mediawiki.html'>MediaWiki</a>,
-        <a href='basic.bbcode.html'>BBCode</a>,
-        <a href='theme.dark.html'>Dark Theme</a>
+        <a href='basic.bbcode.html'>BBCode</a>
         (<a href='devel.markdown.html'>Devel</a>)
       </p>
-      <textarea id='mytextarea'></textarea>
+      <textarea id='mytextarea' wrap='off'></textarea>
     </div>
   </body>
 </html>

File examples/basic.mediawiki.html

       <p>Examples:
         <a href='basic.markdown.html'>Markdown</a>,
         <a href='basic.mediawiki.html'>MediaWiki</a>,
-        <a href='basic.bbcode.html'>BBCode</a>,
-        <a href='theme.dark.html'>Dark Theme</a>
+        <a href='basic.bbcode.html'>BBCode</a>
         (<a href='devel.markdown.html'>Devel</a>)
       </p>
-      <textarea id='mytextarea'></textarea>
+      <textarea id='mytextarea' wrap='off'></textarea>
     </div>
   </body>
 </html>

File examples/devel.markdown.html

         });
 
         // Update the Debug Text every half second
-        var prevDebugstr = '';
+        var prevValue = '';
         var updateTextareaDebug = function() {
-            debugstr = new Wysiwym.Textarea($('#mytextarea')).toString();
-            if (debugstr != prevDebugstr) {
-                prevDebugstr = debugstr;
+            var newValue = $('#mytextarea').val();
+            if (newValue != prevValue) {
+                prevValue = newValue;
+                debugstr = new Wysiwym.Textarea($('#mytextarea')).toString();
                 $('#textarea-debug').text(debugstr);
             }
-            setTimeout(updateTextareaDebug, 300);
+            setTimeout(updateTextareaDebug, 100);
         }
         updateTextareaDebug();
 
       <p>Examples:
         <a href='basic.markdown.html'>Markdown</a>,
         <a href='basic.mediawiki.html'>MediaWiki</a>,
-        <a href='basic.bbcode.html'>BBCode</a>,
-        <a href='theme.dark.html'>Dark Theme</a>
+        <a href='basic.bbcode.html'>BBCode</a>
         (<a href='devel.markdown.html'>Devel</a>)
       </p>
-      <textarea id='mytextarea'></textarea>
+      <textarea id='mytextarea' wrap='off'></textarea>
     </div>
     <div style='clear:both;'></div>
     <pre id='textarea-debug'>Hello</pre>

File examples/theme.dark.html

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-  <head>
-    <title>Basic Example - jquery-wysiwym</title>
-    <link type='text/css' rel='stylesheet' href='examples.css'/>
-    <link type='text/css' rel='stylesheet' href='../wysiwym/wysiwym.css'/>
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-    <script type='text/javascript' src='../wysiwym/wysiwym.js'></script>
-    <script type='text/javascript'>
-      $(function() {
-
-        // Sets up the Wysiwym editor given a markup language Current markup
-        // languages include: Wysiwym.Markup, Wysiwym.MediaWiki, Wysiwym.BBCode
-        // For a list of other options see the README.txt.
-        $('#mytextarea').wysiwym(Wysiwym.Markdown, {
-            theme: 'dark',
-            helpEnabled: true,
-            helpToggle: true
-        });
-
-      });
-    </script>
-  </head>
-  <body class='exampledark'>
-    <div id='container'>
-      <h1>Wysiwym Dark-Theme Editor</h1>
-      <p>The editor on this page is using wysiwym. The library lends itself to be easily adapted
-        to other markup languages not currently implemented. If you write an extention for
-        another markup language and would like to help out with this package, I would love to
-        include it in future releases. You can download or contibute via the
-        <a href='https://bitbucket.org/mjs7231/jquery-wysiwym'>jquery-wysiwym Bitbucket repository</a>.
-      </p>
-      <p>Examples:
-        <a href='basic.markdown.html'>Markdown</a>,
-        <a href='basic.mediawiki.html'>MediaWiki</a>,
-        <a href='basic.bbcode.html'>BBCode</a>,
-        <a href='theme.dark.html'>Dark Theme</a>
-        (<a href='devel.markdown.html'>Devel</a>)
-      </p>
-      <textarea id='mytextarea'></textarea>
-    </div>
-  </body>
-</html>

File wysiwym/wysiwym.css

 /*-------------------------------------------------------------
  * Styles for Wysiwym Buttons
  *------------------------------------------------------------- */
-div.wysiwymButtons {
+div.wysiwym-buttons {
   height: 18px;
 }
-div.wysiwymButtons div.button {
+div.wysiwym-buttons div.button {
   float: left;
   background-image: url(buttons.light.png);
   background-repeat: repeat-x;
   background-position: 0px 0px;
   border-right: 1px solid #aaa;
-
 }
-div.wysiwymButtons div.button.first {
+div.wysiwym-buttons div.button.first {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   -webkit-border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -moz-border-radius-bottomleft: 3px;
 }
-div.wysiwymButtons div.button.last {
+div.wysiwym-buttons div.button.last {
   border-right: 0px;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -moz-border-radius-bottomright: 3px;
 }
-div.wysiwymButtons div.button span.wrap {
+div.wysiwym-buttons div.button span.wrap {
   display: block;
   height: 18px;
 }
-div.wysiwymButtons div.button span.text {
+div.wysiwym-buttons div.button span.text {
   padding: 0px 4px;
   color: #555;
   font-size: 12px;
   -webkit-user-select: none;
 }
 
-/*--- Buttons for dark theme. ---*/
-div.wysiwymButtons.dark div.button {
-  background-image: url(buttons.dark.png);
-  border-right: 1px solid #222;
-}
-div.wysiwymButtons.dark div.button span.wrap {
-  background-image: url(buttons.dark.png);
-}
-
 /*--- Disable Text for all known button types ---*/
-div.wysiwymButtons div.button.bold span.text       { display: none; }
-div.wysiwymButtons div.button.italic span.text     { display: none; }
-div.wysiwymButtons div.button.link span.text       { display: none; }
-div.wysiwymButtons div.button.bulletlist span.text { display: none; }
-div.wysiwymButtons div.button.numberlist span.text { display: none; }
-div.wysiwymButtons div.button.quote span.text      { display: none; }
-div.wysiwymButtons div.button.code span.text       { display: none; }
+div.wysiwym-buttons div.button.bold span.text { display: none; }
+div.wysiwym-buttons div.button.italic span.text { display: none; }
+div.wysiwym-buttons div.button.link span.text { display: none; }
+div.wysiwym-buttons div.button.bulletlist span.text { display: none; }
+div.wysiwym-buttons div.button.numberlist span.text { display: none; }
+div.wysiwym-buttons div.button.quote span.text { display: none; }
+div.wysiwym-buttons div.button.code span.text { display: none; }
 
 /*--- Button Image Offsets (Default) ---*/
-div.wysiwymButtons div.button.bold span.wrap       { width: 22px; background-image: url(buttons.light.png); background-position: -1px -54px; }
-div.wysiwymButtons div.button.italic span.wrap     { width: 22px; background-image: url(buttons.light.png); background-position: -1px -81px; }
-div.wysiwymButtons div.button.link span.wrap       { width: 22px; background-image: url(buttons.light.png); background-position: -1px -106px; }
-div.wysiwymButtons div.button.bulletlist span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -1px -132px; }
-div.wysiwymButtons div.button.numberlist span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -2px -158px; }
-div.wysiwymButtons div.button.quote span.wrap      { width: 22px; background-image: url(buttons.light.png); background-position: -1px -184px; }
-div.wysiwymButtons div.button.code span.wrap       { width: 22px; background-image: url(buttons.light.png); background-position: -1px -211px; }
-
-/*--- Button Image Offsets (Dark) ---*/
-div.wysiwymButtons.dark div.button.bold span.wrap       { width: 22px; background-image: url(buttons.dark.png); background-position: -1px -54px; }
-div.wysiwymButtons.dark div.button.italic span.wrap     { width: 22px; background-image: url(buttons.dark.png); background-position: -1px -81px; }
-div.wysiwymButtons.dark div.button.link span.wrap       { width: 22px; background-image: url(buttons.dark.png); background-position: -1px -106px; }
-div.wysiwymButtons.dark div.button.bulletlist span.wrap { width: 22px; background-image: url(buttons.dark.png); background-position: -1px -132px; }
-div.wysiwymButtons.dark div.button.numberlist span.wrap { width: 22px; background-image: url(buttons.dark.png); background-position: -2px -158px; }
-div.wysiwymButtons.dark div.button.quote span.wrap      { width: 22px; background-image: url(buttons.dark.png); background-position: -1px -184px; }
-div.wysiwymButtons.dark div.button.code span.wrap       { width: 22px; background-image: url(buttons.dark.png); background-position: -1px -211px; }
-
+div.wysiwym-buttons div.button.bold span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -1px -54px; }
+div.wysiwym-buttons div.button.italic span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -1px -81px; }
+div.wysiwym-buttons div.button.link span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -1px -106px; }
+div.wysiwym-buttons div.button.bulletlist span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -1px -132px; }
+div.wysiwym-buttons div.button.numberlist span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -2px -158px; }
+div.wysiwym-buttons div.button.quote span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -1px -184px; }
+div.wysiwym-buttons div.button.code span.wrap { width: 22px; background-image: url(buttons.light.png); background-position: -1px -211px; }
 
 /*--- Button Images Offsets (Hover) ---*/
-div.wysiwymButtons div.button:hover                      { background-position: 0px -30px; }
-div.wysiwymButtons div.button.bold:hover span.wrap       { background-position: -27px -54px; }
-div.wysiwymButtons div.button.italic:hover span.wrap     { background-position: -27px -81px; }
-div.wysiwymButtons div.button.link:hover span.wrap       { background-position: -27px -106px; }
-div.wysiwymButtons div.button.bulletlist:hover span.wrap { background-position: -27px -132px; }
-div.wysiwymButtons div.button.numberlist:hover span.wrap { background-position: -28px -158px; }
-div.wysiwymButtons div.button.quote:hover span.wrap      { background-position: -27px -184px; }
-div.wysiwymButtons div.button.code:hover span.wrap       { background-position: -27px -211px; }
+div.wysiwym-buttons div.button:hover { background-position: 0px -30px; }
+div.wysiwym-buttons div.button.bold:hover span.wrap { background-position: -27px -54px; }
+div.wysiwym-buttons div.button.italic:hover span.wrap { background-position: -27px -81px; }
+div.wysiwym-buttons div.button.link:hover span.wrap { background-position: -27px -106px; }
+div.wysiwym-buttons div.button.bulletlist:hover span.wrap { background-position: -27px -132px; }
+div.wysiwym-buttons div.button.numberlist:hover span.wrap { background-position: -28px -158px; }
+div.wysiwym-buttons div.button.quote:hover span.wrap { background-position: -27px -184px; }
+div.wysiwym-buttons div.button.code:hover span.wrap { background-position: -27px -211px; }
 
 
 /*-------------------------------------------------------------
  * Styles for Wysiwym Help
  *------------------------------------------------------------- */
-a.wysiwymHelpToggle {
+a.wysiwym-help-toggle {
+  float: left;
   font-size: 10px;
   line-height: 18px;
 }
-div.wysiwymHelp {
+div.wysiwym-help {
+  clear: left;
+  float: left;
   padding: 0px 5px;
   line-height: 18px;
   font-size: 10px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
 }
-div.wysiwymHelp td,
-div.wysiwymHelp th {
+div.wysiwym-help td,
+div.wysiwym-help th {
   color: #666;
   border-bottom: 1px dotted #ddd;
 }
 
-div.wysiwymHelp tr:last-child td,
-div.wysiwymHelp tr:last-child th {
+div.wysiwym-help tr:last-child td,
+div.wysiwym-help tr:last-child th {
   border-width: 0px;
 }
-div.wysiwymHelp th {
+div.wysiwym-help th {
   padding-right: 10px;
   text-align: left;
   color: #777;
 }
-
-/*--- Help Table for dark theme ---*/
-div.wysiwymHelp.dark {
-  background-color: #111;
-}
-div.wysiwymHelp.dark td,
-div.wysiwymHelp.dark th {
-  color: #555;
-  border-bottom: 1px dotted #222;
-}
-div.wysiwymHelp.dark th {
-  color: #777;
-  font-weight: normal;
-}

File wysiwym/wysiwym.js

 var Wysiwym = {};
 
 $.fn.wysiwym = function(markupSet, options) {
-    this.EDITORCLASS = 'wysiwymEditor';          // Class to use for the wysiwym editor
-    this.BUTTONCLASS = 'wysiwymButtons';         // Class to use for the wysiwym buttons
-    this.HELPCLASS = 'wysiwymHelp';              // Class to use for the wysiwym help
-    this.HELPTOGGLECLASS = 'wysiwymHelpToggle';  // Class to use for the wysiwym help
-    this.textelem = this;                        // Javascript textarea element
-    this.textarea = $(this);                     // jQuery textarea object
-    this.editor = undefined;                     // jQuery div wrapper around this editor
-    this.markup = new markupSet(this);           // Wysiwym Markup set to use
-    this.defaults = {                            // Default option values
-        buttonContainer: undefined,              // jQuery elem to place buttons (makes one by default)
-        helpEnabled: true,                       // Set true to display the help dropdown
-        helpContainer: undefined,                // jQuery elem to place help (makes one by default)
-        helpFloat: 'left',                       // CSS float value for helpContainer and helpToggle link
-        helpToggle: true,                        // Set true to use a toggle link for help
-        helpTextShow: 'show markup syntax',      // Toggle text to display when help is not visible
-        helpTextHide: 'hide markup syntax',      // Toggle text to display when help is visible
-        theme: 'light'                           // Color theme to use ('light' or  'dark')
+    this.EDITORCLASS = 'wysiwym-editor';           // Class to use for the wysiwym editor
+    this.BUTTONCLASS = 'wysiwym-buttons';          // Class to use for the wysiwym buttons
+    this.HELPCLASS = 'wysiwym-help';               // Class to use for the wysiwym help
+    this.HELPTOGGLECLASS = 'wysiwym-help-toggle';  // Class to use for the wysiwym help
+    this.textelem = this;                          // Javascript textarea element
+    this.textarea = $(this);                       // jQuery textarea object
+    this.editor = undefined;                       // jQuery div wrapper around this editor
+    this.markup = new markupSet(this);             // Wysiwym Markup set to use
+    this.defaults = {                              // Default option values
+        containerButtons: undefined,               // jQuery elem to place buttons (makes one by default)
+        containerHelp: undefined,                  // jQuery elem to place help (makes one by default)
+        helpEnabled: true,                         // Set true to display the help dropdown
+        helpToggle: true,                          // Set true to use a toggle link for help
+        helpToggleElem: undefined,                 // jQuery elem to toggle help (makes <a> by default)
+        helpTextShow: 'show markup syntax',        // Toggle text to display when help is not visible
+        helpTextHide: 'hide markup syntax'         // Toggle text to display when help is visible
     };
     this.options = $.extend(this.defaults, options ? options : {});
 
     // Add the button container and all buttons
     this.initializeButtons = function() {
         var markup = this.markup;
-        if (this.options.buttonContainer == undefined)
-            this.options.buttonContainer = $("<div></div>").insertBefore(this.textarea);
-        this.options.buttonContainer.addClass(this.BUTTONCLASS);
-        this.options.buttonContainer.addClass(this.options.theme);
+        if (this.options.containerButtons == undefined)
+            this.options.containerButtons = $("<div></div>").insertBefore(this.textarea);
+        this.options.containerButtons.addClass(this.BUTTONCLASS);
         for (var i=0; i<markup.buttons.length; i++) {
             // Create the button and apply first / last classes
             var button = markup.buttons[i];
             // Bind the button data and click event callback
             var data = $.extend({markup:this.markup}, button.data);
             jqbutton.bind('click', data, button.callback);
-            this.options.buttonContainer.append(jqbutton);
+            this.options.containerButtons.append(jqbutton);
         }
     };
 
 
     // Initialize the help syntax dropdown
     this.initializeHelp = function() {
-        this.options.helpContainer = options.helpContainer;
-        if (this.options.helpContainer == undefined)
-            this.options.helpContainer = $("<div></div>").insertAfter(this.textarea);
-        this.options.helpContainer.addClass(this.HELPCLASS);
-        this.options.helpContainer.addClass(this.options.theme);
+        this.options.containerHelp = options.containerHelp;
+        if (this.options.containerHelp == undefined)
+            this.options.containerHelp = $("<div></div>").insertAfter(this.textarea);
+        this.options.containerHelp.addClass(this.HELPCLASS);
         // Add the help table and items
         var helpBody = $('<tbody></tbody>');
         var helpTable = $('<table cellpadding="0" cellspacing="0" border="0"></table>').append(helpBody);
             var item = this.markup.help[i];
             helpBody.append('<tr><th>'+ item.label +'</th><td>'+ item.syntax +'</td></tr>');
         };
-        this.options.helpContainer.append(helpTable);
+        this.options.containerHelp.append(helpTable);
     };
 
     // Initialize the Help Toggle Button
     this.initializeHelpToggle = function() {
         var options = this.options;
         if (options.helpToggle) {
-            var helpToggle = $("<a href='#'>"+ options.helpTextShow +"</a>");
-            helpToggle.addClass(this.HELPTOGGLECLASS);
-            if (options.helpFloat) {
-                helpToggle.css('float', this.options.helpFloat);
-                options.helpContainer.css({'float':options.helpFloat, 'clear':options.helpFloat});
-            }
-            helpToggle.bind('click', function() {
-                if (options.helpContainer.is(':visible')) {
-                    options.helpContainer.slideUp('fast');
+            this.options.helpToggleElem = options.helpToggleElem;
+            if (this.options.helpToggleElem == undefined)
+                this.options.helpToggleElem = $("<a href='#'>"+ options.helpTextShow +"</a>");
+            this.options.helpToggleElem.addClass(this.HELPTOGGLECLASS);
+            this.options.helpToggleElem.bind('click', function() {
+                if (options.containerHelp.is(':visible')) {
+                    options.containerHelp.slideUp('fast');
                     $(this).text(options.helpTextShow);
                 } else {
-                    options.helpContainer.slideDown('fast');
+                    options.containerHelp.slideDown('fast');
                     $(this).text(options.helpTextHide);
                 }
                 return false;
             });
-            options.helpContainer.before(helpToggle).hide();
+            options.containerHelp.before(this.options.helpToggleElem).hide();
         }
     };
 
 
     // Add the specified prefix to the selection
     this.addPrefix = function(prefix) {
+        var numlines = this.lines.length;
         var line = this.lines[this.start.line];
         var newline = line.substring(0, this.start.position) +
             prefix + line.substring(this.start.position, line.length);
         this.start.position += prefix.length;
         if (this.start.line == this.end.line)
             this.end.position += prefix.length;
+        // Check we need to update the scroll height;  This is very slightly
+        // off because height != scrollHeight. A fix would be nice.
+        if (prefix.indexOf('\n') != -1) {
+            var scrollHeight = wysiwym.textelem.scrollHeight;
+            var lineheight = parseInt(scrollHeight / numlines);
+            wysiwym.scroll += lineheight;
+        }
+
     };
 
     // Add the specified suffix to the selection
             range.moveEnd('character', selectionEnd - selectionStart);
             range.select();
         }
-        this.textelem.scrollTop = this.selection.scroll;
+        console.log('Set scroll: '+ this.scroll)
+        this.textelem.scrollTop = this.scroll;
         this.textarea.focus();
     };
 
     this.exitindentblankline = true;    // True to insert blank line when exiting auto-indent ;)
     this.autoindents = [                // Regex lookups for auto-indent
         /^\s*\*\s/,                     // Bullet list
-        /^\s*(\d+)\.\s/,                // Number list with number (selected) for auto-increment
+        /^\s*(\d+)\.\s/,                // Number list (number selected for auto-increment)
         /^\s*\>\s/,                     // Quote list
         /^\s{4}\s*/                     // Code block
     ];