News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Need help with new Drag and Drop Board Management mod....

Started by dougiefresh, February 18, 2016, 09:59:29 PM

Previous topic - Next topic

dougiefresh

I recently came across ElkArte forum software, which was forked from an early version of SMF 2.1.  It has built-in drag and drop board management, under Admin -> Forum -> Boards.  I figured that since it was BSD 3-clause licensed, and already a fork of SMF, that since ElkArte did it, SMF can too!

So I did most of the work creating the mod from the differences between SMF's and ElkArte's templates, as well as most of the necessary CSS and JS code.  It mostly works (which honestly suprised the hell outta me!).  But I need help, cause certain things aren't right about the mod.

The goal here is to make it work with both SMF 2.0, as well as SMF 2.1 Beta 2.  I plan on submitting it via a GitHub pull request for integration into the code, so I'm asking for all you CSS and JS guru's to please help me out with this!  Non-guru's are also welcome to assist!  Thanks in advance!




First Issue:
Attached Screenshot 1 presents the first set of issue(s).  The sub-board is placed correctly under the category header, however, there is a big space underneath the subboard and the next main board visible under the category.  If I add the following to the CSS file:
#manage_boards ul:nth-child(n+2) {
margin: 0 0 -8px 0;
}

Then you get attached Screenshot 2.  The problem there is with the scrollbars.  I tried adding:
overflow: none;
to the mix, with no change in visible result.  Of course, if the margin is changed, then dragging-and-dropping to make a board a sub-board to another becomes difficult...   :(  Or to the same level as the subboard's parent....




Second Issue
Screenshot 3 displays the notification message that ElkArte displays upon successful movement of a board.  My mod also displays the message, but it is not styled correctly.  I am having much difficulty figuring out how to get the JS to properly style the notification.

There is also another notification message in dialog form that isn't coded correctly and/or styled correctly.  Remember that the code comes from ElkArte and has been modified for our usage....  The notification error dialog pops up occasionally, mainly when I had the validation code in the mix, cause OBVIOUSLY we don't want people messing around the order of our boards unhindered!  But it's been removed for now, making this mod unsafe for a production environment.  However, on a localhost forum or test forum, why not?




Third Issue:
At the end of the second issue, I mentioned validation code.  It needs to be implemented in order to keep unauthorized people from randomly reordering the boards.  This is still a work in progress, and I've got a few ideas on the topic.  But I welcome assistance with this!

Antes

First one looks like not a problem but a need for drag & drop. If you don't give min-height to that ul element, it becomes 0 (hidden) and you can no longer move boards to sub-board position.

Second has a very simple solution :P

Open your drag_drop_boards.js
Code (Find) Select
$(ajax_infobar).attr('class', 'infobox');
Code (Replace) Select
$(ajax_infobar).attr('id', 'ajax_in_progress');

and you don't need this anymore since its handled by SMF itself
$(ajax_infobar).css({'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'z-index': '100'});

Diego Andrés

Nice! Can't wait to test and play around with it this afernoon :P

SMF Tricks - Free & Premium Responsive Themes for SMF.

dougiefresh

#3
Quote from: Antes on February 19, 2016, 02:08:44 AM
Open your drag_drop_boards.js
Code (Find) Select
$(ajax_infobar).attr('class', 'infobox');
Code (Replace) Select
$(ajax_infobar).attr('id', 'ajax_in_progress');

and you don't need this anymore since its handled by SMF itself
$(ajax_infobar).css({'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'z-index': '100'});
That works very nicely!!  Thanks, Antes!!!




In drag_drop_boards.css, I've removed this:
Code (Remove) Select

color: #000;
background-color: #f0f4f7;

and in drag_drop_boards.js, I changed this:
Code (Find) Select
$('body').append('<div id="clone" class="' + oSettings.placeholder + '">' + $helper.html() + '</div>');
to this:
Code (Replace) Select
$('body').append('<div id="clone" class="windowbg2 ' + oSettings.placeholder + '">' + $helper.html() + '</div>');
to give theme independence for colors, using the windowbg2 class as an additional class for the clone element.  It seems that the window background for the manage boards UI is the windowbg class, so this should make nice across the various themes.....




In drag_drop_boards.css, I'm debating on whether to remove the following lines:
Code (Remove?) Select

font-family: "Segoe UI Symbol", "DejaVu Sans", "GNU Unifont";
font-size: 1.286em;

for further theme independence for font sizes, as the defined font may not look right on themes other than the default Curve theme....  If I do that, I probably should also remove this line:
font-size: 1.071em;

EDIT: Edited to show "debating" blah blah blah...  :P

dougiefresh

#4
Quote from: Antes on February 19, 2016, 02:08:44 AM
First one looks like not a problem but a need for drag & drop. If you don't give min-height to that ul element, it becomes 0 (hidden) and you can no longer move boards to sub-board position.
First, I'd like to point out that ElkArte manages to allow drag-and-dropping to both the board and subboard levels in each board....  I would love to manage to duplicate this functionality, preferably with CSS only....  (Yes, I acknowledge that more JS and/or template changes may be required...)

EDIT: Removed last paragraph....  See next post for revised post.... :-(

dougiefresh

#5
I've managed to adjust the CSS so that the boards line up properly, mostly because of the garbage removing the minimum height statement gives me.  I ended up with the attached mod file, which changes the size of the AJAX text and adjusts a few other things in the board list to make things line up correctly...  Also overrides a few things from the admin.css file as well.  I've kept the font specifications in there for now....  Screenshot shows the changes I've made.

One method to dealing with the subboard drop issue might be to use JQuery's hover functions.  I found something on this here.  Maybe on hovering over the main board, the subboard ul element would be given a min-height parameter?  I'm not sure....

I also added a permission check to the XML function, just to make sure the wrong people are not permitted to mess around the order of our boards!

Additionally, I noticed that during my testing that dragging a board from one category to the bottom of another category fails occasionally....  However, if I drag it to above the board I want it to be under, then drag it below, it works.  I'm at a loss to explain that one....

The error dialog boxes still aren't styled so that they show up correctly....  Something to work on....

Wellwisher

It's a sexy piece of work in progress. I just installed it on my test forum, works like you described. Nice work dougiefresh.

dougiefresh

Have you had any times where you couldn't successfully move a board?

Matthew K.

Interesting to see that this is being forked instead of being written from scratch for SMF. It seems like it wouldn't be that huge of a project to manage. Also, I would maybe suggest finding a new icon for the arrows. When you start dragging a board, does it put the border around the block like it does in Elkarte?

Wellwisher

Quote from: dougiefresh on February 22, 2016, 09:15:53 AM
Have you had any times where you couldn't successfully move a board?

I only added a few boards and one sub board to test it out. I was in the process of testing out my mod, I thought, why not?

I was able to move boards apart freely without a glitch. Apart from moving them into sub-boards. Everything seemed fine to me. I tested it quite a few times because it worked like magic.  ;D Are you testing on a fresh install with zero mods apart from your own ofc?

dougiefresh

Quote from: Labradoodle-360 on February 22, 2016, 10:05:46 AM
Interesting to see that this is being forked instead of being written from scratch for SMF. It seems like it wouldn't be that huge of a project to manage.
Maybe not for you, but for me, it was challenging to figure out how the CSS and Javascript work together to produce the effects it does.  I'll be honest with ya: I'm not very good with Javascript, my skills there are pretty basic, and I look forward to trying to make a working mod that will work for everybody.  Plus, I'm kinda bored, not being able to work because there is no work for me at my workplace because of my knee restrictions.  Working on other mods is equally uninteresting at this time....

Quote from: Labradoodle-360 on February 22, 2016, 10:05:46 AM
Also, I would maybe suggest finding a new icon for the arrows.
Yeah, ElkArte's arrow is kinda basic...  Needs a graphical icon to replace that basic icon....

Quote from: Labradoodle-360 on February 22, 2016, 10:05:46 AM
When you start dragging a board, does it put the border around the block like it does in Elkarte?
Right now, I think I missed that one.  But the goal is to make it theme-independant.  I don't know if that's going to work across the board with mods that use JQuery....  :laugh:

Quote from: Wellwisher on February 22, 2016, 04:07:49 PM
Are you testing on a fresh install with zero mods apart from your own ofc?
I only tested it with the Sortable Packages (and Installed Time) and Error Log Counter mods installed, along with a slight change to Subs.php to show the error log counter in the menu bar.  This way, I can uninstall the mods in the order they need to be installed, and can see if any errors are produced....

Matthew K.

Well kudos to you for at least doing it, no matter how.

Wellwisher

@dougiefresh in Elkarte cms can you move boards into sub-boards?

dougiefresh

Quote from: Wellwisher on February 22, 2016, 05:13:44 PM
@dougiefresh in Elkarte cms can you move boards into sub-boards?
Yes, it is possible in ElkArte, but not possible for some unknown reason in this mod.....

Wellwisher

Quote from: dougiefresh on February 22, 2016, 06:07:44 PM
Quote from: Wellwisher on February 22, 2016, 05:13:44 PM
@dougiefresh in Elkarte cms can you move boards into sub-boards?
Yes, it is possible in ElkArte, but not possible for some unknown reason in this mod.....

You've got the same ElkArte .js code right? You haven't chopped any of that and threw it away? All the ElkArte .JS is intact?

dougiefresh

No, I'm just using what I can figure are the the necessary parts of the JS in order to implement the feature.  I may have missed something, but I doubt it, as the feature works.  I'm almost convinced it is either (1) a conflict between the original theme CSS and the new CSS, but I can't isolate it.... OR (2) missing CSS from the ElkArte CSS stuff....

I'm specifically using the elkSortable class (renamed to smfSortable) and the setBoardIds function, since that is all that is apparently called....

Wellwisher

Quote from: dougiefresh on February 22, 2016, 06:47:24 PM
No, I'm just using what I can figure are the the necessary parts of the JS in order to implement the feature.  I may have missed something, but I doubt it, as the feature works.  I'm almost convinced it is a conflict between the original theme CSS and the new CSS, but I can't isolate it....

That's prolly why the sub boards aren't working mate. Put those scripts or link them back into SMF and see if they work. A lot of the times, they will use external .js libs to get functions so that it's lighter on the theme files.

dougiefresh

#17
Quote from: Labradoodle-360 on February 22, 2016, 10:05:46 AM
When you start dragging a board, does it put the border around the block like it does in Elkarte?
Beta 3 fixes this omission.

Quote from: Wellwisher on February 22, 2016, 06:49:17 PM
That's prolly why the sub boards aren't working mate. Put those scripts or link them back into SMF and see if they work. A lot of the times, they will use external .js libs to get functions so that it's lighter on the theme files.
I have and it made no difference to the operation of the mod.

I'd like to point out that if you've read the thread, you would have seen that in the Beta 1 mod, you could drag and drop in order to make a board a subboard.  However, the boards were spaced incorrectly, and it was particularly bad when a board had a suboard, then a board followed.  Antes, in the second post, suggested removing the min-height CSS property, which makes everything else line up without gaps in between the elements.  I did so and published Beta 2.  The problem is with Beta 2 is that drag and drop to a subboard is disabled, due entirely to the CSS modification.

I believe that Beta 3 (released in this post) has this particular bug fixed.  I had to do some CSS work to make the buttons on the right stay lined with each other and same height from each other.  I tried using JQuery's hover function, but it had the side effect of not being able to allow me to drop to the bottom of the category.....

dougiefresh


Advertisement: