Option to select partial mode (editor) in ACP Settings and Mycodes PHP support

[martec]

Original Thread: http://community.mybb.com/thread-154407.html

Option to select partial mode (editor) in ACP.

[martec]

@Destroy666x

This it would have more chances to be accepted by MyBB team if it is an option in the ACP setting instead of UCP?

[martec]

switched from UCP to ACP settings.
I believe that this way has less resistance for this to be accepted.

[Destroy666x]

Well, I still think thast UCP option would be better as it is personal preference, not sure about partial mode though. If you get more support for this in the topic and will convert the 'source mode' checkbox to a select box with these 3 options:

• WYSIWYG mode
• source mode
• partial mode

I'll merge this too.

[martec]

@Destroy666x

Can not put the three options unfortunately.
Without this only has one option WYSIWYG mode and Source mode. Whit this add option Partial mode and Source mode. Not possible has only one mode in sceditor is combination of two mode (or WYSIWYG mode and Source mode or Partial mode and Source mode).
If i put three options in box... I can not combine WYSIWYG mode with Source mode or Partial mode and Source mode.
I can revert it to the UCP option if desired. I ended up switching to ACP, because I needed to play with it to resolve conflict with another PR that merged.

[Destroy666x]

I see what you mean, I'll check whether it is possible to use all three optionally at the same time.

[martec]

@PaulBender and @Destroy666x
http://community.mybb.com/thread-154407-post-1083608.html#pid1083608
As requested in link above added Mycodes PHP Support and include image and php in partial mode.
I think that complies with all requests of @PaulBender to merged this.
Image of php button used this http://www.iconarchive.com/show/silk-icons-by-famfamfam/page-white-php-icon.html (FamFamFam)

http://i.imgur.com/lrtppgA.png

[Starpaul20]

Works fine for me. If nobody has any other problems, this can be merged.

[Destroy666x]

"Setting this to yes to put clickable code buttons editor in partial mode." -> I don't think this is proper English grammar and there should probably be a short description of this feature. So I'd use "Editor will be in partial mode if this option is set to 'yes'. Several MyCodes, such as [quote] and [img], will be inserted into it as plain text tags.".

Also, you forgot about image width/height. Should be in dropdown like in WYSIWYG mode and inserted as [img=123x123]path[/img] if dimensions are filled.

[martec]

Fixes description of this. Changed to "Editor will be in partial mode if this option is set to 'yes'. Several MyCodes, such as [quote] and [img], will be inserted into it as plain text tags." Thanks Destroy666x

@Destroy666x and @PaulBender

about width/height of image in partial mode... i don´t know if this is possible in partial mode.
because in partial mode, image not loaded. If user put only width and not height how will determine proportional height?

i will put here part of the code of sceditor:

exec: function (caller) {
                var editor  = this,
                    content = _tmpl('image', {
                        url: editor._('URL:'),
                        width: editor._('Width (optional):'),
                        height: editor._('Height (optional):'),
                        insert: editor._('Insert')
                    }, true);

                content.find('.button').click(function (e) {
                    var val    = content.find('#image').val(),
                        width  = content.find('#width').val(),
                        height = content.find('#height').val(),
                        attrs  = '';

                    if(width)
                        attrs += ' width="' + width + '"';
                    if(height)
                        attrs += ' height="' + height + '"';

                    if(val && val !== 'http://')
                        editor.wysiwygEditorInsertHtml('<img' + attrs + ' src="' + val + '" />');

                    editor.closeDropDown(true);
                    e.preventDefault();
                });

                editor.createDropDown(caller, 'insertimage', content);
            },

and other part of the code

        // START_COMMAND: Image
        img: {
            allowsEmpty: true,
            tags: {
                img: {
                    src: null
                }
            },
            allowedChildren: ['#'],
            quoteType: $.sceditor.BBCodeParser.QuoteType.never,
            format: function($element, content) {
                var w, h,
                    attribs   = '',
                    element   = $element[0],
                    style     = function(name) {
                        return element.style ? element.style[name] : null;
                    };

                // check if this is an emoticon image
                if($element.attr('data-sceditor-emoticon'))
                    return content;

                w = $element.attr('width') || style('width');
                h = $element.attr('height') || style('height');

                // only add width and height if one is specified
                if((element.complete && (w || h)) || (w && h))
                    attribs = '=' + $element.width() + 'x' + $element.height();

                return '[img' + attribs + ']' + $element.attr('src') + '[/img]';
            },
            html: function(token, attrs, content) {
                var undef, w, h, parts,
                    attribs = '';

                // handle [img width=340 height=240]url[/img]
                if(attrs.width !== undef)
                    w = attrs.width;
                if(attrs.height !== undef)
                    h = attrs.height;

                // handle [img=340x240]url[/img]
                if(attrs.defaultattr) {
                    parts = attrs.defaultattr.split(/x/i);

                    w = parts[0];
                    h = (parts.length === 2 ? parts[1] : parts[0]);
                }

                if (w !== undef)
                    attribs += ' width="' + escapeEntities(w, true) + '"';
                if (h !== undef)
                    attribs += ' height="' + escapeEntities(h, true) + '"';

                return '<img' + attribs + ' src="' + escapeUriScheme(content) + '" />';
            }
        },

You can see in code above that editor use loaded image to determine size if user put only one value (only width or only height) "w = $element.attr('width') || style('width');" "h = $element.attr('height') || style('height');"

this must be the reason why in source mode too not has text field to put width and height.

Of course i can put width and height but will work only when user put value of width and height, if user put only width value or only height will be ignored. If you do not mind being so, I can add without any problem.

[Destroy666x]

Of course i can put width and height but will work only when user put value of width and height, if user put only width value or only height will be ignored. If you do not mind being so, I can add without any problem.

Yes, that's what I meant. It's better than nothing at least.

[martec]

@Destroy666x
Done.

[Destroy666x]

Last thing to correct - lines 417 and 418 in bbcodes_sceditor.js have weird formatting and lines 229-235 have wrong indent. Then I'll merge it.

[martec]

@Destroy666x
sorry for my mistake...
I think it should now be in compliance.

[Destroy666x]

Ok, merging.

[martec]

@Destroy666x
Thanks very much!