pb.dialog help

[Lynx]

I must be an idiot, because I'm not grasping how I can do what I want to do with the dialog box.

I'd like to make a dialog box with 2 fields, an area for the result (still inside the box, most likely under the 2nd field), a Submit button(to start the search) and a Close button (next to and to the right of the Submit button).

The 2 fields are where someone can type in some text. However, if they start typing in Field 1, Field 2 goes grey and doesn't accept anything. Likewise, if they start typing in Field 2, Field 1 goes grey and doesn't accept anything. Basically, both fields are starting out as equaling "" (empty string). As soon as one field !="", then the other field goes grey and you can't type in it (much like how you can't type in the quick reply box in the Advert board until an hour has passed - except mine would just see if either field !="" to grey out the other field).

The UI would pretty much be an autoform with 2 fields. If text is typed in Field 1 of the dialog box and clicks submit, it then checks all of the Field 1 entries from the UI for a match and places it's matching Field 2 in the Results space if found, or a Match not Found if no match is found.

Is this even doable?

Thanks!

[Former Member]

what r u making msg ?

a plugin ?

edit: im not asking to be able to answer ur question btw, just curious thats all. 

[Lynx]

Yes, @joecool111, I'm trying to make another plugin:

codesndesigns.boards.net/thread/20/rp-translator

[Chris]

In this case the pb.window.dialog API doesn't offer any advantage over the native jQuery dialog widget so here is something that uses the native implementation which allows you to access the dialog element prior to packaging it as a dialog. This way event handlers can be bound prior to DOM insertion (binding after insertion some cases can be too late) :

function setupSearch() {
var template = '<div id="my-search-dialog" style=""><form id="my-form">'
+ '<div class="field1 lookup micro-profile"><label for="input_field1" class="lookup-label">lookup via blah1:</label><input name="field1" id="input_field1" placeholder="search..." style="float-right"></div>'
+ '<div class="field2 lookup micro-profile float-right"><label for="input_field2" class="lookup-label">lookup via blah2:</label><input name="field2" id="input_field2" placeholder="search..." style="float-right"></div>'
+ '<div class="results lookup miniprofile" style="width:458px"><label for="textarea_results" class="cal-preview-panel">results</label><textarea readonly name="results" id="textarea_results" rows="5" style="width:96%"></textarea></div>'
+ '</form></div>',
$dlgElement = $(template), //turn the html into an element
$form = $dlgElement.find('form'), //save reference to the form for quick access
$inputs = $dlgElement.find('#input_field1, #input_field2'); //save reference to the typing fields for quick access

var errptr = 0,
errormessages =[
"Please type something before searching",
"Please remember to type something before searching",
"Please consider typing something before initiating a search",
"Did you remember to type a search term first?",
"Is there a problem here? What happened to the search term?!",
"OMG! You didn't just do this again! I CANNOT search unless you provide a search term!",
"Why are you being an @#$&*)&^ ? Type something FIRST!!!!",
"Look buddy, I'm in no mood for games, type something BEFORE SEARCHING!",
"How many times do I have to say this!!? TYPE A #$%^&*@ SEARCH TERM FIRST!!!",
"Is your keyboard broken perhaps? Press ALT + F4 to test it :)"
]

/* "HE IS THE ONE!" : make input usage mutually exclusive (there can be only one) */
$inputs.on('keyup mouseup', function () {
// only disable if there's an actual value
//(e.g. backspacing to clear what was typed will re-enable the other input)
if (this.value.length) {
$inputs.not(this).attr('disabled', 'disabled').attr("placeholder", "");
} else {
$inputs.not(this).removeAttr('disabled').attr("placeholder", "search...");
}
})

$dlgElement.dialog({
title : 'Search for blah blah blah',
autoOpen : false, //"WAIT FOR IT": do not open right away, wait for the designated link to be clicked
width: '470px',
buttons : [{
text : 'Lookup',
id: 'lookup-button',
click : function (event, ui) {
var val = $inputs.filter(':enabled').val();
if (val.length) {
$( '#textarea_results' ).append( 'seaching..."'+val+'"\n' ); //using append instead of val to simulate a log

/* CODE FOR LOOKING UP AND SHOWING STUFF GOES HERE */

}else if( $inputs.eq(0).val() == "" && $inputs.eq(1).val() == "" ){
if( errptr >= errormessages.length) errptr = 0;
pb.window.error( errormessages[errptr++] );
}

/* enable any disabled inputs and reset to default state after results (or error) has been shown */
$inputs.removeAttr('disabled').val("").attr("placeholder", "search...")
}
}, {
text : 'Close',
id: 'close-button',
click : function (event, ui) {
$(this).dialog('close')
}
}
]
})

/* Set a link on the page that will open the dialog when clicked (using search in navigation for this example) */
$('header a[href^="/search"]').click(function (event) {
/* "YOU SHALL NOT PASS":
suppress the action this click usually performs, in this
case we are rerouting the link that normally takes us to
the proboards search page so it opens our dialog instead
(JUST AN EXAMPLE!!)
*/
event.preventDefault();
event.stopImmediatePropagation();
//open sesame
$dlgElement.dialog('open');
})
}

Note that I used the micro-profile and miniprofile classes in the template to adopt the CSS attributed to those elements but this is not good practice since it could fool other codes into thinking this is a miniprofile and cause them to crash when they try to process yet another miniprofile.

SPOILER: Click to show

[Lynx]

You are awesome, Chris! Will you be my mentor?

This is absolutely amazing! Of course, it'll probably take me awhile to fully understand how this code works - but it looks like an awesome learning tool! I've noticed that you used lookup with the mini- and micro-profiles. Using lookup won't work if the plugin has CSS in the builder, will it (so it can have it's own CSS classes for formatting)?

I was also thinking of having a button created on a posting (create thread / full reply) page, using something like:

{if (pb.data('route').name == "new_thread" || pb.data('route').name == "new_post")

Okay, I was going to try and put a button here and have something like: $.find('.group .ui-helper-clearfix > ul > li > .button-insertEmbed').insertAfter but not sure how I would code that. Basically, I'm trying to insert the button to open the dialog after the Insert Embed button on the UBBC line. I'll have to work on that when my brain's not so fuzzy.

Oh, and Chris? Thank you VERY, VERY much for this! I certainly enjoyed the error messages!

[Boy_Wonder]

This sounds an amazing plugin - I'm interested ni it as well! Do you think it could be used for translating common text speak to its component parts as well?

[Former Member]

Nov 12, 2015 17:23:24 GMT -8 Lynx said:

Yes, @joecool111, I'm trying to make another plugin:

codesndesigns.boards.net/thread/20/rp-translator

wow !! 

i'll be wanting this for all my sites msg. 

great idea


when will it be ready ? 2-3pm this afternoon ?  pm me when you done it pls.  

[Lynx]

Nov 13, 2015 1:22:06 GMT -8 Boy_Wonder said:

This sounds an amazing plugin - I'm interested ni it as well! Do you think it could be used for translating common text speak to its component parts as well?

What do you mean by common text speak? Sorry, not entirely understanding that. If it helps, though, its intent is basically a word translator (as opposed to a phrase translator) - but you determine the 2 "languages" that are used, real or made up. The thing is, each word has to be entered into this dictionary, so to speak, manually via the UI. Phrases could be used, I suppose, but they would have to be an exact match or it won't find a match.

Once I get it done, I'll put out a Beta in a support thread before submitting to the library so people can test it out.

Nov 13, 2015 3:08:03 GMT -8 @joecool111 said:

Nov 12, 2015 17:23:24 GMT -8 Lynx said:

Yes, @joecool111, I'm trying to make another plugin:

codesndesigns.boards.net/thread/20/rp-translator

wow !! 

i'll be wanting this for all my sites msg. 

great idea


when will it be ready ? 2-3pm this afternoon ?  pm me when you done it pls.  

I'm not sure when it'll be done, but hopefully soon. Certainly not today. And the idea actually came to me while working on a new RP forum. All I can say is, watch for a support thread for it when it's done, but I have no ETA, so I can't tell you when that will be precisely.

[Boy_Wonder]

Nov 13, 2015 4:36:18 GMT -8 Lynx said:

Nov 13, 2015 1:22:06 GMT -8 Boy_Wonder said:

This sounds an amazing plugin - I'm interested ni it as well! Do you think it could be used for translating common text speak to its component parts as well?

What do you mean by common text speak? Sorry, not entirely understanding that. If it helps, though, its intent is basically a word translator (as opposed to a phrase translator) - but you determine the 2 "languages" that are used, real or made up. The thing is, each word has to be entered into this dictionary, so to speak, manually via the UI. Phrases could be used, I suppose, but they would have to be an exact match or it won't find a match.

Once I get it done, I'll put out a Beta in a support thread before submitting to the library so people can test it out.

Nov 13, 2015 3:08:03 GMT -8 @joecool111 said:

wow !! 

i'll be wanting this for all my sites msg. 

great idea


when will it be ready ? 2-3pm this afternoon ?  pm me when you done it pls.  

I'm not sure when it'll be done, but hopefully soon. Certainly not today. And the idea actually came to me while working on a new RP forum. All I can say is, watch for a support thread for it when it's done, but I have no ETA, so I can't tell you when that will be precisely.

I mean say things like "lol" and "wtg" etc (wtg - way to go)

[Lynx]

You probably could. Although, used in that fashion, I'd recommend to your users that they use the "native" (i.e.: lol, wtg, etc.) to have its "translation" as the phrase for it - unless they type in the exact match for the phrase (i.e.: type in "laugh out loud" (if that's how it's entered in the UI)) to get the "lol". But, as I said, it would have to be exact and you couldn't include variations, like:

Native          Translation

lol             laugh out loud
lol             laughing out loud

This would, if they entered "lol" into the search box, find the first occurrence (in this case, the "laugh out loud") - it would never see any occurrences beyond it as the first match would stop it. This would mean that the "laughing out loud" would never be found as a translation for lol in the above setup.

Does that help answer your question? (I hope so, still on my first cup of coffee. So, if it doesn't, I apologize)

[Boy_Wonder]

That's perfect for what I want! I just figure it'll help cut down confusion!

[Chris]

Nov 12, 2015 23:35:29 GMT -8 Lynx said:

You are awesome, Chris! Will you be my mentor?

Thanks but I'm no mentor, I am not even a role model, you should be looking to Peter or Virgil for the technically correct way of doing things

Nov 12, 2015 23:35:29 GMT -8 Lynx said:

This is absolutely amazing! Of course, it'll probably take me awhile to fully understand how this code works - but it looks like an awesome learning tool! I've noticed that you used lookup with the mini- and micro-profiles. Using lookup won't work if the plugin has CSS in the builder, will it (so it can have it's own CSS classes for formatting)?

The lookup class was added specifically for that reason but since I was running it from a console and didn't want to go through the trouble of creating a CSS block to go along with it I employed CSS that already existed by default on the forum. I also used more comments than I usually do in an attempt to make things clear but as I said before, explaining stuff is not my forte. For examples of properly commented codes refer to the "technically correct" statement above, it is an absolute joy reading through their codes. When you revisit a code after some time has passed and can't make heads or tails of the thought process that produced that section of code then you realize just how underrated proper commenting really is and if you have to work out someone else's thought process then triply so. If something seems puzzling or has you asking why it was done that way then just point and ask.

Nov 12, 2015 23:35:29 GMT -8 Lynx said:

I was also thinking of having a button created on a posting (create thread / full reply) page, using something like:

{if (pb.data('route').name == "new_thread" || pb.data('route').name == "new_post")

Okay, I was going to try and put a button here and have something like: $.find('.group .ui-helper-clearfix > ul > li > .button-insertEmbed').insertAfter but not sure how I would code that. Basically, I'm trying to insert the button to open the dialog after the Insert Embed button on the UBBC line. I'll have to work on that when my brain's not so fuzzy.

Creating a WYSIWYG button can be tricky since the WYSIWYG loads asynchronously so can have vast differences in load time depending on variables such as what the user already has cached and their connection speed, the WYSIWYG sometimes didn't finish loading until long after $(window).load() event had fired (back when I was on dialup). A more reliable way to know when the WYSIWYG is ready is to listen for the custom event that fires after a widget has created an instance: $(document).on('wysiwygcreate', function(event){/* WYSIWYG is now ready */}). This way ensures it is ready and your code runs only when there is a fully functioning WYSIWYG present on the page (covering all the varieties of route names that go along with it in a single stroke). If you want to discriminate based on route name then you're still free to do so from within your event handler.
Finding the target button and adding your own relative to it would then be routine but keep in mind that it is possible to remove buttons from the controls so that tactic might run into difficulties (the embed button might be MIA), rather than looking for a specific button you may go with the more generic .button:last if your intent is to add your button after the last button and keep in mind that there are two sets of buttons (one for each editor mode/pane).

Nov 12, 2015 23:35:29 GMT -8 Lynx said:

Oh, and Chris? Thank you VERY, VERY much for this! I certainly enjoyed the error messages!

I was in a silly mood when I decided to add that series of increasingly aggressive error messages, I just found it belly-aching hilarious at that moment envisioning a code imitating irritation (mostly because it reminded me so much of Douglas Adam's Marvin the Robot).
AND You are most certainly welcome

[Lynx]

Chris,

Would it be easier, then, to just create a standard HTML button and have it get inserted before the cog? Since that will most likely stay due to it's dropdown containing Mod tools and whatnot, that button would most likely be there on 99.99% of the forums. Since I don't know how many buttons are to the left of the cog, is there still a way to insertBefore the first one. You've got your Quote (most cases) and possibly the Like and there's plugins that add others, so know an exact number doesn't help because that can vary a lot. Is that possible and would that be easier than doing a WYSIWYG button?

I guess I'd like to insert before the first HTML button there if possible. My second choice would be to the left of the cog. I got confused reading that, so thought I'd clarify.

[Chris]

I wasn't trying to dissuade you from doing it as a bbcode button, merely pointing out the pitfalls and showing you ways around them. The post options "cog" menu is also dynamically created assembled but by the menu widget and to a much lesser degree. Unlike the WYSIWYG widget however most of the elements are already there and delivered in the html not just some outline to be filled in.
You do not need to know beforehand what the leftmost button is if you prepend to the parent div.controls or if you wish to target the cog then $('.post-options').siblings('.button').first().

[Lynx]

Actually, I'm liking the cog dropdown addition to be honest. This means that the only other thing I need to figure out is how to set up so the UI asks for Member Groups so the JS allows only those Groups listed to use it. I'm thinking there will have to be an {if} statement, but the Member Groups would most likely be in an array - which would need a for loop to get them? And if the user is not in a Member Group, then the choice doesn't appear in the (cog) dropdown, otherwise it does. OMG - what have I gotten myself into?

The reason for allowing specific Member Groups (all if none listed in the UI) is for the RP forum I'm making - where only certain Member Groups will be able to use it (RP Members, but spread out in different Clans (Groups)). I'll try my hand at outlining this little conundrum tomorrow - brain doesn't work well at 3:30am. I've still got to work out the rest of the code that Peter gave me for the sliding shoutbox too. I've got to stop trying to do too many projects at once. Oy.