Merge branch 'main' of https://github.com/aazuspan/eerepr

eerepr/html.py

@@ -31,11 +31,11 @@ def convert_to_html(obj: Any, key=None) -> str:
     elif isinstance(obj, dict):
         return dict_to_html(obj, key)
 
-    key_html = f"<span class='eerepr-key'>{key}:</span>" if key is not None else ""
+    key_html = f"<span class='ee-k'>{key}:</span>" if key is not None else ""
     return (
-        "<li class='eerepr-terminal'>"
+        "<li>"
         f"{key_html}"
-        f"<span class='eerepr-val'>{obj}</span>"
+        f"<span class='ee-v'>{obj}</span>"
         "</li>"
     )
 
@@ -80,9 +80,9 @@ def _make_collapsible_li(header, children) -> str:
     """Package a header and children into a collapsible list element"""
     return (
         "<li>"
-        f"<label class='eerepr-header-closed'>{header}"
-        f"<input type='checkbox' class='eerepr-collapser'></label>"
-        f"<ul class='eerepr-list'>{''.join(children)}</ul>"
+        f"<label class='ee-shut'>{header}"
+        f"<input type='checkbox' class='ee-toggle'></label>"
+        f"<ul>{''.join(children)}</ul>"
         "</li>"
     )
 

eerepr/repr.py

@@ -64,7 +64,7 @@ def _repr_html_(obj: Union[ee.Element, ee.ComputedObject]) -> str:
     return (
         "<div>"
         f"<style>{css}</style>"
-        f"<div class='eerepr'>"
+        f"<div class='ee'>"
         f"<ul>{body}</ul>"
         "</div>"
         f"<script>{js}</script>"

eerepr/static/css/style.css

@@ -1,10 +1,3 @@
-/* 
-This file was modified from the xarray stylesheet, which is licensed under the
-Apache License, Version 2.0 (the "License").
-
-https://github.com/pydata/xarray/blob/main/xarray/static/css/style.css
-*/
-
 :root {
   --font-color-primary: var(--jp-content-font-color0, rgba(0, 0, 0, 1));
   --font-color-secondary: var(--jp-content-font-color2, rgba(0, 0, 0, 0.6));
@@ -27,7 +20,7 @@ body.vscode-dark {
   --background-color-row-odd: #313131;
 }
 
-.eerepr {
+.ee {
   padding: 1em;
   line-height: 1.5em;
   min-width: 300px;
@@ -38,62 +31,61 @@ body.vscode-dark {
   font-family: monospace;
 }
 
-.eerepr li {
+.ee li {
   list-style-type: none;
 }
 
-.eerepr ul {
+.ee ul {
   padding-left: 1.5em !important;
   margin: 0;
 }
 
-/* Prevent indenting on the root node */
-.eerepr > ul {
+.ee > ul {
   padding-left: 0 !important;
 }
 
-.eerepr-header-open,
-.eerepr-header-closed {
+.ee-open,
+.ee-shut {
   color: var(--font-color-secondary);
   cursor: pointer;
   margin: 0;
 }
 
-.eerepr-header-open:hover,
-.eerepr-header-closed:hover {
+.ee-open:hover,
+.ee-shut:hover {
   color: var(--font-color-primary);
 }
 
-.eerepr-key {
+.ee-k {
   color: var(--font-color-accent);
   margin-right: 6px;
 }
 
-.eerepr-val {
+.ee-v {
   color: var(--font-color-primary);
 }
 
-.eerepr-collapser {
+.ee-toggle {
   display: none;
 }
 
-.eerepr-header-closed + .eerepr-list {
+.ee-shut + ul {
   display: none;
 }
 
-.eerepr-header-open + .eerepr-list {
+.ee-open + ul {
   display: block;
 }
 
-.eerepr-header-closed::before {
+.ee-shut::before {
   display: inline-block;
   content: "▼";
   margin-right: 6px;
   transform: rotate(-90deg);
   transition: transform 0.2s;
 }
 
-.eerepr-header-open::before {
+.ee-open::before {
   transform: rotate(0deg);
   display: inline-block;
   content: "▼";

eerepr/static/js/script.js

@@ -1,10 +1,8 @@
 function toggleHeader() {
     const parent = this.parentElement;
-    const open = "eerepr-header-open";
-    const closed = "eerepr-header-closed";
-    parent.className = parent.className === open ? closed : open;
+    parent.className = parent.className === "ee-open" ? "ee-shut" : "ee-open";
 }
 
-for (let c of document.getElementsByClassName("eerepr-collapser")) {
+for (let c of document.getElementsByClassName("ee-toggle")) {
     c.onclick = toggleHeader;
 }