• #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"}).o­ffset({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!

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

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

Posted by Avatar for allObjects @allObjects

Actions