Custom Area

/*
  Custom Area
  Created by 7happy7
  CC BY-SA 3.0 
*/
customElements.define('custom-area', class extends HTMLElement {
  constructor() {
    super();
    var value = this.textContent;console.log(value);
    this.textContent = '';
    this.shadow = this.attachShadow({mode:'open'});
 
    var style = document.createElement('style');
    style.textContent = ':host > div{background:#fff;border:1px solid #c3c3c3;box-sizing:border-box;cursor:text;display:inline-block;height:130px;margin:0;overflow:auto;padding:.5em;position:relative;resize:both;transition:border-color .15s;width:100%;}:host > div:focus-within{border-color:#4d90fe;}' + ':host > div > div{display:inline-block;height:100%;position:relative;width:100%;}' + ':host textarea,:host pre{background:transparent;border:none;display:inline-block;font-family:inherit;font-size:1em;font-weight:inherit;height:100%;overflow:scroll;padding:0;overscroll-behavior:none;scrollbar-width:none;margin:0;white-space:pre!important;width:100%;word-break:keep-all!important;-ms-overflow-style:none;}:host textarea::-webkit-scrollbar,:host pre::-webkit-scrollbar{display:none;}' + ':host textarea{border-radius:0;caret-color:#333;color:transparent;outline:none!important;position:relative;resize:none;-webkit-appearance:none;}:host textarea::selection{background:#4d90fe;color:transparent;}' + ':host pre{left:0;position:absolute;pointer-events:none;top:0;}';
    var parent = document.createElement('div');
    var wrap = document.createElement('div');
    this.tarea = document.createElement('textarea');
    this.tarea.setAttribute('wrap', 'off');
    this.tarea.cover = document.createElement('pre');
    this.tarea.deco = function(t){return t;};
 
    this.shadow.appendChild(style);
 
    this._style = document.createElement('style');
 
    this.shadow.appendChild(parent);
    parent.appendChild(wrap);
    wrap.appendChild(this.tarea);
    wrap.appendChild(this.tarea.cover);
    this.tarea.addEventListener('input', function(e){
      e.target.cover.innerHTML = e.target.deco(e.target.value) + '\u200b';
    });
    this.tarea.addEventListener('scroll', function(e){
      e.target.cover.scrollTop = e.target.scrollTop;
      e.target.cover.scrollLeft = e.target.scrollLeft;
    });
 
    var self = this;
    [...self.attributes].filter(function(v){
      return v.localName.match(/^ca\-/)
    }).forEach(function(v){
      var atr = v.localName.replace(/^ca\-/, '');
      if(atr=='value') {
        self.tarea.value = v.value;
      }
      else if(atr=='wrap') {
        return;
      }
      self.tarea.setAttribute(atr, v.value);
    })
    if(value.trim()!=='') self.tarea.value = value;
  }
  highlight(deco, style) {
    this.tarea.deco = deco;
    if(style) {
      this._style.innerHTML = style;
      this.shadow.appendChild(this._style);
    }
    this.tarea.cover.innerHTML = this.tarea.deco(this.tarea.value) + '\u200b';
  }
 
});

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <style>
      body {
        margin: .5em;
        overflow: hidden;
        padding: 0;
      }
      .wrap {
        margin: 0 0 7.5em;
      }
      custom-area {
        display: block;
        font-family: 'Courier New', Courier, monospace;
        font-size: 16px;
        height: auto;
        margin: 2em 1em;
      }
    </style>
    <script nomodule type="text/javascript">
      alert("Do not use IE, the evil browser.");
    </script>
    <script type="module">
      import * as _ from "../custom-area/1";
 
      var ca = document.querySelectorAll('custom-area');
 
      ca[0].highlight(function(t) {
        var r = [{
            regex: '(scp foundation)',
            flag: 'i',
            resolve: '<span style="color:purple">$1</span>'
          },{
            regex: '(scp)',
            flag: 'i',
            resolve: '<span style="color:#b01">$1</span>'
          }
        ];
        return (function _f(_,i) {
          var p = r[i];
          var reg = new RegExp(p.regex, (p.flag||'').replace(/g/g,''));
          var res = p.resolve;
          i++;
          return _.split(reg).map(function(v) {
            if(v.match(reg)) {
              return v.replace(reg,res);
            }
            else if(i < r.length) {
              return _f(v,i);
            }else {
              return v;
            }
          })
        })(t,0).flat(Infinity).join('');
      });
 
      ca[1].highlight(function(t){
          var c = document.createElement('code');
          c.textContent = t;
          hljs.highlightBlock(c);
          return c.innerHTML;
      }, ':host > div{color:#abb2bf;background:#223747}:host textarea{caret-color:#abb2bf}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-link{text-decoration:underline}');
 
      if(window !== window.parent) {//based on C-take's resizing iframe method
        var site = `http://${document.referrer.split("http://")[1].split("/")[0]}/`;
        var _wrap = document.createElement("div");
        document.body.appendChild(_wrap);
        var _old= 0;
        var url = location.href.replace(/^.*\//,'/');
 
        (function _f() {
          var _new = _wrap.getBoundingClientRect().top;
          if(_new !== _old){
            var iframe = document.createElement("iframe");
            var _rand = String(Math.floor(Math.random() * 10000));
            _wrap.innerHTML = '';
            iframe.src = `${site}common--javascript/resize-iframe.html?${_rand}#${_new}${url}`;
            iframe.style.display = "none";
            _wrap.appendChild(iframe);
            _old = _new;
          }
          setTimeout(_f, 250);
        })();
      }
    </script>
  </head>
  <body>
    <div class="wrap">
      <p>/(scp foundation)/i, /(scp)/i</p>
      <custom-area
        ca-spellcheck="false"
        ca-value="scp Scp SCP scp Scp SCP scp Scp SCP spc Scp SCP Foundation"
        ca-placeholder="text"
      ></custom-area>
 
      <p>syntax highlight</p>
      <custom-area
        ca-spellcheck="false"
        ca-placeholder="text"
      >@media (max-width: 767px) {
  pre.test1,
  div[src*="test"] pre {
    color: red;
  }
}
@keyframes anim {
  0%,
  99% {
    color: red;
  }
  100% {
    color: blue;
  }
}</custom-area>
    </div>
  </body>
</html>

page revision: 47, last edited: 07 Sep 2020 04:24

Edit Rate (0) Tags Discuss History Files Print Site tools + Options

The Topiary

yes the bees >:)