What is on Your Mind?

Hey,

I wrote some new jQuery UI code which makes, for example, the "Quick Reply Editor" draggable and it works very cool. jQuery UI also changes the tooltip mouseovers and they are fine.

But, when I add the JS lib do make all this magic happen, it breaks the JS for the Smile Box and the Color Picker in the same "Quick Reply Editor".

Personally, I do not need or really want a "Smilie Box" and prefer to use the full features of jQuery UI, especially drag and drop.

So, I think I will not yet enable jQuery UI and the draggable features, especially in the "Quick Reply Editor" because it breaks the Color Picker.

Update:

I have set up "draggable" for three areas. This is experimental but it works for these three areas:

Because it is experimental, you will need to use web dev tools to set the boolean as follows:

This will enable the jQuery UI draggable (and resizable) feature for the three areas above and at the same time, hide the smilie and color picker in the Quick Reply Editor.

Of course, setting the draggable var to no will reverse the change and draggable will be disabled and the buttons in QRE will return on reload.

Here is some example jQuery code that makes this happen in showthread:

Code:

$(function() {
if(localStorage.getItem('draggable') == 'yes')
{
 $("#neo-quickreply-wrapper").css({"overflow":"hidden"}).resizable();
 $("#neo-quickreply-wrapper").draggable({"cursor":"pointer"});
 $("#{$editorid}_popup_smilie, #{$editorid}_popup_smilie_seperator").hide();
}
else{
$("#{$editorid}_popup_smilie, #{$editorid}_popup_smilie_seperator").show();
localStorage.setItem('draggable','no');
}
});

There is no need to hide any broken buttons on the stats page or the advanced editor page, so at code is even more simple. For example, for the advanced editor, it is only:

Code:

$(function() {
if(localStorage.getItem('draggable') == 'yes')
{
document.cookie = "draggable=" + 'yes';
 $("#draggable-stats").css({"overflow-x":"auto","overflow-y":"hidden"}).resizable();
 $("#draggable-stats").draggable({"cursor":"pointer"});
}
else{
 $("#draggable-stats").css({"overflow-x":"auto","overflow-y":"hidden"});
localStorage.setItem('draggable','no');
};

It's experimental, so I have not created any easy button on the editors to toggle this on and off yet, but if anyone likes this feature and needs a toggle switch, let me know.

Or, if there are any other areas of the forums you want to make draggable and resizable, let me know in this thread.

An uncommon and shining example of something Microsoft did right is the old Windows taskbar: It can be rearranged and resized if you want, but has a lock feature to prevent it happening by accident. What it lacks is a reset feature to un-ruin it when this inevitably happens anyway.

If this is made default, it ought to have lock and reset features in addition to disable.

If you reload the page it goes back to the standard position as the position is not persistent.

Having said that ... its not easy to move it "by accident" based on my testing.

Hmm... I don't see any real benefit for having sections of the web site draggable using jQuery-UI except, perhaps, for the ability to drag the Quick Reply Editor (QRE) when composing a reply. Not sure if this "minor goodness" has much value compared to the added overhead of adding the relatively sizable jQuery-UI Javascript library. Of course, this is more code to maintain and another JS library to maintain.

I doubt anyone here will use "draggable" in any useful way. Will let this experiment run for a bit longer but I may turn it off sooner than later.

Better, I think, to add some VueJS - Bootstrap apps or components to the site.

Of some minor interest to note is that the jQuery-UI libs currently override the site's Bootstrap tooltips. These tooltips look good in some places and not so good in others, and also I'm having some trouble controlling the tooltip format (for example, getting rid of the shadow box) in the Advanced Stats. So, I'm not a huge fan of these jQuery-UI tooltips. This is another reason to remove the jQuery-UI libs from the site, sooner than later.

At this point in time, jQuery-UI seems more value-subtracted than value-added compared to other JS libs and frameworks.

Update: Well, at the speed of technology in 2019, I have decided to remove (comment out for now) jQuery-UI from the site and disable all draggable code. The jQuery-UI tooltips are annoying and there seems to be no real use-case for draggable areas of the site.

Onwards and upwards to the next web dev experiment.

I may rewrite the smilies and color pickers in the editor to use some kind of modal component from Bootstrap.

Modal . Bootstrap

But first, I may change all the error messages on the site to use these Bootstrap modals since the current error messages using the legacy vB "standard error" system is nothing short of terrible, LOL

Before diving into the modals, I need to also look at modals in VueJS.

Modal Component - Vue.js

On the surface, I like the Bootstrap modals better than the VueJS modals; but will know more after implementing them.