sobota 27. května 2017

VueJS 2: píšeme komponentu - zobrazení chemické rovnice

Zadání

Napíšeme si komponentu, která nám zobrazí chemickou rovnici na webové stránce. Použijeme knihovnu Katex a VueJS 2.


Řešení

Název komponenty bude chemula (chemical formula) a bude obsahovat jeden atribut formula. Zobrazí chemickou rovnici pomocí Katexu.

Deklarace komponenty

Vue.component("chemula", {
  replace: true,
  props: {
    formula: {
      type: String,
      default: ""
    }
  },
  data: function(){
    return {
      chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz() +->=",
      numbers: "0123456789",
      upIndex: "^",
      dnIndex: "_",  
      leftBracket: "{",
      rightBracket: "}"
    }
  },
  computed: {
    textToKatex: function(){
      var text, katexStr;
      katexStr = "";
      text = " " + this.formula + "  ";

      for (var i = 1; i < text.length-1; i++){
        if (this.chars.indexOf(text[i]) !== -1){
          if (this.numbers.indexOf(text[i-1]) !== -1)
            katexStr = katexStr + this.rightBracket + text[i];
          else           
            katexStr = katexStr +text[i];
        }
        else 
          if (this.numbers.indexOf(text[i]) !== -1){
            if (this.chars.indexOf(text[i-1]) !== -1)
              katexStr = katexStr + this.dnIndex + this.leftBracket + text[i];
            else 
              katexStr = katexStr + text[i];
          }
      };
      
      katexStr = katexStr.replace(/\s\s+/g, ' ');
      katexStr = katexStr.replace(/->/g, '\\rightarrow ');
      katexStr = katexStr.replace(/=/g, '\\rightarrow ');
      try {
        return katex.renderToString(katexStr, {throwOnError: false});  
      } catch (err) {
        return "" 
      }
    }
  },
  template: '<span v-html="textToKatex"></span>'
});

Do atributu formula vložíme zápis chemické rovnice. Ten se prochází znak po znaku a postupně se přidává do proměnné katexStr i se speciálními znaky (dolní index, složená závorka). Výsledný zápis se do HTML kódu vloží v části template, která zobrazí řetězec v Katexu, získaný v části computed.

Použití v HTML kódu

Do webové stránky vložíme komponentu s rovnicí, např.:
<chemula formula="H2SO4 = H2O + SO3" ></chemula>

Jak to vypadá prakticky si můžete ověřit tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).


Žádné komentáře:

Okomentovat