【Rails】画像アップロードボタンのデザインをi18nで言語切り替えしたい！

状況

画像アップロードボタンをi18nで言語切り替えしたい...
と思ったのですがattachment fieldはデフォルトで日本語になっていて
言語の設定を変えたりすることができないようです。
(おそらく、インターネットブライザを英語に変えると英語になるのかも?!
試していないのであくまで予想ですが、言語を切り替えために
ブラウザの言語切り替えなんて非効率すぎますので...w)

こいつはブラウザの言語によって日本語になったり
英語になるようなのですがi18nでの言語切り替えができない！

では、どうすれば...

CSSで被せるデザインを使えばOK

当初は、Javascriptで上を押したら下も押したことになる
Javascriptを書けばいいなどアドバイスをいただきましたが
CSSで解決できることが判明！！

『pointer-events: none』

このコードをcssで使用すれば、上にデザインを被せても
上のデザインは無効にして下をクリックできる！

という強者のコードなんです。

どんな風にコードを書くかについて説明しますね！

具体的なコードの解説

実際に私が作ったボタンのデザインはこれ。

Choose filesは元のattachment fieldの上にかぶさっているCSSになるので
自作したボタンということになります。

通常であれば、attachment fieldのようなボタンの上に
CSSを被せるとしたのボタンを押せなくなってしまうのですが...
poinster noneというcssを書くことで上に被せてもボタンを押せる様になるミラクルw

まずは、コードをどぞ。

examplehtmlcode

      <div class="field">
        <div class="col-sm-12 col-md-8 col-lg-6 px-5 px-sm-0 mx-auto mt-3">
          <label><%= t 'devise.registrations.new.profile_image' %></label>
          <br>
          <div class="attachment_relative">
            <%= f.attachment_field :profile_image, class:"mt-1 attachment_field" %>
            <div class="attachment-absolute"><%= t 'devise.registrations.new.button' %></div>
          </div>
        </div>  
      </div>

examplecsscode

.attachment_relative{
    position:relative;
}    

.attachment-absolute{
    position:absolute;
    width: 135px;
    text-align: center;
    padding: 5px 0;
    pointer-events: none;
    top: 0;
    left: calc(-0.7%);
    background-color: #EEEEEE;
    border-radius:7px;
    // border: 1px solid;
}  

簡単に説明するとposition relativeで大きな囲いをつくり
そこにposition absoluteでボタンのデザインを作っています。

position absoluteのcssにpointer-events: none;をいれることで
下のボタンを押せる様にしているわけなのです！

上の図の右上にある言語切り替えのボタンをi18nで作ったはいいものの
attachment fieldの言語切り替えができない(泣)

となって苦戦したのですが、cssを上から被せてそこにi18nの
文字を書くことによってボタンの言語切り替えを無理やりできました！

まとめ

・refileを導入するとつかえるように　なる、attachment fieldはブラウザの言語によって言語が切り替わる。
・i18nなどの言語切り替えをサイトで行う場合はattachment fieldの言語は切り替わらないのでcssを使う
・pointer-event:noneを使うとデザインを被せつつ、下にあるボタンを押せる様になる。

pointer non eventは下記の記事を参考にしたので、よければみてくださいね＾＾

参考記事：
https://on-ze.com/archives/7174

それでは、次の記事でお会いしましょう！
チャオ♪