Drupalのテーマ（Bootstrap）インストール後にプログレスバー（progress bar）がうまく表示されない問題と修正

drupal
customization
theme

テーマ（Bootstrap）がDrupalのプログレスバー（progress bar）をサポートしない

  • 背景：Drupal7.56、Bootstrap7.x-3.14
  • Drupalのテーマ（theme）をBootstrapにして、バッチ（例：Views Bulk Operationでの一括処理）を起動すると、プログレスバー（progress bar）の表示がうまくいかない（黒く表示されて、プログレスが表示されない）
    BootstrapがDrupalのプログレスバー（progress bar）を表示しない

原因：テーマ（Bootstrap）のプログレスバー（progress bar）がDrupalのプログレスバーをオーバーライドしない

  • BootstrapとDrupalのプログレスバーがそれぞれのもので、互いに許容していない
    • DrupalのプログレスバーのHTML構成は以下のようで 
      <div id="progress" class="batch-processed">
  <div class="progress" aria-live="polite" id="updateprogress">
    <div class="bar">
      <div class="filled" style="width: 0%;"></div>
    </div>
    <div class="percentage">0%</div>
    <div class="message">ETA: N/A<br>初期化中。<br>&nbsp;</div>
  </div>
</div>
    • BootstrapのHTML構成は以下のようで 
      <div class="progress-wrapper" aria-live="polite">
  <div id="updateprogress" class="progress">
    <div class="progress-bar  progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width: 0%;">
      <div class="percentage sr-only">0%</div>
    </div>
  </div>
  <div class="percentage pull-right">0%</div>
  <div class="message">ETA: N/A<br>初期化中。<br>&nbsp;</div>
</div>
  • Boostrapが有効化してもDrupalのプログレスバーのHTMLをオーバーライドしない
    • DrupalのプログレスバーがAjaxで生成したものなので、HTMLコードがモジュールファイルの含まれています

解決１：テーマ（Bootstrap）のスタイル（style.css）にDrupalのプログレスバーcssを追加する

  • 一番簡単な方法では、テーマ（Bootstrap）のスタイル（style.css）にDrupalのプログレスバーcss定義を追加します（Drupalのプログレスバーのcss： \modules\system\system.theme.css にあります） 
    .progress {
  font-weight: bold;
}
.progress .bar {
  background: #ccc;
  border-color: #666;
  margin: 0 0.2em;
  border-radius: 3px;
}
.progress .filled {
  background: #0072b9 url(../../../../../misc/progress.gif);
}
  • テーマ（Bootstrap）の下で、Drupalのプログレスバーを表示します
  • 長所：何も変更せずに、プログレスバーが表示されるようになる
  • 短所：DrupalのプログレスバーがBootstrapテーマに表示させて、少し違和感があります

解決２：プログレスバーのHTMLおよびJSをBootstrapのプログレスバーコードでオーバーライドします

  • プログレスバーのHTMLとJSの場所を特定します（progressなどのキーワードでソースを検索）
    • 例： \sites\all\modules\background_process\background_batch\js\progress.js
    • プログレスバーのHTMLとプログレス情報更新がこのjsファイルにあります
      BootstrapのプログレスバーのソースでDrupalのオリジナルコードをオーバーライド
  • プログレスバーのHTMLをBootstrapのHTMLコードで書き換えます 
    // オリジナルソースコード（Drupalのプログレスバー）
this.element = $('<div class="progress" aria-live="polite"></div>').attr('id', id);
this.element.html('<div class="bar"><div class="filled"></div></div>' +
                  '<div class="percentage"></div>' +
                  '<div class="message">&nbsp;</div>');
　　　　　　
// 以下のソースで書き換える
// Bootstrapのプログレスバー
    this.element = $('<div class="progress-wrapper" aria-live="polite"></div>');
    this.element.html('<div id ="' + id + '" class="progress">' +
        '<div class="progress-bar  progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
        '<div class="percentage sr-only"></div>' +
        '</div></div>' +
        '</div><div class="percentage pull-right"></div>' +
        '<div class="message">&nbsp;</div>');
  • プログレスの情報を更新するJSロジックをBootstrapのもので書き換える 
    // オリジナルのプログレス情報更新ロジック
Drupal.progressBar.prototype.setProgress = function (percentage, message) {
  if (percentage >= 0 && percentage <= 100) {
    $('div.filled', this.element).css('width', percentage + '%');
    $('div.percentage', this.element).html(percentage + '%');
  }
  $('div.message', this.element).html(message);
  if (this.updateCallback) {
    this.updateCallback(percentage, message, this);
  }
};

// 以下のロジックで書き換え
// Bootstrapのプログレス情報更新ロジック
Drupal.progressBar.prototype.setProgress = function (percentage, message) {
    if (percentage >= 0 && percentage <= 100) {
      $('div.progress-bar', this.element).css('width', percentage + '%');
      $('div.progress-bar', this.element).attr('aria-valuenow', percentage);
      $('div.percentage', this.element).html(percentage + '%');
    }
    $('div.message', this.element).html(message);
    if (this.updateCallback) {
      this.updateCallback(percentage, message, this);
    }
  };
  • 長所：テーマ（Bootstrap）のプログレスバーの利用ができます（見た目は自然的）
  • 短所：モジュールソースコードをオーバーライドする必要があります（次回システムアップグレード時に更新部分がオーバーライドされないように注意する必要があります）