OpenPNE3 Plugins » opUploadFilePlugin

現象¶

opLikePluginとopUploadFilePluginを同時使用すると，ファイルアップロード用ダイアログが表示されなくなる。
なお，apiを利用してファイルアップロードは可能。

bootstrap参考URL
http://getbootstrap.com/javascript/#modals

原因¶

原因としては，opUploadFilePlugin と opLikePlugin のどちらもが bootstrap-modal.js を呼び出しており，かつ，どちらもが bootstrap-modal.js に用意されているAPIを利用しているため，二重にイベントが登録されている模様。

具体的には，opUploadFilePlugin の apps/pc_frontend/modules/f/templates/_fMenu.php の35行目

    <li><a href="#file-uploadmodal" data-toggle="modal">アップロード</a></li>

上記の data-toggle=modal が bootstrap-modal.js の以下の箇所で，クリックイベントとして登録される。

  $(function () {
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
      var $this = $(this)
        , href = $this.attr('href')
        , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
        , option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

      e.preventDefault()

      $target
        .modal(option)
        .one('hide', function () {
          $this.focus()
        })
    })
  })

opLikePluginを入れている場合，(おそらく)opUploadFilePluginで一度イベント登録されたあと，opLikePluginの読み込みのタイミングで再度イベント登録され(どちらが先に読まれているかは不明)，一つのクリックイベントに対して二度toggle処理される結果として表示されない，という筋になっていそう。

修正方針¶

opUploadFilePlugin, opLikePluginともに，bootstrap-modal.js に用意されたapi(data-toggle="modal")を利用せず，自前でイベント登録する，という方針。

修正箇所¶

apps/pc_frontend/modules/f/templates/_fMenu.php
35:    <li><a href="#file-uploadmodal" data-toggle="modal">アップロード</a></li>