Template-Plugin-ForumCode

 view release on metacpan or  search on metacpan

examples/MessagePreview.js  view on Meta::CPAN

                obj.previewElId = YU.Dom.generateId();

                obj.user_input.style.visibility     = 'hidden';

                /* create a panel to show the preview in */
                var pWidth          = obj.user_input.clientWidth,
                    pHeight         = obj.user_input.clientHeight,
                    pLeft           = obj.user_input.offsetLeft,
                    pTop            = obj.user_input.offsetTop;

                obj.preview_overlay = new YAHOO.widget.Overlay(
                    obj.previewElId,
                    {
                        context:        [obj.config.user_input, 'tl', 'tl'],
                        visible:        true,
                        width:          obj.user_input.clientWidth  + 'px',
                        height:         obj.user_input.clientHeight + 'px',
                        class:          'message-preview-overlay'
                    }
                );

                obj.preview_overlay.setBody(data.formatted);
                obj.preview_overlay.render(document.body);
                //Dom.get('preview_overlay').style.overflow = 'auto';
                Dom.get(obj.previewElId).style.overflow = 'auto';
                // I'm sure there's a better way to do this!
                Dom.get(obj.previewElId).className = Dom.get(obj.previewElId).className + ' message-preview-overlay';

                // update the button
                obj.setClicker(
                    {
                        icon:  obj.config.icon_edit,
                        label: obj.config.label_edit
                    }
                );

                YU.Event.removeListener( obj.trigger, 'click' );

examples/MessagePreview.js  view on Meta::CPAN

        this.edit = function() {
            // update the button
            this.setClicker(
                {
                    icon:  this.config.icon_preview,
                    label: this.config.label_preview
                }
            );

            this.user_input.style.visibility     = 'visible';
            this.preview_overlay.destroy();

            YU.Event.removeListener( this.trigger, 'click' );
            YU.Event.addListener(
                this.trigger,
                this.config.trigger_evt,
                this.preview,
                this,
                true
            );
        };

lib/HTML/ForumCode/Cookbook.pod  view on Meta::CPAN

Method(s) to add to your own controller to ForumCodify some text and return
the marked up HTML in a JSON response.

This is useful as part of a solution to provide in-page edit-preview toggling
(via YUI).

=item L<HTML::ForumCode::Cookbook::Recipe2> - HTML, JavaScript and CSS

The HTML and JavaScript required for taking a textarea and showing a preview
of the marked up HTML. Also includes sample CSS for the preview overlay.

This is the next step in providing in-page edit-preview toggling.

=back

=head1 AUTHOR

Chisel Wright C<< <chiselwright@users.berlios.de> >>

=head1 LICENSE

lib/HTML/ForumCode/Cookbook/Recipe2.pod  view on Meta::CPAN

=head1 SYNOPSIS

=head2 Include MessagePreview.js

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

=head2 Add CSS style for formatted preview

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

=head2 Using an input button

    <textarea name="text_stuff" id="text_stuff_entry" cols="45" rows="5"></textarea>
    <input type="button"
        id="text_preview_button"