How to make the WebIDE pop-up moveable / draggable and custom sized?

#WebIDE #IDE #popup #size #drag #draggable #moveable #sizeable

Heavily in the WebIDE coding I'd like to use the pop-up for various thins... but so fare I see it super-glue-1+"-bolted down middle in the screen...

Is there any option to pass on opening that would create it moveable?...

and also keeping it alive/sticking around even though when clicking outside of it?

I like this advance closing feature... but sometimes it is detrimental to the task(s) at (my) hand.

At the moment, no... All dialogs are 'modal' - it was part of trying to make the IDE more simple and friendly to new users.

To change it you'd have to modify the 'app.js' file iirc. There's quite a lot on dragging/etc on the net - it should be pretty easy in jQuery witout extra libs.

Sizing I found and it is easy: create a CSS class and hook it to the id. For example:

Dynamic style additions (will move into a .css file when done...):

  // ...until CSS is settled this will go into (a) *.css* file  
  function supplementCSS()  {
    = '<style type="text/css">'
    + '#imageItemList { width:620px; }'
   // ...more style definitions
    + '</style>'
    ;
    $(css).appendTo("head");
  }

Popup code that uses this style:

      Espruino.Core.App.openPopup({
        position: "relative",
        title: "Assign item to clicked image position",
        id: "imageItemList",
        contents: html
      });

@Gordon, what are - if there are - the specific guide lines how to name classes for plug-ins? ...multi level class definitions? ...what are the reserved prefixes?

it was part of trying to make the IDE more simple and friendly to new users.

Well understood and supported.

During testing I found this option:

• add lines to app.js, just before setting data to api (at the end of function openPopup)
  if(options.attachTo){
  var loc = $(options.attachTo).offset();
  $("#" + options.id).css({position:"absolute"}).offset({top:loc.top,left:loc.left});
  }
  
• add an attribute to object to call of openPopup
  Espruino.Core.App.openPopup({
  position: "relative",title:.....,attachTo:"#id of object where popup should be on screen"...})
  

...found the way... jQuery is really really a powerful crowbar!...

To make this - now custom sized - pop-up window moveable to move it out of the way to look at something it covers up, just 'add' draggable to it (id related to code in previous posts):

$("#imageItemList").draggable();

Since jQuery UI plug-in - which implements the .draggable() is already pulled-in into the IDE, it just works.

All pop-ups should be that way... it does not complicate the UI/UX experience, since it keeps the modal mode to strongly 'guide' the user...

@Gordon, what are - if there are - the specific guide lines how to name classes for plug-ins? ...multi level class definitions? ...what are the reserved prefixes?

You mean what CSS classes should be? There aren't any really - I'd just prefix it with the plugin name.

As for plugins, again - not really, as long as the class name matches the filename (without capitalisation). It'd help if it was relatively obvious from the filename what the plugin did though!