Markdown toolbar for add comments field

MySchizoBuddy · Post by **MySchizoBuddy** » Sat Dec 03, 2005 5:13 pm

I was looking at the code for Mad4milk They have a markdown toolbar feature.

The code they use (after stripping everything) is

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="http://www.mad4milk.net/scripts/prototype.js"></script>
	<script type="text/javascript" src="http://www.mad4milk.net/scripts/behaviour.js"></script>
	<script type="text/javascript" src="http://www.mad4milk.net/scripts/moo.fx.js"></script>
	<script type="text/javascript" src="http://www.mad4milk.net/scripts/moo.fx.pack.js"></script>
	<script type="text/javascript" src="http://www.mad4milk.net/scripts/toolbar.js"></script>
</head>
<body>
	<input type="hidden" src="http://www.mad4milk.net/" id="sysdir" />
	<form enctype="multipart/form-data" method="post" action="http://www.mad4milk.net/entry/mooflex-beta-signup#add_comment" id="comments_add">
		<p><input type="hidden" name="fsSubmitCheck" value="true" /></p>
		<fieldset id="fs_addcomment">
			<input type="hidden" name="redirect" value="mooflex-beta-signup" />
			<input type="hidden" name="article_ID" value="145" />
			<div class="textarea">
				<div class="toolbar fs_description">
					<a class="resize big" rel="bigger"></a>
					<a class="resize small" rel="smaller"></a>
					<a class="tool" rel=" __:__ ">strong</a> 
					<a class="tool" rel=" _:_ ">em</a> 
					<a class="link">link</a> 
					<a class="list" rel="blockquote">bq</a> 
					<a class="list" rel="ordered">ol</a> 
					<a class="list" rel="unordered">ul</a> 
					<a class="list" rel="code">code</a> 
					<a class="preview edit" rel="edit">edit</a> 
					<a class="preview" rel="normal">preview</a> 
					<a class="preview" rel="html">html</a> 
				</div>
				<div id="preview" style="display:none;"></div>
				<textarea cols="30" rows="10" id="fs_description" name="text"></textarea>
			</div>

		</fieldset>
	</form>
	<script type="text/javascript">Behaviour.apply();ScrollLinks.start();</script>
</body></html>

It works

I can get all the scripts they are using obviously. except this one file that is mentioned here

Code: Select all

<input type="hidden" src="http://www.mad4milk.net/" id="sysdir" />

There is something in this sysdir that makes it all work. this dir is called in the toolbar.js file.

Any one knows what that might be

Post by **garvinhicking** » Sun Dec 04, 2005 12:44 pm

When using liveHTTP Headers, this is the list of files that are requested (minus PNGs and gifs):

GET /entry/interview-at-mcville.net/ HTTP/1.1
GET /mint/mint.js.php HTTP/1.1
GET /scripts/prototype.js HTTP/1.1
GET /scripts/behaviour.js HTTP/1.1
GET /scripts/moo.fx.js HTTP/1.1
GET /scripts/moo.fx.pack.js HTTP/1.1
GET /scripts/toolbar.js HTTP/1.1
GET /scripts/m4m.rules.js HTTP/1.1
GET /templates/style.css HTTP/1.1
GET /templates/contacts.css HTTP/1.1
GET /templates/toolbar.css HTTP/1.1
GET /templates/comments.css HTTP/1.1
GET /mint/mint.php?key=663368546b34534631363936333370544542537275643131&referer=http%3A//www.s9y.org/forums/viewtopic.php%3Ft%3D ... 3696259383 HTTP/1.1

HTH,
Garvin

MySchizoBuddy · Post by **MySchizoBuddy** » Sun Dec 04, 2005 12:55 pm

yeah but when i remove that one particular line of code. it stops working.
the toolbar.js, specially uses it

Code: Select all

sysdir = $('sysdir').src;

Post by **garvinhicking** » Sun Dec 04, 2005 1:05 pm

I think that sysdir think is just a "variable", not a special file. That one tells the javascript the source location of the whole page. It might be used to check if the script is running only on special URLs, that are allowed.

So you should just set the SRC of your sysdir input element to the URL of your blog.

Regards,
Garvin

MySchizoBuddy · Post by **MySchizoBuddy** » Mon Dec 05, 2005 12:30 pm

ok I changed it to my url and now I'm getting this error when I preview

Code: Select all

The requested URL /tlbindex.php/textpreview was not found on this server.

Apache/2.0.55 (Unix) PHP/4.4.1 DAV/2 mod_ssl/2.0.55

I looked at toolbar.js and found this code

Code: Select all

myPreview.remote(sysdir+"index.php/textpreview", this.pars);

Now the preview works but it previes the whole blog in the textarea, rather than just the text

Post by **garvinhicking** » Mon Dec 05, 2005 1:10 pm

Now the preview works but it previes the whole blog in the textarea, rather than just the text

Hm, then you need to know how that preview code works?

You might need to code a plugin that listens on the 'external_plugin' hook and does nothing else than to output the parsed textarea value.

You would then change "index.php/textpreview" to "index.php?/plugin/previewcomment". You will also need to know how the javascript sends the data. I think it does this via a POST request. And use a plugin like this:

Code: Select all

<?php
@define('PLUGIN_EVENT_FORMATPREVIEW_NAME', 'Preview HTML comment markup');
class serendipity_event_formatpreview extends serendipity_event {
    var $title = PLUGIN_EVENT_FORMATPREVIEW_NAME;

    function introspect(&$propbag) {
        global $serendipity;

        $propbag->add('name',          PLUGIN_EVENT_FORMATPREVIEW_NAME);
        $propbag->add('description',   '');
        $propbag->add('stackable',     false);
        $propbag->add('author',        'Garvin Hicking');
        $propbag->add('version',       '1.0');
        $propbag->add('requirements',  array(
            'serendipity' => '0.8',
            'smarty'      => '2.6.7',
            'php'         => '4.1.0'
        ));
        $propbag->add('event_hooks',    array(
            'external_plugin'  => true,
            'frontend_comment' => true
        ));
        $propbag->add('groups', array('FRONTEND_FULL_MODS'));
    }

    function generate_content(&$title) {
        $title = $this->title;
    }

    function event_hook($event, &$bag, &$eventData) {
        global $serendipity;

        $hooks = &$bag->get('event_hooks');

        if (isset($hooks[$event])) {
            switch($event) {
                case 'frontend_comment':
?>
<div class="serendipity_commentDirection serendipity_comment_preview">
   <script type="text/javascript" src="http://www.mad4milk.net/scripts/prototype.js"></script>
   <script type="text/javascript" src="http://www.mad4milk.net/scripts/behaviour.js"></script>
   <script type="text/javascript" src="http://www.mad4milk.net/scripts/moo.fx.js"></script>
   <script type="text/javascript" src="http://www.mad4milk.net/scripts/moo.fx.pack.js"></script>
   <script type="text/javascript" src="http://www.mad4milk.net/scripts/toolbar.js"></script>
</head>
<body>
   <input type="hidden" src="<?php echo $serendipity['baseURL']; ?>" id="sysdir" />
   <form enctype="multipart/form-data" method="post" action="" id="comments_add">
      <p><input type="hidden" name="fsSubmitCheck" value="true" /></p>
      <fieldset id="fs_addcomment">
         <input type="hidden" name="redirect" value="mooflex-beta-signup" />
         <input type="hidden" name="article_ID" value="145" />
         <div class="textarea">
            <div class="toolbar fs_description">
               <a class="resize big" rel="bigger"></a>
               <a class="resize small" rel="smaller"></a>
               <a class="tool" rel=" __:__ ">strong</a> 
               <a class="tool" rel=" _:_ ">em</a> 
               <a class="link">link</a> 
               <a class="list" rel="blockquote">bq</a> 
               <a class="list" rel="ordered">ol</a> 
               <a class="list" rel="unordered">ul</a> 
               <a class="list" rel="code">code</a> 
               <a class="preview edit" rel="edit">edit</a> 
               <a class="preview" rel="normal">preview</a> 
               <a class="preview" rel="html">html</a> 
            </div>
            <div id="preview" style="display:none;"></div>
            <textarea cols="30" rows="10" id="fs_description" name="text"></textarea>
         </div>
      </fieldset>
   </form>
   <script type="text/javascript">Behaviour.apply();ScrollLinks.start();</script> 
</div>
<?php
                    return true;
                    break;

                case 'external_plugin':
                    if ($eventData != 'previewcomment') {
                        return false;
                    }

                    $preview = array('comment' => $_POST['text']);
                    serendipity_plugin_api::hook_event('frontend_display', $preview);
                    echo $preview['comment'];

                    return true;
                    break;

                default:
                    return false;
                    break;
            }
        } else {
            return false;
        }
    }
}

The javascripts and forms might need some tweaking to correspond to s9y textarea names, but I'm sure you'll figure that out.

HTH,
Garvin

MySchizoBuddy · Post by **MySchizoBuddy** » Mon Dec 05, 2005 1:56 pm

garvinhicking wrote: but I'm sure you'll figure that out.

Yes capaton *salutes*

btw what is the policy of including something with MIT license.
once Moo.flex CMS (fully ajax based) is launched it will have MIT license and then the toolbar code will also be in MIT license.

Post by **garvinhicking** » Mon Dec 05, 2005 2:04 pm

I've never heard about MIT license.

But spartacus plugin can be any license you want, so the plugin for commentpreview boxes can be licensed as MIT. You just need to figure out if distribution of bundled MIT programms is allowed at all.

Regards,
Garvin

judebert · Post by **judebert** » Mon Dec 05, 2005 9:43 pm

Ummm... the default license for any plugin, if not specified, is the MIT license.

plugin_api.inc.php:

Code: Select all

    function introspect(&$propbag)
    {
        $propbag->add('copyright', 'MIT License');
        $propbag->add('name'     , get_class($this));

        $this->protected = FALSE; // If set to TRUE, only allows the owner of the plugin to modify its configuration

        return true;
    }

The MIT license is almost as free as you can get -- with the caveat that it does not protect that freedom as the GPL does. Here's a copy, from Open Source Initiative:

The MIT License

Copyright (c) <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

As Garvin says, a plugin can use any license (even a commercial one). The MIT license allows inclusion in anything, anywhere, so long as you include the copyright notice somewhere. So it'll be fine as a s9y plugin.

Markdown toolbar for add comments field

Markdown toolbar for add comments field

Re: Markdown toolbar for add comments field