Need a way to resize height (and width?) of editor on the fly

[sebnitu]

Here's how I'm currently doing this:

eEditor.on('load', function () {
    editor_markdown.resizable();
});

editor_markdown.bind( "resize", function(event, ui) {
    eEditor.load();
});

editor_markdown is the editors container.

I have to call jQuery UI's resizable method on the wrapper after it's been loaded or else it will override the HTML it puts in it with the iframe. I then have to bind the resize trigger so I can load EpicEditor again so it resizes itself to fit in the newly resized container. But after that it overrides the resizable HTML elements so I can't resize it further.

It would be nice if I had a eEditor.resetHeight() to use, then I could just use it as a callback on resizable resize event.

The only other workaround I can think of is injecting a second element along side the editors container and layer them with equal heights. Then I can use alsoResize them together so when I resize the second element, the editors container also adjusts and then I'd reload the editor like I do above.

Thoughts? Am I coming at this the wrong way?

[OscarGodson]

When I added the resetWidth function awhile ago I originally tried to do it as resetDimensions or something. However, I was having an issue where when you resized the width the height would grow no matter what by a certain amount of pixels. I couldn't figure it out for the life of me so I gave up and ended up just doing resetWidth.

So, this should be easy, but I couldn't figure it out last time. I do it on the initial load with setupIframeStyles but running that same call again increases the height even when the height doesn't change. GRRR. I'll look into it more tho.

I've added it to the 0.1.2 release and see if I can get it in.

[sebnitu]

Sweet, thanks man!

In the mean time, I've got a working solution. Incase anyone else wants to do something similar, what I did is this:

Markup

<div id="epiceditor_wrap">
    <div id="epiceditor_box"> ... EpicEditors Container... </div>
    <div id="epiceditor_resizable"></div>
    <div id="epiceditor_resizable_mask"></div>
</div>

JavaScript

$('#epiceditor_resizable').resizable({
    alsoResize : '#epiceditor_wrap, #epiceditor_box',
    handles : 's'
})

// If we have a previously saved height
if ( '' != ee_height ) {
    ee_box.height( ee_height + 'px' );
    ee_wrap.height( ee_height + 'px' );
}

ee_resize.bind( "resizestart", function(event, ui) {
    ee_box.css({ 'opacity' : '0.5' });
    ee_resize_mask.show().height( ee_box.height() );
});

ee_resize.bind( "resizestop", function(event, ui) {
    // Reload EE so it fits it's container again
    eEditor.load();

    ee_box.css({ 'opacity' : '1' });
    ee_resize_mask.hide().height( '100%' );

    // Save editors height
    setUserSetting('ee_height', ee_wrap.height() );
});

CSS

#epiceditor_wrap {
    position: relative;
    height: 380px;
}
#epiceditor_box {
    position: relative;
    z-index: 2;
    height: 380px;
}
#epiceditor_resizable {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
}
#epiceditor_resizable_mask {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

The reason I have that resize mask div is to cover up EpicEditor while the height is being adjusted. The problem was that if I moused over it while resizing, it would lose focus on the handle.

Video demo: http://cl.ly/IEJZ

[OscarGodson]

That actually looks pretty decent! Thanks for posting that. I'll try to look into making some kind of API call tho too.

[OscarGodson]

P.S. I added color syntaxing to your comment. Reading all that without it was hard ;) If you didn't know you could just do {lang-here} like css. I think you can click edit to see the change.

[sebnitu]

Oh awesome, I didn't know about that! Thanks :D

[techwraith]

@OscarGodson Does this work in EE too?

[OscarGodson]

@techwraith which thing?

[techwraith]

@OscarGodson The ```js thing :)

[OscarGodson]

@techwraith Yes/no. It does output the correct HTML:

<pre><code class="lang-javascript">alert('test')</code></pre>

but we just haven't added the syntax coloring stuff yet. It wouldn't be hard on the developer end tho. Just inject a script tag to the previewer. We want to add this soon tho.

[OscarGodson]

@sebnitu I'm almost done with this ticket finally (funny how newborns slow down pet project progress :P), so if you get a chance, could you try it out? I added a reflow method which will basically resizes the editor insides to fit the container. You can just "reflow" the width and height by passing that as the first param also. Examples:

// You're only changing the width and you only want to resize the width of the editor
$('#epiceditor').css({ width: '100px' });
editor.reflow('width');

// You're only changing the height of the editor
$('#epiceditor').css({ height: '100px' });
editor.reflow('height');

// Or, you're changing both
$('#epiceditor').css({ width: '100px', height: '100px' });
editor.reflow();

To test try out the feature/ticket-160 branch.

Only things left that I know of are:

• 1 bug when you reflow, then go into fullscreen, then close fullscreen, it's sized to how it was at the initial load of the editor
• ADD TESTS!

[OscarGodson]

Oh, and @sebnitu here's a demo: http://jsbin.com/efabek/2/

[OscarGodson]

So, it looks like I've hit a crossroads. This reflow() method is done, and I know why the bug above was happening. It's because on exiting fullscreen i set the width and height of the container element to '', or, the original value in the CSS. The issue is that this wipes out any width or height changes made by JS after page load like you're trying to do.

If i remove the lines where I reset the width and height on exiting fullscreen than the editor can't automatically be fluid width because when you exit fullscreen the editor needs to know what size to be again. I can manually set it to the width it was before entering fullscreen (a px value) or let it resize itself (the '' trick). If I set it to a px value it wont be fluid anymore.

Furthermore, there's no way for me to tell the actual, original value of the editor wrapper was: http://stackoverflow.com/questions/12880615/how-to-tell-if-an-element-has-a-fluid-width#12880776

Now, here's the choices:

• Don't implement this and require people to do what you're doing now (unload, resize, reload)
• Require devs to use built in width and height methods to resize the editor all the time.
• Implement this and don't support fluid width and make devs implement it this way:

var editor = new EpicEditor({ container: 'editor-wrapper' }).load();
$(window).on('resize', function () {
  $('#editor-wrapper').css({ width: $(window).width() + 'px' });
  editor.reflow();
});

@sebnitu What are you thoughts? Or, do you have any better solutions or tricks or, better yet, magic? 🎱

[OscarGodson]

Looks like it's possible to get the original CSS value... however... it's extremely unperformant:

var stylesheets = document.styleSheets
  , rules;
for (var s=0; stylesheets.length; s++) {
   rules = stylesheets[s].rules || stylesheets[s].cssRules;
    for (var i=0; rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == '.foo') {
            alert(rule.style.getPropertyValue("width"));
        }
    }
}

Yes... we're literally parsing ALL CSS rules for ALL stylesheets...Also, this isn't 100% accurate depending on how you've nested your @imports.

[OscarGodson]

I'm going to go ahead and write tests for this and put it into develop since it's been about a month. It's not as bad as I initially thought because unless you need to use reflow() you don't need to worry because your editor will stay fluid. And if you need to adjust the height reflow('height') will also keep your editor fluid.

[OscarGodson]

OK @sebnitu this is in develop. Whenever you get time test it out! Tests pass in latest Chrome, Firefox, IE9 and 10.