javascript - Bootstrap tabs with CodeMirror -

javascript - Bootstrap tabs with CodeMirror -

i have pretty complex page have number of instances of codemirror in hidden tabs within tabs. create more complex remember lastly active tabs.

i've manage half working (http://codepen.io/anon/pen/lheaf) problems sec editor tabs:

its loading sec tabs before main code mirror tabs has been clicked. when click code mirror tab doesn't load editor correctly either, until click twice. i want sec tabs phone call refresh() method if been initiated, main editor. bug duplicating secondary editors (function($) { var maineditor; function initmaincodeeditor() { if (maineditor instanceof codemirror) { maineditor.refresh(); } else { // load main editor var el = document.getelementbyid("codifyme"); maineditor = codemirror.fromtextarea(el, { linenumbers: true }); maineditor.setsize('100%', 50); } } function initsecondarycodeeditor() { var $active = $('#code_mirror_editors > .active > a'); var $sec_tab = $($active.data('target')); codemirror.fromtextarea($sec_tab.find('textarea')[0], { linenumbers: true }); } $(document).ready(function() { // load editors if tab has been clicked $('#maintabs > li > a[data-target="#codemirror"]').on('shown.bs.tab', function(e) { initmaincodeeditor(); }); $('#code_mirror_editors > li > a[data-toggle="tab"]').on('shown.bs.tab', function(e) { initsecondarycodeeditor(); }); // remember tabs var json, tabsstate; $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { tabsstate = localstorage.getitem("tabs-state"); json = json.parse(tabsstate || "{}"); json[$(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id")] = $(e.target).data('target'); localstorage.setitem("tabs-state", json.stringify(json)); }); tabsstate = localstorage.getitem("tabs-state"); json = json.parse(tabsstate || "{}"); $.each(json, function(containerid, target) { homecoming $("#" + containerid + " a[data-target=" + target + "]").tab('show'); }); $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() { var $this = $(this); if (!json[$this.attr("id")]) { homecoming $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show"); } }); }); // doc.ready })(jquery);

the problems:

it might happen create codemirror on element not visible (one of it's parents has display: none). breaks various calculations done codemirror by getting codemirror instance right codemirror container element enables phone call refresh everytime want (by finding .codemirror next textarea) fixed side effect of 2.

see updated version here: http://codepen.io/lloiser/pen/arbkv

you can see changes in codepen looking // --> comments

javascript jquery twitter-bootstrap codemirror