Animography's Mobilo Text Editor in SVG

animography-s-mobilo-text-editor-in-svg.markdown

Animography's Mobilo Text Editor in SVG

Tap on your keyboard.
My whole #codevember project :)
Because sequels are always better
Animography's Mobilo font chars exported to SVG.
With some extra features:
much much more characters
Virtual keyboard support.
Word wrapping
font size
not monospaced

Please contact them if you're interested in using them
https://animography.net/products/mobilo

Technical stuff:
firefox has a huge performance hit when using any kind of svg filter. Some animations use inverted masks that need a colormatrix filter.
Some animations are in general less performant than others because of the amount of nodes they use and animate.
Some stuff might not work in Edge because well

A Pen by kittons on CodePen.

License.

index.html

<div class="toolbar" id="toolbar">
        <div class="title">Animography - Mobilo Text Editor</div>
    <ul class="characters justification">
        <li class="characters__item characters__item--first left"><button class="characters__item__button"></button></li><!--
        --><li class="characters__item characters__item--middle center"><button class="characters__item__button"></button></li><!--
        --><li class="characters__item characters__item--last right"><button class="characters__item__button"></button></li>
    </ul>
    <ul class="characters sizing">
        <li class="characters__item characters__item--first size1"><button class="characters__item__button"></button></li><!--
        --><li class="characters__item characters__item--middle size2"><button class="characters__item__button"></button></li><!--
        --><li class="characters__item characters__item--last size3"><button class="characters__item__button"></button></li>
    </ul>
    <ul class="characters">
        <li class="characters__item characters__item--color " >
            <input class="characters__item__colorInput color1" type="color" id="color1"/>
        </li><!--
        --><li class="characters__item characters__item--color">
            <input class="characters__item__colorInput color2" type="color" id="color2"/>
        </li><!--
        --><li class="characters__item characters__item--color">
            <input class="characters__item__colorInput color3" type="color" id="color3"/>
        </li>
    </ul>
</div>
<div class="textBox">
        <div id="charsContainer"></div>
        <div class="bm caret" id="caret">|</div>
        <input type="text" class="textHelper">
</div>

script.js

var BASE_URL = 'https://labs.nearpod.com/bodymovin/demo/mobilo_demo/';

    toolbar.init();
    textbox.init();
    animationProvider.init();

    window.onresize = textbox.resize;

scripts

<script src="https://labs.nearpod.com/bodymovin/demo/mobilo_demo/build.js"></script>

style.css

body {
  background-color: #eee;
}

html,
body {
  margin: 0px;
  height: 100%;
  overflow: hidden;
}

.toolbar {
  width: 100%;
  background: #fff;
  padding: 4px 10px;
}

.characters {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}

.characters__item {
  border: 1px solid #333333;
  border-radius: 0;
  display: inline-block;
  width: 25px;
  height: 25px;
  text-align: center;
  background-color: #eee;
}

.characters__item--selected {
  background: #fff;
}

.characters__item--first {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}

.characters__item--last {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

.characters__item--middle {
  border-left-width: 0;
  border-right-width: 0;
}

.characters__item--color {
  border: 0;
  width: 55px;
}

.characters__item__button {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.characters__item__colorInput {
  width: 100%;
  cursor: pointer;
}

.bm {
  background-color: transparent;
  width: 100px;
  height: 120px;
  display: inline-block;
  /*float: left;*/
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  vertical-align: top;
  position: absolute;
  left: 0;
  top: 0;
}

.bm.char {
  pointer-events: none;
}

.bm .hoverer {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
}

.bm .loader {
  width: 50%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.bm svg g {
  pointer-events: auto;
}

.space {
  position: absolute;
  transform: translate3d(0, 0, 0);
  width: 100px;
  height: 120px;
  background-color: rgba(255, 0, 0, 0);
  pointer-events: none;
}

.line-break {
  height: 120px;
  width: 0px;
}

.textBox {
  position: relative;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 56px);
  width: 100%;
}

.caret {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #333333;
  width: 4px;
  margin-left: -2px;
  animation: blink-animation 1.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}

.textHelper {
  position: absolute;
  top: 0;
  left: -100%;
  /*visibility: hidden;*/
  opacity: 0.01;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.title {
  float: right;
  line-height: 2em;
}

styles

<link href="https://labs.nearpod.com/bodymovin/demo/mobilo_demo/styles/bundle.css" rel="stylesheet" />