[Front-End] 使用x-gif操控gif

前言

x-gif可以使用<x-gif>的標籤來顯示gif檔，透過這個標籤可以動態的調整gif。

Usage

<script>
  if ('registerElement' in document
    && 'createShadowRoot' in HTMLElement.prototype
    && 'import' in document.createElement('link')
    && 'content' in document.createElement('template')) {
    // We're using a browser with native WC support!
  } else {
    document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
  }
</script>
<link rel="import" href="x-gif.html">

github上有了就不贅述，記得import必須透過網路。

Reverse

x-gif沒有reverse選項，因此對程式做一點修改，直接附上修改後的檔案。
x-gif.html

Bug

Safari

Safari並不能顯示x-gif，研究了兩三天也找不到替代套件後終於找到解決辦法了。

首先先到webcomponentsjs，下載後再將這段

document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>)

替換成下載的檔案

document.write('<script src="js\/webcomponents.js"><\/script>');

jQuery Mobile

webcomponents和jQuery Mobile會有衝突，將jquery.mobile-1.4.5.js中的

this.window = $( this.document[0].defaultView || this.document[0].parentWindow );

替換成

this.window = $(window);