how to move widget snippet/controls in a different area

[aldomarostica]

Hi guys I'm wondering if it's possible to move the snippet/controls of each widget in a specific area for example a sidebar. I dont want to have controls like a tooltip anchored to the element. Any idea?

[jankus]

I cannot clearly understand what you want to achieve but I guess you should play with CSS and move controls where you want them.

[aldomarostica]

Play with css is not enough because controls are hooked to the widget container with some inline css with position absolute ecc and i would to move physically into a sidebar area

[jankus]

Controls are hooked to each widget. Widget brings it's own set of controls. And the whole ImpressPages idea is to have inline editing and controls without extra admin interfaces.

Theoretically you may try to play with JavaScript via jQuery's detach() method to move controls wherever you want. However, this is only a tip of the iceberg to make sure everything works.

[aldomarostica]

Yes you are right about impressPages idea and the idea to move them via jquery detach is not bad but isnt't there a way to work directly on that script which is responsible for positioning so i can move controls straight to the point?

[jankus]

Each widget's content and its controls are encapsulated in the same <div class="ipWidget">. At the moment there is no way to separate those two things. Both parts are printed at the same time during one loop. Which means there's no way to print controls in some other place outside widget scope.

We do have idea to separate those two things in the future. However, this would be only in the next major release.

[aldomarostica]

Ok I understand, anyway I tried your solution via jquery detach. It works but just one thing, I noticed a kind blink when the controls appear in the new area. I think it's due to focus or similar. Do you have an idea about how to rebind it to prevent this behaviour?

[jankus]

I don't know how you implemented it. Therefore, I don't know when, where and how you see that blinking. If you use detach() it means all listeners are kept despite the fact that your DOM element is moved. Everything else is completely your code which I have no way to test or comment on.

[aldomarostica]

Yes you are right anyway i have to clearify a bit because i dont want move the controls encapsuleted in "ipWidget div", but the relative tool controls, i mean tinymce bar for example. I would to handle those events which are responsible to show or hide this controls but it seems everything inside of admin.min.js and I can't read/undesrtand it cause it minimized.

[jankus]

Turn on debug mode (via config.php) and you'll get raw files instead of minified admin.min.js

You can check which files goes to which minified version here https://github.com/impresspages/ImpressPages/blob/master/Plugin/CoreCompiler/Model.php