NAME

HTML::ForumCode::Cookbook::Recipe2 - HTML, JavaScript and CSS

SYNOPSIS

Include MessagePreview.js

    <script type="text/javascript"
        src="[%c.uri_for('/static/script/MessagePreview.js')%]"></script>

Add CSS style for formatted preview

    .message-preview-overlay {
        border:             1px dashed #ccc;
        text-align:         left;
        padding:            0px;
    }

Using an input button

    <textarea name="text_stuff" id="text_stuff_entry" cols="45" rows="5"></textarea>
    <input type="button"
        id="text_preview_button"
        value="Preview Message"
        accesskey="P"
        name="post_reply"
        class="input_button"
    />

    <!-- message preview majick -->
    <script type="text/javascript">
        var MessagePreview = new ForumMessagePreview();

        MessagePreview.config.label_preview = 'Preview Message';
        MessagePreview.config.label_edit    = 'Edit Message';
        MessagePreview.config.icon_preview  = '/static/images/icons/layout_content.png';
        MessagePreview.config.icon_edit     = '/static/images/icons/layout_edit.png';
        MessagePreview.config.post_url      = "[%c.uri_for('/forumcode/preview')%]",
        MessagePreview.config.trigger       = 'text_preview_button';
        MessagePreview.config.user_input    = 'text_stuff_entry';

        MessagePreview.init();
    </script>
    <!-- (end) message preview majick -->

Using an icon

    <textarea name="some_text" id="some_text_entry" cols="45" rows="5"></textarea>
    <img id="text_preview_icon"
        src="[%c.uri_for('/static/images/icons/layout_content.png')%]"
        alt="Preview Message"
        title="Preview Message"
        width="16"
        height="16"
    />

    <!-- message preview majick -->
    <script type="text/javascript">
        var MessagePreview = new ForumMessagePreview();

        MessagePreview.config.label_preview = 'Preview Message';
        MessagePreview.config.label_edit    = 'Edit Message';
        MessagePreview.config.icon_preview  = '/static/images/icons/layout_content.png';
        MessagePreview.config.icon_edit     = '/static/images/icons/layout_edit.png';
        MessagePreview.config.post_url      = "[%c.uri_for('/forumcode/preview')%]",
        MessagePreview.config.trigger       = 'text_preview_icon';
        MessagePreview.config.user_input    = 'some_text_entry';

        MessagePreview.init();
    </script>
    <!-- (end) message preview majick -->

DESCRIPTION

This recipe provides the HTML, JavaScript and CSS markup required to implement a message preview text area on a page.

MessagePreview.js will be required to perform the preview actions. This script requires YUI.

MessagePreview.js

Until a more sensible solution can be arrived at MessagePreview.js can be found in the examples directory of this distribution.

AUTHOR

Chisel Wright <chiselwright@users.berlios.de>

LICENSE

This library is free software, you can redistribute it and/or modify it under the same terms as Perl itself.