Topic Closed
juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

I'm planning to update the Collapsible Wrappers plugin to version 2.0 in the near future.
Version 2 will bring several powerful enhancements to users who utilize complex multi-level wrapper frameworks.


But, before I replace version 1 with version 2 I'd be glad to get some feedback from anyone interested in testing.

New features in version 2.0b1:

  • Custom Labels - change "1 Text" or "3 Wrapper_section" to any name you want. (Doubleclick the label to edit it)
  • Color Tagging - assigning colors helps to visualize section tree and it's branches
  • Doubleclicking the triangle icon expands/collapses not only the current wrapper but the whole branch.
  • Collapsed/Expanded wrapper states will now be stored and persist over editing sessions
  • Typical functional wrappers like .row/.gpRow and .container will show with a dotted color instead of solid
  • Hovering the mouse pointer over a section item in the list will scroll to the page content to the corresponding section

UI Screenshots:

Download CollapsibleWrappers_2_0b1.zip

Installation: Extract the content of the ZIP archive to your /addons direcory.
Goto Plugins->Manage and click "Install" in the "Available Plugins" list.

Important: Before installing version 2.0b1, uninstall version 1!

 

Thanks - any feedback is much appreciated!

Edited: 2 years ago#8031

Josh S.
2K Posts
238K Downloads
16 Themes
18 Plugins

Loving it!

Noticing one thing. I'm having trouble dragging a section into a collapsed wrapper_section

2 years ago#8046

feniweb
297 Posts

Hallo Jürgen

Danke das du so fleissig an gpEasy arbeitest.

Ein Test auf die schnelle hat folgendes ergeben.

Sectionen werden nicht abgespeichert und können nicht ineinander verschoben werden.

Wie steht es mit den Symbolen fallen die weg? Die fand ich sehr gut.

gpEasy 4.5 Standart Template 


Gruss

Edited: 2 years ago#8047

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

I'm having trouble dragging a section into a collapsed wrapper_section

Yes, hmm, would be nice. We could show a tiny little bit of the droppable area in collapsed wrappers, some 8 or 10px or so.
Would you append or prepend a dropped section in the collapsed wrapper?

BTW: there are 2 things I'm not quite happy with the current solution:

  • When sections get copied or deleted, I have to rebuild the list using an awkward setInterval-based monitoring function (eww!)
    This also seems to cause nasty quirks sometimes.
  • Currently the only feasible way to store the editor state/metadata is in data attributes inside the content. Not really evil but let's call it inelegant.

So, if you could imagine to pack this or sth. alike into gpEasy, I'd be more than happy.
Just sayin'.

2 years ago#8052

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Hi Felix ,

Sectionen werden nicht abgespeichert …

Ja das kommt manchmal vor wenn mehrere komplexere Operationen gemacht werden, hmmm, hab die genaue Ursache noch nicht gefunden.
Scheint auch ein bisschen vom Browser abhängig zu sein (leider, sowas mag ich gar nicht).

…und können nicht ineinander verschoben werden.

Wenn du meinst, dass man nichts in zugeklappe Wrapper schieben kann - ja stimmt. Hat Josh auch angemerkt. Wäre gut.
Ansonsten hatte ich das Problem noch nicht. Allerdings muss man die Sections hier wirklich am gepunkteten "Draghandle" anfassen - das Label, der Farbbalken und die Optionssymbole sind schon recht dicht mit sog. "Eventhandlern" vollgepflastert, die mit dem Drag-n-Drop Eventhandling konkurrieren.
Aber lässt sich ggf. noch verbessern.

Ist das Problem bei dir reproduzierbar der immer und wenn ja in welchem Browser?

Wie steht es mit den Symbolen fallen die weg? Die fand ich sehr gut.

Ja, die Idee hab ich vorerst mal stillgelegt. Auf/Zuklappen ist definitv die bessere Mögllichkeit, um Platz zu sparen. Das Problem mit den Symbolen ist auch, dass man für alle Plugins welche machen müsste. Den Pluginentwicklern ist das Herumgepixel kaum zuzumuten und gpEasy hat momentan auch garkeine komfortable Möglichkeit, Icons mit Plugins automatisch zu installieren. Vielleicht kommt das später mal. Ich bin ohne die Icons eigentlich ganz happy.

Danke mal für's erste schnelle Feedback!

2 years ago#8053

feniweb
297 Posts

Hallo Jürgen

 

In der Regel benutze ich die aktuellsten Browser-Versionen. 

Im Chrome und IE11 kann ich so gut wie gar nichts ineinander verschieben. Wenn doch speichert es eben nicht.  Dies besonders wenn noch ein Element in dieser Section ist, dann löscht er die Section aber das Element ist weiterhin vorhanden.

Firefox bei dem gelingt ab und zu das Speichern aber wenn ich dann ein neue Section anlege werden dann beide gelöscht.

 

Interessant ist das die Wrapper_section ->text&image nicht davon betroffen sind, die bleiben in jedem Fall erhalten.

Hoffentlich findest du bald ein gute Lösung.

 

Gruss

Edited: 2 years ago#8054

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Ok, here is 2.0b2:

Download CollapsibleWrappers_2_0b2.zip

UI now looks like this…

Changes from 2.0b1:

  • Collapsed wrappers will now maintain a small drop-zone (.section-drag-area) where next-sublevel sections render as small (ok,… tiny) boxes.
  • These small-boxed sections are still draggable/sortable.
  • Background scrolling to the corresponding content sections will now be triggered by a single click on a list item instead of hovering (was sort of annoying).
  • I tampered a bit with the ui-helper and ui-placeholder classes to generally improve drag'n'drop behavior.

I also got rid of the awkward setTimeout list monitoring in favor of a (slightly less awkward) click-handling when copying/deleting.

Unfortunately saving is still messy after heavy re-sorting/copying/deleting. Frequently saving or rather save+close works better.
I'm still puzzled and wonder if this is caused by my modifications. In fact I believe my mods do not alter the relevant DOM structures - but I'm not quite certain.
This stuff is really hard to debug.

Alltogether, this becomes quite a fiddly interlock of JS and CSS.

Please test and share thoughts! Thx.

Edited: 2 years ago#8058

Josh S.
2K Posts
238K Downloads
16 Themes
18 Plugins

So, if you could imagine to pack this or sth. alike into gpEasy, I'd be more than happy.

Definitely!

I have the section colors and section labels incorporated.

Section wrapper collapsing isn't saving yet but otherwise it's looking good.

To test it, the latest changes have been pushed to github.

Thanks Juergen!

2 years ago#8102

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Yeah! Thanks for implementing this stuff.
I really didn't feel comfortable with my event-triggered approach messing with critical DOM structures.

One Note: Relabeling currently kills the a.secsort_wrapper_toggle

2 years ago#8105

Josh S.
2K Posts
238K Downloads
16 Themes
18 Plugins

Not a problem, especially when you've already done all the work.

Relabeling is fixed and section wrapper collapsing is finished. Let me know if I missed anything.

Any thoughts on what we should work on next?

2 years ago#8107

feniweb
297 Posts
Hai Josh What to work on next? A proposal to use nested Section wrapper, for more complex element templates.
Edited: 2 years ago#8117

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Oops, I wasn't following the thread.

A proposal to use nested Section wrapper, for more complex element templates.

Definitely!

Although I recently managed to spare a first-level-wrapper using some rather tricky css calculations, multi-level-nested Section Combo presets would be a great addition.
Especially when using Bootstrap, there are still lots of cool stuff already at our fingertips that could be made accessible with multi-level wrappers.

BTW: Bootstrap 3.3.5  comes with some improvements. Worth a try to update it.

 

Any thoughts on what we should work on next?

IMO, Selectable Classes or something alike would qualify for integration. I use it myself a lot for some time now and it does it's job quite nicely.
An additional feature not yet implemented in the plugin could be to offer importing a Selectable CLasses preset (selectable_classes.php?) if a theme provides such a file.

What do you think?

 

 

 

Edited: 2 years ago#8121

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Josh, what do you think is the best way to notify users upgrading to gpEasy 4.6 to uninstall the Collapsible Wrappers plugin?

I've already put a note onto the plugin page and updated Install_Check.php to prevent installation.

Maybe implement sth. like

max_gpeasy_version = 4.5

in Addon.ini?

2 years ago#8124

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Ok, looks as if I found a way to show a convenient Uninstall Notice Admin Box by including the following into GetHead:

if ( version_compare(gpversion, '4.6a1', '>=') ){
  $page->jQueryCode .=
      "\n" . 'if ( window.location.href.indexOf("uninstall&addon=CollapsibleWrappers") == -1 ){'
    . "\n" . '  $gp.AdminBoxC(\'<h2>Plugin Incompatibility!</h2><p>Please '
    . common::Link('Admin_Addons','uninstall Collapsible Wrappers','cmd=uninstall&addon=CollapsibleWrappers')         
    . '<br/>because it is obsolete with gpEasy 4.6 and will cause errors!<br/><br/>Thank you</p>\');'
    . "\n" . '}';
}

Seems to work.

Edited: 2 years ago#8125

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Any thoughts on what we should work on next?

Um, and one big wish. I fear it's kind of tricky ...

When a section is copied it will always be appended to the end of the page.
It would be much more intuitive to insert the copy right after it's source section, and inside the same wrapper if there is one.

 

2 years ago#8146

Josh S.
2K Posts
238K Downloads
16 Themes
18 Plugins

It would be much more intuitive to insert the copy right after it's source section, and inside the same wrapper if there is one.

Makes sense. Here's what I changed to make it work

I've updated Bootstrap to 3.3.5 and I'll take a look at Selectable Classes tomorrow.

2 years ago#8153

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Here's what I changed to make it work

Wow, looks quite simple - does it really account for and maintain the current wrapper structure?
I yet have to test it.

 

Edit: "does it really account for and maintain the current wrapper structure?" Yes it does, I'm sort of impressed :^)

Edited: 2 years ago#8155

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

A remaining little quirk: After relabeling, the option icons stay visible:

 

And a proposal: Hover section's class names in the label title instead of "Organize":

If there are no special classes set, we could hover the original section type.

2 years ago#8156

Josh S.
2K Posts
238K Downloads
16 Themes
18 Plugins

After relabeling, the option icons stay visible

Fixed

Hover section's class names in the label title instead of "Organize"

Makes sense. Should be all set with these two commits.

2 years ago#8161

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects
Yeah, works like a charm.
2 years ago#8162

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): Konzeption, Planung und Erstellung Ihres Internet-Auftritts, Betreuung und Aktualisierung Ihrer Website, Programmierun...

Find out more about our Provider Spotlight

Log In

  Register