CSS Styling JavaScript

‹prev | My Chain | next›

Up tonight, I continue my efforts to port the ICE Code Editor, used extensively in 3D Game Programming for Kids. I was able to break off the full-screen editor and data store yesterday, but something did not quite make it. For starters, the editor seems to be fixed at a very short height and none of the buttons actually worK



The height issue stems from the Editor class in which I explicitly set it:

// Apply all of the necessary styles to the code editor.
Editor.prototype.applyStyles = function() {
  this.el.className += ' ice-editor';

  this.el.style.margin = '0px';
  this.el.style.overflow = 'hidden';
  this.el.style.position = 'relative';
  this.el.style.height = '350px';

  this.editor_el.style.width = '100%';
  this.editor_el.style.height = '350px';
  this.editor_el.style.position = 'absolute';
  this.editor_el.display = 'none';

  this.preview_el.style.width = '100%';
  this.preview_el.style.height = '350px';
  this.preview_el.style.position = 'absolute';
  this.preview_el.style.top = '0';
};

This seems like a lot of CSS work to be doing in JavaScript. When building self-contained components like I am endeavoring to do here, however, I prefer to keep the associated CSS directly in the JavaScript class rather than dealing with a separate CSS file. Alternatively, I could dynamically build CSS, but mucking with the styles works just as well and feels more self-contained.

I end up pulling out most of that CSS into the embedded class ICE.Emebedded and then defining style code specific to the full screen editor in the ICE.Full:

function applyStyles() {
  document.body.style.margin = '0px';
  document.body.style.overflow = 'hidden';

  editor.editor_el.style.position = 'absolute';
  editor.editor_el.style.top = '0';
  editor.editor_el.style.bottom = '0';
  editor.editor_el.style.left = '0';
  editor.editor_el.style.right = '0';
  editor.editor_el.backgroundColor = 'rgba(255,255,255,0.0)';

  editor.preview_el.style.position = 'absolute';
  editor.preview_el.style.top = '0';
  editor.preview_el.style.bottom = '0';
  editor.preview_el.style.left = '0';
  editor.preview_el.style.right = '0';
}

As I do away with the separate stylesheet entirely, more will have to go into this applyStyles() function, but, for now, that does the trick:



The button errors turn out to mostly be due to missing code that I had not yet moved into this class approach. There is still more to be done, but I think (hope) I am getting close.


Day #717