Need a way to trigger resetWidth aside from window resize

[sebnitu]

The issue I'm having is that in some instances I'm hiding EpicEditor's container and if the browser get's resized the width of the editor's width gets set to 0. Then when EpicEditor's container gets toggled, the editor's width is still set to 0 and isn't shown until another window resize is triggered.

Or maybe there's another way of doing this? Maybe don't fire the resetWidth function if the editor is hidden?

Or maybe I'm doing this wrong to begin with? Should the editor never be hidden and instead only use the load and unload methods?

Here's a quick video demonstration: http://cl.ly/IC4y

[OscarGodson]

Hmm, this is a good question. I'd have to look into the code and see how hard it'd be to check for a hidden/unhidden state set by something else (like some random bit of JS or CSS).

Until then have you tried using unload to hide it? Unload is supposed to make it so you can hide and show the editor and not lose the state of when it was loaded (like the demo button on the docs site). I believe load should resize it to fit again. Could you try that first? If that works the way you'd expect I probably would just tell developers to hide the editor with unload as that's what the point of it was, but add some more docs about use cases of unload.

[sebnitu]

Yup, that works perfectly. So just hiding the container is definitely not the way to go. Only thing I had to make sure to do is check the state of the editor before calling load or unload to prevent any errors from showing up.

Example:

if (eEditor.eeState.loaded)
    eEditor.unload();

Awesome, thank you :D

[OscarGodson]

Cool, yeah I'll try to get is() done tonight or something maybe. eeState is supposed to be private (it needs an underscore). But once I get #88 done, should be easy, you could do

if (eEditor.is('loaded')) {
    eEditor.unload();
}

[OscarGodson]

Question tho, what errors showed up and why? Doing unload if the editor was unloaded?

[sebnitu]

I got this: Uncaught Error: Editor isn't loaded when I call unload on the editor that is already unloaded, yes. I don't get any errors when calling load on an already loaded editor.

Something else (which I'm sure I'm just doing it wrong) here is how I'm initializing EpicEditor:

var eEditor = new EpicEditor(opts).load().unload();

Not sure if this is how I'm suppose to do it but if I don't load it first, then unload, I get an error later on when I try to load for the first time.

The reason I have to unload is because EpicEditor may not be the initial active editor.

[OscarGodson]

Thanks, this is really helpful. I've been building the editor so much I haven't had a lot of time to actually implement it anywhere for real so I don't know real life issues and use cases.

The error you see is an error I'm throwing myself to notify the developer. It's not actually harmful and wont break anything. I was working on a way to by default hide those unless you want to see them here in #118.

For example:

ee.on('error', function (err) {
  if (err.type == 'not_loaded') {
    // Custom error handler here
  }
});

As for the loading and unloading thing...

If you need to do anything that interacts with the DOM of the iframe, then you need to load it before you can do anything with it. Methods that this would be required are like getElement, preview, edit, and soon fullscreen. Although you have to now, you wont have to have it loaded for stuff that affects the file system like exportFile, importFile, open, remove, etc once #152 is fixed in 0.1.2.

Why do you need to unload it at first? Why can't you wait for the first request to open the editor then do load like:

// the default editor is the "HTML" one lets say...
var eEditor = new EpicEditor(opts);

$('.ee-tab').on('click', function () {
  if (!eEditor.eeState.loaded) {
    eEditor.load();
  }
});

$('.other-tabs').on('click', function () {
  if (eEditor.eeState.loaded) {
    eEditor.unload();
  }
});

[sebnitu]

That's pretty much how I am doing it. The problem is that if it's not initially loaded, I don't have access to eEditor.eeState.loaded and eEditor.eeState.unloaded. I get this: Uncaught TypeError: Cannot read property 'loaded' of undefined.

[OscarGodson]

mm, good point. This will be fixed once I get the is() thing done. I'm done with the fullscreen() shit now so I'll try to get is() done tonight. For just now to fix it you could do, in your JS:

eEditor.eeState.loaded = false;
eEditor.eeState.unloaded = true;
// Now you can use the code above

Basically, just manually set them before using them in the if/elses

[OscarGodson]

@sebnitu I added the is() method. eeState was also changed to _eeState to denote it's the private way to get the state of the editor. Docs are in there also but you can now do if(eEditor.is('loaded')) now.

[sebnitu]

Yes, this works perfectly! Thank you :D