Giters

intercellular / cell

A self-driving web app framework

Home Page:https://www.celljs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Styling the html element

idkjs opened this issue · comments

commented

How do you style the html element at the top of your file in the celljs context? In example below, I added a background-color class to the the top html tag.

Thanks.

<!DOCTYPE html>
<html class="background-color: black" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title> </title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.celljs.org/cell.js"></script>
    <link rel="stylesheet" href="https:/unpkg.com/tachyons/css/tachyons.min.css">
</head>
commented

If I understand your question correctly, this is not something that you'd want to do with cell. Rather I don't think there's a good case for mutating the html tag ever, maybe the body element.

Using an example provided elsewhere by the author, cell will inject into the element with the id we specify. However it will blow away the DOM at and below where it's injected. So if you run this snippet below you'll rewrite the whole DOM.

<html id="viz">
<script src="https://rawgit.com/intercellular/cell/plan/cell.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<body></body>
<script>
var gene = {
  _sampleSVG: null,
  id: "viz",
  $cell: true,
  _r: 40,
  _cx: 50,
  _cy: 50,
  _width: 100,
  _height: 100,
  _color: 'red',
	$init: function(){
    var self = this;
    this._sampleSVG = d3.select(this)
      .append("svg")
      .attr("width", this._width)
      .attr("height", this._height);  
    this._sampleSVG.append("circle")
      .style("stroke", "gray")
      .style("fill", "white")
      .attr("r", this._r)
      .attr("cx", this._cx)
      .attr("cy", this._cy)
      .on("mouseover", function(){d3.select(this).style("fill", self._color);})
      .on("mouseout", function(){d3.select(this).style("fill", "white");});  
  }
};
</script>

</html>

But if you want to inject on the body element you can set the style attributes there. If you want to set the style on the html tag, use the DOM api to do it.

commented

Thought I would point it out because the docs say that the API matches the DOM 1-to-1 so I figured I was missing how to correctly access this element. Thank you.