website: big update with samples and vf stuff

docs/samples/icons/font-size.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>font-size</title><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(1.191 6.91)"/><use xlink:href="#b" transform="translate(7.307 3.273)"/><defs><path id="a" d="M1.054 5.09l.37-1.083h1.95l.37 1.084h1.051L2.918 0H1.877L0 5.09h1.054zm1.315-3.852h.06l.67 1.964h-1.4l.671-1.964z"/><path id="b" d="M1.108 8.727l.822-2.335h3.64l.822 2.335H7.5L4.295 0h-1.09L0 8.727h1.108zm2.59-7.346h.103l1.436 4.074H2.263L3.699 1.38z"/></defs></svg>
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.245 12l.37-1.084h1.95L4.935 12h1.052L4.11 6.91H3.068L1.191 12h1.054zM3.56 8.147h.06l.671 1.964H2.89l.671-1.964zM8.415 12l.822-2.335h3.64L13.698 12h1.108l-3.205-8.727h-1.09L7.306 12h1.108zm2.59-7.347h.103l1.436 4.074H9.57l1.436-4.074z" fill="#fff"/></svg>

docs/samples/icons/letter-spacing.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>letter-spacing</title><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(4.307 3.273)"/><use xlink:href="#b" transform="rotate(90 -.5 1.5)"/><use xlink:href="#b" transform="rotate(90 7 9)"/><defs><path id="a" d="M1.108 8.727l.822-2.335h3.64l.822 2.335H7.5L4.295 0h-1.09L0 8.727h1.108zm2.59-7.346h.103l1.436 4.074H2.263L3.699 1.38z"/><path id="b" fill-rule="evenodd" d="M12 1H0V0h12v1z"/></defs></svg>
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#fff"/></svg>

docs/samples/icons/line-height.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.297 12l.762-2.14h3.32L10.14 12h1.015L8.22 4h-1l-2.94 8h1.016zm1.066-3l1.324-3.734h.063L9.074 9h-2.71z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H1V1h14v1zm0 13H1v-1h14v1z" fill="#fff"/></svg>

docs/samples/icons/style.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>style</title><desc>Created using Figma</desc><use xlink:href="#a" transform="rotate(90 -1 2)"/><use xlink:href="#b" transform="rotate(90 1 4)"/><use xlink:href="#c" transform="rotate(90 3.5 6.5)"/><use xlink:href="#d" transform="rotate(90 6.5 9.5)"/><defs><path id="a" fill-rule="evenodd" d="M10 1H0V0h10v1z"/><path id="b" fill-rule="evenodd" d="M10 2H0V0h10v2z"/><path id="c" fill-rule="evenodd" d="M10 3H0V0h10v3z"/><path id="d" fill-rule="evenodd" d="M10 4H0V0h10v4z"/></defs></svg>
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3h1v10H0zm3 0V3h2v10H3zm4 0V3h3v10H7zm5 0V3h4v10h-4z" fill="#fff"/></svg>

docs/samples/index.css

@@ -12,23 +12,23 @@ livesample {
   display: block;
   color: #111;
   outline: none;
-  padding-left: 20px;
+  /*padding-left: 20px;
   border-left: 2px solid transparent;
-  margin-left:-22px;
+  margin-left:-22px;*/
   margin-top: 1em;
   margin-bottom: 1.6em;
 }
 livesample:hover {
   border-left-color: rgb(3, 102, 214);
 }
-livesample:focus {
+/*livesample:focus {
   border-left-color: #eee;
-}
+}*/
 livesample > p {
   margin-top: 0;
 }
 livesample.s1 {
-  padding-left: 16px;
+  /*padding-left: 16px;*/
   letter-spacing: -0.03em;
   font-size: 5em;
   font-weight: 700;
@@ -37,13 +37,13 @@ livesample.s1 {
   margin-bottom: 0.3em;
 }
 livesample.s2 {
-  max-width: 400px;
+  /*max-width: 400px;*/
   font-size: 1em;
 }
 livesample.s3 {
   font-size: 13px;
   letter-spacing: 0.002em;
-  line-height: 18px;
+  line-height: 1.38;
 }
   livesample.s3 b, livesample.s3 strong {
     font-weight:500;

docs/samples/index.html

@@ -24,54 +24,22 @@ endfor
 <link rel="stylesheet" href="index.css?v={{ index_css_v }}">
 <script src="{{url_root}}res/bindings.js?v={{ bindings_js_v }}"></script>
 <script src="{{url_root}}res/graphplot.js?v={{ graphplot_js_v }}"></script>
+{% include ctxedit.html %}
 
 <div class="row"><div>
   <div class="live">
 
-    <div class="controls">
-      <div class="control">
-        <img title="Style" class="icon" src="icons/style.svg">
-        <select data-binding="style">
-          <option value="regular" default>Regular</option>
-          <option value="italic">Italic</option>
-          <option value="medium" default>Medium</option>
-          <option value="medium-italic">Medium Italic</option>
-          <option value="semi-bold" default>Extra Bold</option>
-          <option value="semi-bold-italic">Extra Bold Italic</option>
-          <option value="bold" default>Bold</option>
-          <option value="bold-italic">Bold Italic</option>
-          <option value="extra-bold" default>Extra Bold</option>
-          <option value="extra-bold-italic">Extra Bold Italic</option>
-          <option value="black" default>Black</option>
-          <option value="black-italic">Black Italic</option>
-        </select>
-      </div>
-      <div class="control">
-        <img title="Size" class="icon" src="icons/font-size.svg">
-        <input type="range" min="8" max="100" step="1" data-binding="font-size">
-        <input type="number" min="4" max="400" step="1" data-binding="font-size">
-      </div>
-      <div class="control">
-        <img title="Letter spacing in EM" class="icon" src="icons/letter-spacing.svg">
-        <input type="range" min="-0.05" max="0.06" step="0.001" data-binding="letter-spacing">
-        <input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing">
-      </div>
-      <canvas class="graphplot">Canvas not Supported</canvas>
-      <div class="control info">
-        <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a>
-      </div>
-    </div>
-
-    <livesample contenteditable class="s1">
+    <livesample contenteditable class="s1" data-ctxedit="sample1">
       Fabulous typography encountering spring
     </livesample>
 
-    <livesample contenteditable class="s2">
-      The user interface (UI), in the industrial design field of human-computer
-      interaction, is the space where interactions between humans and machines occur.
+    <livesample contenteditable class="s2" data-ctxedit="sample2">
+      The user interface (UI), in the industrial design field of<br>
+      human-computer interaction, is the space where<br>
+      interactions between humans and machines occur.
     </livesample>
 
-    <livesample contenteditable class="s3 col3">
+    <livesample contenteditable class="s3 col3" data-ctxedit="sample3">
 <p><b>Fire Island Beach</b> is a barrier of sand, stretching for twenty miles
 along the south coast of Long Island, and separating the Great South Bay
 from the Atlantic ocean.
@@ -130,8 +98,7 @@ hills.
 </p>
     </livesample>
     <p class="learn-more">
-      &nbsp;
-      <!-- <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a> -->
+      <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a>
     </p>
   </div>
 
@@ -163,113 +130,6 @@ hills.
 
 <script type="text/javascript">(function(){
 
-
-
-// InterUIDynamicTracking produces tracking in EM for the given font size
-//
-function InterUIDynamicTracking(fontSize, weightClass) {
-  // Note: weightClass is currently unused
-  //
-  var a = -0.016, b = 0.21, c = -0.18;
-  return a + b * Math.pow(Math.E, (c * fontSize))
-}
-
-// InterUIDynamicLineHeight produces the line height for the given font size
-//
-function InterUIDynamicLineHeight(fontSize, weightClass) {
-  var l = 1.4
-  return Math.round(fontSize * l)
-}
-
-
-var bindings = new Bindings()
-var graph = new GraphPlot($('canvas.graphplot'))
-graph.setOrigin(-0.2, 0.8)
-graph.setScale(0.049, 5)
-
-var s2 = $('livesample.s2')
-var samples = $$('livesample')
-
-// filter paste to match style
-samples.forEach(sample => {
-  sample.addEventListener('paste', ev => {
-    ev.preventDefault()
-    let text = ev.clipboardData.getData("text/plain")
-    document.execCommand("insertHTML", false, text)
-  }, {capture:true,passive:false})
-})
-
-function updateWidth() {
-  var fontSize = bindings.value('font-size', 0)
-  var letterSpacing = bindings.value('letter-spacing', 0)
-  var w = fontSize * (letterSpacing + 1) * 25
-  s2.style.maxWidth = Math.round(w) + 'px'
-}
-
-function updateTracking() {
-  var fontSize = bindings.value('font-size', 0)
-  var letterSpacing = InterUIDynamicTracking(fontSize, 400)
-  bindings.setValue('letter-spacing', letterSpacing)
-}
-
-function updateGraph() {
-  graph.clear()
-  var fontSize = bindings.value('font-size', 0)
-  var letterSpacing = bindings.value('letter-spacing')
-  graph.plotf(function(x) {
-    return InterUIDynamicTracking(x, 400)
-  })
-  var graphedFontSize = Math.min(24, fontSize) // clamp to [-inf,24]
-  graph.plotPoints([[graphedFontSize, letterSpacing]], '#000')
-}
-
-bindings.configure('letter-spacing', 0, 'float', function (letterSpacing) {
-  s2.style.letterSpacing = letterSpacing + 'em'
-  updateWidth()
-  updateGraph()
-})
-bindings.setFormatter('letter-spacing', function(v) {
-  return v.toFixed(3)
-})
-
-bindings.configure('font-size', 16, 'float', function(fontSize, prevval) {
-  s2.style.fontSize = fontSize + 'px'
-  updateWidth()
-  updateTracking()
-
-  var lineHeight = InterUIDynamicLineHeight(fontSize, 400)
-  s2.style.lineHeight = lineHeight + 'px'
-})
-
-bindings.configure('style', null, null, function (style) {
-  var cl = s2.classList
-  cl.remove('font-style-regular')
-  cl.remove('font-style-italic')
-  cl.remove('font-style-medium')
-  cl.remove('font-style-medium-italic')
-  cl.remove('font-style-semi-bold')
-  cl.remove('font-style-semi-bold-italic')
-  cl.remove('font-style-bold')
-  cl.remove('font-style-bold-italic')
-  cl.remove('font-style-extra-bold')
-  cl.remove('font-style-extra-bold-italic')
-  cl.remove('font-style-black')
-  cl.remove('font-style-black-italic')
-  cl.add('font-style-' + style)
-})
-
-
-bindings.bindAllInputs('div.live .control input')
-bindings.bindAllInputs('div.live .control select')
-
-// resize canvas when window resizes
-var resizeDebounceTimer = null
-window.addEventListener('resize', function(){
-  clearTimeout(resizeDebounceTimer)
-  resizeDebounceTimer = setTimeout(function(){
-    graph.autosize()
-    updateGraph()
-  }, 500)
-}, {passive:true, capture:false})
+window.ctxedit = new CtxEdit()
 
 })();</script>