TypeScript snabbdom.thunk函數代碼示例

function userBox(ctrl: Controller) {
  const data = ctrl.getData();
  if (!data.user) return;
  let ratingHtml = data.user.rating;
  if (ctrl.vm.round) {
    let diff = ctrl.vm.round.ratingDiff,
      klass = '';
    if (diff >= 0) {
      diff = '+' + diff;
      if (diff > 0) klass = 'up';
    } else if (diff === 0) diff = '+0';
    else {
      diff = '−' + (-diff);
      klass = 'down';
    }
    ratingHtml += ' <span class="rp ' + klass + '">' + diff + '</span>';
  }
  const hash = ctrl.recentHash();
  return h('div.side_box.rating', [
    h('h2', {
      hook: innerHTML(ctrl.trans('yourPuzzleRatingX', strong(ratingHtml)))
    }),
    h('div', thunk('div.rating_chart.' + hash, ratingChart, [ctrl, hash]))
  ]);
}

export function render(ctrl: AnalyseCtrl): MaybeVNode {

  if (!ctrl.data.analysis || !ctrl.showComputer() || (ctrl.study && ctrl.study.vm.toolTab() !== 'serverEval')) return;

  // don't cache until the analysis is complete!
  const buster = ctrl.data.analysis.partial ? Math.random() : '';
  const cacheKey = '' + buster + !!ctrl.retro;

  return thunk('div.advice_summary', doRender, [ctrl, cacheKey]);
}

export function main(ctrl: StudyCtrl): VNode {

  const current = ctrl.currentChapter(),
  data = ctrl.practice!.data;

  return h('div.side_box.study_box', [
    h('div.title', [
      h('i.practice.icon.' + data.study.id),
      h('div.text', [
        h('h1', data.study.name),
        h('em', data.study.desc)
      ])
    ]),
    h('div.list.chapters', {
      hook: bind('click', e => {
        e.preventDefault();
        const target = e.target as HTMLElement;
        const id = (target.parentNode as HTMLElement).getAttribute('data-id') || target.getAttribute('data-id');
        if (id) ctrl.setChapter(id, true);
        return false;
      })
    }, ctrl.chapters.list().map(function(chapter) {
      const loading = ctrl.vm.loading && chapter.id === ctrl.vm.nextChapterId;
      const active = !ctrl.vm.loading && current && current.id === chapter.id;
      const completion = data.completion[chapter.id] ? 'done' : 'ongoing';
      return [
        h('a.elem.chapter', {
          key: chapter.id,
          attrs: {
            href: data.url + '/' + chapter.id,
            'data-id': chapter.id
          },
          class: { active, loading }
        }, [
          h('span.status.' + completion, {
            attrs: {
              'data-icon': ((loading || active) && completion === 'ongoing') ? 'G' : 'E'
            }
          }),
          h('h3', chapter.name)
        ])
      ];
    }).reduce(function(a, b) { return a.concat(b); }, [])),
    h('div.finally', [
      h('a.back', {
        attrs: {
          'data-icon': 'I',
          href: '/practice',
          title: 'More practice'
        }
      }),
      thunk('select.selector', selector, [data])
    ])
  ]);
}

export function render(ctrl: AnalyseCtrl): MaybeVNode {

  if (!ctrl.data.analysis || !ctrl.showComputer()) return;

  // don't cache until the analysis is complete!
  const firstEval = ctrl.mainline[0].eval;
  const firstKey = firstEval ? firstEval.cp : Math.random();
  const cacheKey = '' + firstKey + !!ctrl.retro;

  return thunk('div.advice_summary', doRender, [ctrl, cacheKey]);
}

export function render(ctrl: AnalyseCtrl): VNode | undefined {

  if (ctrl.studyPractice || ctrl.embed) return;

  if (!ctrl.data.analysis || !ctrl.showComputer() || (ctrl.study && ctrl.study.vm.toolTab() !== 'serverEval'))
    return h('div.analyse__acpl');

  // don't cache until the analysis is complete!
  const buster = ctrl.data.analysis.partial ? Math.random() : '';
  let cacheKey = '' + buster + !!ctrl.retro;
  if (ctrl.study) cacheKey += ctrl.study.data.chapter.id;

  return h('div.analyse__acpl', thunk('div.advice-summary', doRender, [ctrl, cacheKey]));
}

function renderLine(ctrl: Ctrl, line: Line) {

  const textNode = renderText(line.t, ctrl.opts.parseMoves);

  if (line.u === 'lichess') return h('li.system', textNode);

  if (line.c) return h('li', [
    h('span', '[' + line.c + ']'),
    textNode
  ]);

  const userNode = thunk('a', line.u, userLink, [line.u]);

  return h('li', {
  }, ctrl.moderation() ? [
    line.u ? lineAction(line.u) : null,
    userNode,
    textNode
  ] : [userNode, textNode]);
}

export function userBox(ctrl: Controller) {
  const data = ctrl.getData();
  if (!data.user) return;
  let ratingHtml = data.user.rating;
  if (ctrl.vm.round) {
    let diff = ctrl.vm.round.ratingDiff,
      tag = 'bad';
    if (diff) {
      if (diff > 0) {
        diff = '+' + diff;
        tag = 'good';
      }
      else diff = '−' + (-diff);
      ratingHtml += ` <${tag} class="rp">${diff}</${tag}>`;
    }
  }
  const hash = ctrl.recentHash();
  return h('div.puzzle__side__user', [
    h('h2', {
      hook: innerHTML(ctrl.trans('yourPuzzleRatingX', strong(ratingHtml)))
    }),
    h('div', thunk('div.rating_chart.' + hash, ratingChart, [ctrl, hash]))
  ]);
}

export function view(root: StudyCtrl): VNode {
  const chapter = root.tags.getChapter(),
  tagKey = chapter.tags.map(t => t[1]).join(','),
  key = chapter.id + root.data.name + chapter.name + root.data.likes + tagKey + root.vm.mode.write;
  return thunk('div.undertable_inner.' + chapter.id, doRender, [root, key]);
}

export default function(ctrl) {
  if (!ctrl.getData().user) return;
  return thunk('div.puzzle__history', render, [ctrl, ctrl.recentHash()]);
};