PadOptLiveCustomizers.module

<?php

/* PadOptLiveCustomizers (PadOpt submodule)
 * Add live customization of products feature to PadOpt (ProcessWire module)
 *
 * Copyright (C) 2018 Julien Vaubourg <julien@vaubourg.com>
 * Contribute at https://github.com/jvaubourg/processwire-module-padopt
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

include_once(__DIR__ . '/PadOptSubmodule.interface');

class PadOptLiveCustomizers extends WireData implements PadOptSubmodule, Module {

  // Prefix part used in the name of fields used to describe a live customizer
  protected $input_prefix = 'live_';

  // Public path for the directory containing the images to use in the viewport
  // Each live customizer will own its own directory inside (see JS)
  protected $img_path = 'files/padopt_livecustomizers/';

  // Image name of the default image to use in live customizer directories
  protected $img_default = 'default.png';

  // CSS class name for the div around the HTML live customizer
  // (viewport + form)
  protected $class_maindiv = 'padopt_livecustomizer';

  // CSS class name for the viewport
  protected $class_viewport = 'padopt_livecustomizer_viewport';

  // CSS class name for the more nested empty div inside the viewport
  protected $class_spacer = 'padopt_spacer';

  // CSS class name for the spinner, nested inside the viewport
  protected $class_spinner = 'padopt_spinner';

  // Prefix of the input field ids
  protected $id_prefix = 'padoptlc_';

  // Viewport infos
  protected $viewport_width;
  protected $viewport_height;

  // Link to the PadOpt module
  protected $padopt;

  // Log lines prefix
  protected $log_prefix = 'LiveCustomizers: ';

  public static function getModuleInfo() {
    return array(
      'title' => 'PadLoper Client Live Customizers',
      'version' => 1,
      'summary' => 'Add client graphical customizers to change Padloper product options, with a live rendering',
      'icon' => 'cubes',
      'href' => 'https://github.com/jvaubourg/processwire-module-padopt',
      'author' => 'Julien Vaubourg',
      'singular' => true,
      'autoload' => true,
      'requires' => 'PadOpt',
    );
  }

  public function init() {

    // PadOpt submodule registering
    $this->padopt = $this->modules->get('PadOpt');
    $this->padopt->registerSubmodule($this);

    $this->addHookAfter('Page::render', $this, 'addScriptsAndStyles');
  }


  /***********/
  /** HOOKS **/
  /***********/

  /**
   * Add some JS and css in the header of every page containing an HTML form
   * for choosing product options
   * Act before Page::render
   */
  public function addScriptsAndStyles($event) {
    $page = $event->object;
    $module_url = $this->config->urls->siteModules . basename(__DIR__);

    // Only on PadOpt product pages
    if($this->padopt->isPadoptProductPage($page)) {
      $scripts = <<<EOT
        <script>
          const padoptlc_inputprefix = '{$this->padopt->getGeneralPrefix()}{$this->input_prefix}';
          const padoptlc_classviewport = '{$this->class_viewport}';
          const padoptlc_classmaindiv = '{$this->class_maindiv}';
          const padoptlc_idprefix = '{$this->id_prefix}';
          const padoptlc_imgurl = '{$this->urls->site}{$this->img_path}';
        </script>
EOT;
      $viewport_ratio = floor($this->viewport_height / $this->viewport_width * 100);

      $styles = <<<EOT
        <style>
          .{$this->class_viewport} {
            background-image: url({$this->urls->site}{$this->img_path}{$this->viewport_name}/{$this->img_default});
          }
          .{$this->class_viewport} .{$this->class_spacer} {
            padding-bottom: {$viewport_ratio}%;
          }
        </style>
EOT;
      $scripts .= "<script type='text/javascript' src='{$module_url}/templates/scripts/padopt_livecustomizers.js'></script>";
      $styles .= "<link rel='stylesheet' type='text/css' href='{$module_url}/templates/styles/padopt_livecustomizers.css' />";

      $event->return = str_replace('</head>', "{$styles}{$scripts}</head>", $event->return);
    }
  }


  /***********************/
  /** PRIVATE FUNCTIONS **/
  /***********************/

  /**
   * Set class parameters relating to the viewport (ie. the HTML area where an
   * image of the product will be progressively updated, depending on the chosen options)
   *
   * @param array $inputfields Group of input fields provided by PadOpt
   */
  private function setViewportInfos($inputfields) {
    $inputfield_name = $inputfields[0]->name;

    // The name of the live customizer is deduced from the prefix used for its
    // fields. PadOpt ensured that all fields use the same prefix
    // (format <general-prefix>_<type-prefix>_<live-customizer-name>_)
    $this->viewport_name = preg_replace("/^{$this->padopt->getGeneralPrefix()}{$this->input_prefix}([a-z0-9]+)_.*$/i", '$1', $inputfield_name);

    if($inputfield_name == $this->viewport_name) {
      $this->logError("Input name syntax error: {$inputfield_name}");
    }

    try {
      // All the images contained in the live customizer directory are supposed to use the same odds
      $viewport_size = getimagesize("../{$this->img_path}/{$this->viewport_name}/{$this->img_default}");

      $this->viewport_width = $viewport_size[0];
      $this->viewport_height = $viewport_size[1];

    } catch(Exception $e) {
      $this->logError("Default image ../{$this->img_path}/{$this->viewport_name}/{$this->img_default} is not readable");

      $this->viewport_width = 0;
      $this->viewport_height = 0;
    }
  }

  /**
   * Error logging
   *
   * @param string $msg
   */
  private function logError($msg) {
    $this->error($msg);
    $this->log->save($this->padopt->getLogName(), "{$this->log_prefix}{$msg}");
  }


  /**********************/
  /** PUBLIC FUNCTIONS **/
  /**********************/

  /**
   * Return the HTML code of the input fields to add to the PadLoper form, in
   * which there is the "Add to cart" button. This function is used by
   * renderFieldset in PadOpt
   */
  public function render($inputfields) {
    $form = $this->modules->get('InputfieldForm');

    $this->setViewportInfos($inputfields);

    // The viewport is composed of as many layers as there are fields
    // The background image of each layer will be updated depending on the
    // client choice for the related option
    $render = "<div class='{$this->class_maindiv}'>";
    $render .= "<div class='{$this->class_viewport}'>";

    foreach($inputfields as $inputfield) {
      $render .= "<div id='{$this->id_prefix}{$inputfield->name}'>";
      $form->add($inputfield);
    }

    $render .= "<div class='{$this->class_spacer}'><div class='{$this->class_spinner}'></div></div>";

    foreach($inputfields as $inputfield) {
      $render .= '</div>';
    }

    $render .= '</div>';
    $render .= preg_replace('/<\/?form[^>]*>/', '', $form->render());
    $render .= '</div>';

    return $render;
  }

  public function getInputPrefix() {
    return $this->input_prefix;
  }
}