Quick Reply BBCode Buttons (UBBC)

[Chris]

May 5, 2013 22:55:34 GMT -8 tunescool said:

i retried it again a couple times, i put the buttons in order but they just show up random

this is what i meant by not aligned, the first button and the inputs

Perhaps there is some confusion here, when I speak of control groups and the sequence of control groups this is what I mean



As you can see the standard configuration uses four control groups and the plugin allows you to dump that configuration and create your own groups so when you are creating your own groups in the plugin the order in which you create those groups dictate which is first, second, third and so on which in turn controls where the buttons you add to those groups appear. If you're looking to control the order of the buttons within a single group then no that is not a feature and since the image selector on the settings page has no drag and drop reordering feature the order is actually dictated by the order the images were added to the plugin when built. It is however possible to add a new field to the autoform to manually force an order.

I still am not seeing an alignment problem and to me it looks perfectly lined up with the textarea below it the same way the left edge of the Font Face dropdown in the original configuration (image above) is lined up with the left edge of the textarea below it. In any event if you're seeing a half pixel misalignment which is messing with your OCD then use CSS to nudge it
(e.g. .controls .group:first-child {padding-left:2050px;})

[tunescool]

thanks eton, i dont know how you cant see it but i added the css and have it at 1px and its fine now

yea i have the groups in order and they appear in order and i did mean the buttons did not show up in order. i chose justify left first, saved it, and justify center and so on and saved each time but the hr line ends up first and their just not in order

[Peter]

lol @

Proboards changed something* in the matrix regarding smileys leading to deja vu with black cats walking by twice

Chris,

Haven't looked at your plugin yet, however, do you have a way for us to hook into it easily? I was thinking of adding live drawing support for quick replies as well in the future, and thought... someone has already done the hard work for getting the UBBC buttons there, why not hook into it.

[Chris]

May 10, 2013 1:14:23 GMT -8 Peter said:

lol @

Proboards changed something* in the matrix regarding smileys leading to deja vu with black cats walking by twice

Chris,

Haven't looked at your plugin yet, however, do you have a way for us to hook into it easily? I was thinking of adding live drawing support for quick replies as well in the future, and thought... someone has already done the hard work for getting the UBBC buttons there, why not hook into it.

Hi Peter, a few of us were working on a standard simplified way to register your custom buttons with the WYSIWYG editors but with the frequency of pushes especially at the end of the beta period that became an exercise in futility, maybe now after launch we'll get something more stable to build on. For the time being I would suggest using the interface Proboards has already provided, albeit not all that simple, for registering your custom buttons/menus in the WYSIWYG prototype. First generate an identifier for your button making sure it is unique as to not accidentally overwrite/replace the functionality of other buttons unless that is your intent.

jQuery.ui.wysiwyg.prototype
In there you will find the prototypes for the bbcode and preview editors (_bbcodeEditor and _visualEditor respectively) with the control Object, controlGroups Array and commands Object within each of those editors used to determine which buttons will appear for that particular editor.

• controlGroups : this is a multidimensional array of the form
  
  

  controlGroups: [
  			[
  				['fontName','fontSize'],
  				['foreColor','bold','italic','underline','strikethrough','superscript','subscript']
  			],
  			[
  				['justifyLeft','justifyCenter','justifyRight','justifyFull','insertTable','insertUnorderedList','insertHorizontalRule'],
  				['createLink','createEmail','insertImage','insertVideo','insertUserLink','insertCode','insertQuote','insertSmiley']
  			]
  		]

  
  
  As you can see, each button has it own unique identifier and the placement depends on which of the inner arrays you push your identifier which in this case corresponds to the 4 groups I highlighted in an image a couple posts back. The intermediate arrays you see there translates to grouping DIVs to allow for splitting into two rows if the allotted width is exceeded..
  
  
• controls : typically an empty plain js object which gets populated on widget creation. If you add your button here (along with properly adding them to the others) the widget will include it when created or my plugin will include it when creating the simplified bbcode editor for quick reply. It is combined with the standard controls using $.extend so will be preserved (see jQuery.ui.wysiwyg.prototype.controls for a list of standard controls and the structure they use).
  
  
• commands : this holds a reference to your click handler function for that button and is pretty straightforward
  

  
  commands : {
  	fontName : function (editor, command, ui, value) {
  		editor.surroundSelection('font', {
  			face : value
  		}, true);
  	},
  	foreColor : function (editor, command, ui, value) {
  		editor.surroundSelection('font', {
  			color : value
  		}, true);
  	},
  	fontSize : function (editor, command, ui, value) {
  		editor.surroundSelection('font', {
  			size : value
  		}, true);
  	},
  	bold : function (editor, command, ui, value) {
  		var control = this._getControl(command);
  		editor.surroundSelection(control.tag, control.attrs, true);
  	}
  }

  
  
  

One final component is a global variable wysiwyg_buttons which contains the image URLS (inspect it in console on full post page). This one is tricky however since it is created in the same script that instantiates the WYSIWYG which means you will need to hook the create method of the widget and add your image there.

Once things settle down (they are still releasing pushes as we speak) I'll complete the simplified interface that was being discussed and add it to this plugin or better yet this would be an ideal interface for your yootil plugin since its specific intent is to provide a simplified interface which is badly needed here .


The stable version of this plugin (v0.8.5) uses the described method on quick reply page but waits for the buttons to be created on full reply page before intervening (destroy then recreate). The nightly version currently being discussed sticks strictly to prototype leaving it up to WYSIWYG to render and add the functionality to the full reply buttons. The only other plugin I know of that uses the above described method is Vsoundcloud which works with this plugin.

[Peter]

Chris

Thanks for the detailed response.

Am going to probably have a look over the weekend, just so I can see how it all works, and play around to see what solutions I can come up with.

Definitely would be suitable for Yootil.

[Chris]

Peter I have no doubt you already know this but for others who might be reading I should probably mention that this is all valid prior to widget instantiation, once the widget has been created most changes to its prototype would be meaningless, whatever was needed in order to build the widget has already been looked up and used so changes after the fact won't work unless you manually call the various component builders after destroying the originals.

[bigd52]

Chris,  I'm not sure why, but most of the buttons have suddenly went missing on the forum I'm on:





As you can see here, I don't have any buttons checked in the plugin options:





I tried uninstall the plugin, re-downloading, and re-installing the plugin, but still nothing. Any ideas?

[Chris]

I would need a forum link

[bigd52]

May 15, 2013 15:43:39 GMT -8 Chris said:

I would need a forum link

Its a private forum, so you wouldn't be able to view it as a guest. If you tell me what info you need, I can do the best I can to relay it to you.

[Chris]

Well I need to view your source to verify which version you are running then to set breakpoints on likely branches of the code to see if the values that are expected to be there are in fact there and if not trace it back to where it went awry. In addition I need to test the interaction with any other code or template modifications that makes your forum different from a plain vanilla forum for clues there as well.

The fact that I just loaded the three latest versions on a test forum and all worked pretty much rules out a change in a recent push as the cause although not completely rules it out if the push hasn't reached MY test forum yet but has already modified YOUR forum.

[bigd52]

May 15, 2013 15:58:14 GMT -8 Chris said:

Well I need to view your source to verify which version you are running then to set breakpoints on likely branches of the code to see if the values that are expected to be there are in fact there and if not trace it back to where it went awry. In addition I need to test the interaction with any other code or template modifications that makes your forum different from a plain vanilla forum for clues there as well.

The fact that I just loaded the three latest versions on a test forum and all worked pretty much rules out a change in a recent push as the cause although not completely rules it out if the push hasn't reached MY test forum yet but has already modified YOUR forum.

Here's a test forum I have with the plugin installed, and it's doing the same thing: ttfdb.proboards.com/thread/1/plug-test?page=2
All templates are default.

[Chris]

If I artificially force an error in the vspoiler plugin in order to disable it then the buttons all show. Eyeballing the code for that plugin yields no immediate reason except maybe that the code hooks certain internal methods which might have changed with recent Proboard pushes as was the case with the vsoundcloud plugin.
Disable that vspoiler plugin and test.

[bigd52]

May 15, 2013 17:21:33 GMT -8 Chris said:

If I artificially force an error in the vspoiler plugin in order to disable it then the buttons all show. Eyeballing the code for that plugin yields no immediate reason except maybe that the code hooks certain internal methods which might have changed with recent Proboard pushes as was the case with the vsoundcloud plugin.
Disable that vspoiler plugin and test.

That's what it was. I disabled the VSpoiler plugin and all the buttons showed back up. Re-enabled it, and the buttons disappeared again.

Any idea if it's something you can fix? I saw how you were able to correct the vsoundcloud plugin by showing how to edit the code in the plugin section. Do you think you could give it a try with this one?

[Chris]

May 15, 2013 22:45:17 GMT -8 bigd52 said:

Any idea if it's something you can fix? I saw how you were able to correct the vsoundcloud plugin by showing how to edit the code in the plugin section. Do you think you could give it a try with this one?

It is actually the Quick Reply plugin that is at fault here since at some point I stopped checking to see if any buttons added by other plugins were properly registering with the WYSIWYG and started looking for buttons that were simply slapped on at the end (what I called squatters).

To correct this, edit the Quick Reply plugin and find this section in the Javascript component

code:

bbEditor.controls = {
"fontName": {
"title": "Font Name"
},
"foreColor": {
"title": "Font Color"
},
"fontSize": {
"title": "Font Size"
},
"bold": {
"title": "Bold",
"tag": "b"
},
"italic": {
"title": "Italic",
"tag": "i"
},
"underline": {
"title": "Underline",
"tag": "u"
},
"strikethrough": {
"title": "Strike Through",
"tag": "s"
},
"superscript": {
"title": "Superscript",
"tag": "sup"
},
"subscript": {
"title": "Subscript",
"tag": "sub"
},
"removeFormat": {
"title": "Remove Formatting"
},
"justifyLeft": {
"title": "Justify Left",
"tag": "div",
"attrs": {
"align": "left"
}
},
"justifyCenter": {
"title": "Justify Center",
"tag": "div",
"attrs": {
"align": "center"
}
},
"justifyRight": {
"title": "Justify Right",
"tag": "div",
"attrs": {
"align": "right"
}
},
"justifyFull": {
"title": "Justify Full",
"tag": "div",
"attrs": {
"align": "justify"
}
},
"insertTable": {
"title": "Table"
},
"insertUnorderedList": {
"title": "List"
},
"insertHorizontalRule": {
"title": "Horizontal Rule"
},
"createLink": {
"title": "Link"
},
"createEmail": {
"title": "Email"
},
"insertImage": {
"title": "Insert Image"
},
"insertVideo": {
"title": "Insert Video"
},
"insertUserLink": {
"title": "Insert User Link"
},
"insertCode": {
"title": "Insert Code",
"tag": "code"
},
"insertQuote": {
"title": "Insert Quote",
"tag": "quote"
},
"insertSmiley": {
"title": "Insert Smiley"
}
}; 

and change it to

code:

$.extend(bbEditor.controls, wysiwyg_this.controls);

The more advanced nightly build version which can be found at the bottom of the first post in this thread still looks for properly registered buttons

[tunescool]

May 9, 2013 16:57:06 GMT -8 Chris said:

May 5, 2013 22:55:34 GMT -8 tunescool said:

It is however possible to add a new field to the autoform to manually force an order.

could you add this at some time if youre not planning on it. it should be the same thru out the forum anyway