InputfieldImageReference.module

<?php

namespace ProcessWire;
/**
 * Inputfield 'Image Reference' provides a means for selecting a single image from a predefined page and it's children and/or a folder and/or the page being edited.
 * Per field you can set a page to list from.
 *
 * ©2019 Gerhard Sitzmann
 *
 * ProcessWire 3.x
 * Copyright (C) 2010 by Ryan Cramer
 * Licensed under GNU/GPL v2, see LICENSE.TXT
 *
 * http://www.processwire.com
 * http://www.ryancramer.com
 *
 */

class InputfieldImageReference extends Inputfield implements Module
{

    /**
     * holds all pages with images
     *
     * @var Pages
     */
    protected $imagePages;

    /**
     * Return an array of module information
     *
     * @return array
     */
    public static function getModuleInfo()
    {
        return array(
            'title' => 'Image Reference',
            'version' => 212,
            'summary' => __('Inputfield to select a single image from various sources on the site.'),
            'author' => 'Gerhard Sitzmann',
            'href' => '',
            'autoload' => 'template=admin', // 'process=ProcessPageEdit',
            'requires' => array(
                'FieldtypeImageReference',
                'PHP>=7.1.0',
                'ProcessWire>=3.0.120'
            ),
            'permissions' => array(
                'imagereference-folder-upload' => 'Upload images to the defined folder in ImageReference inputfields',
                'imagereference-folder-delete' => 'Delete images from the defined folder in ImageReference inputfields'
            )
        );
    }

    public function init()
    {
        parent::init();
        $this->handleAjaxCalls();
    }

    public function handleAjaxCalls()
    {
        if (!$this->wire('config')->ajax) return;
        $input = $this->wire('input');
        if (!isset($input->{$this->className})) return;
        // render thumbnails for ajax request
        if (isset($input->pageid)) {
            if ($input->folderpath) {
                $folderPath = trim($input->folderpath, '/') . '/';
                $this->set('folderpath', $folderPath);
                $out = $this->getThumbnailsForFolder($folderPath);
            } elseif ($input->imagesfields) {
                $this->set('imagesfields', $input->imagesfields); // populate imagesfields to make required methods work
                $out = $this->getThumbnailsForPage($input->pageid);
            }
            echo $out;
            exit();
        }

        // delete image from folder
        if (isset($input->deleteimage) && isset($input->fieldname)) {
            $this->deleteImageFromFolder($input->deleteimage, $input->fieldname);
        }

        // handle file uploads to folder sent by uppy
        if (!empty($_FILES["uppyfiles"])) $this->handleUploadFileToFolder();
    }

    /**
     * Set an attribute to this Inputfield
     *
     * In this case, we just capture the 'value' attribute and make sure it's something valid
     * 
     * @param string $key
     * @param mixed $value
     * @return $this
     *
     */
    public function setAttribute($key, $value)
    {
        if ($key == 'value' && empty($value)) {
            $value = FieldtypeImageReference::toJson();
        }

        return parent::setAttribute($key, $value);
    }

    public function isEmpty()
    {
        return (!$this->value);
    }

    /**
     * populate data for AJAX requests to $congig->js
     * load dependencies for file upload into folder
     * do this in renderReady to make it work for fields inside repeaters
     *
     * @param Inputfield $parent
     * @param boolean $renderValueMode
     * @return void
     */
    public function renderReady(Inputfield $parent = null, $renderValueMode = false)
    {
        parent::renderReady();
        $config = $this->wire('config');
        $name = ($this->hasField) ? $this->hasField->name : $this->name;
        // populate config js
        if (isset($config->js($this->className)[$name])) return; // config js already populated for this field

        $editPageUrl = ($this->process == 'ProcessPageEdit') ? $this->wire('pages')->get($this->wire('input')->id)->editUrl : $this->page->url;
        $url = ($this->process == 'ProcessPageEdit') ? $editPageUrl . "&{$this->className}=1" : $editPageUrl . "?{$this->className}=1";
        // $url .= "&field={$this->name}";
        $imagesfields = ($this->frompages || $this->fromeditpage || $this->anypage) ? $this->imagesfields : array();
        // set allowed file extensions for images uploaded to folder
        if ($this->fromfolder && $this->allowed_extensions) {
            $allowedFiletypes = array_map(function ($el) {
                return '.' . trim($el);
            }, explode(' ', $this->allowed_extensions));
        } else {
            $allowedFiletypes = null;
        }
        // set max file size in bytes for images uploaded to folder
        $maxFileSize = ($this->fromfolder && $this->maxSize) ? (float) trim(str_replace('MB', '', $this->maxSize)) * 1024 * 1024 : null;
        $fieldConfig = array(
            $name => array(
                'url' => $url, // $this->ajaxURL,
                'imagesfields' => $imagesfields,
                'csrf' => array('name' => $this->wire('session')->CSRF->getTokenName(), 'value' => $this->wire('session')->CSRF->getTokenValue()),
                'allowedFileTypes' => $allowedFiletypes,
                'maxFileSize' => $maxFileSize
            )
        );
        $otherFields = ($config->js($this->className)) ? $config->js($this->className) : array();
        $config->js($this->className, array_merge($otherFields, $fieldConfig));

        // load dependencies for file upload to folder
        if ($this->fromfolder && $this->wire('user')->hasPermission('imagereference-folder-upload')) {
            $config->scripts->add($config->urls->siteModules . "FieldtypeImageReference/assets/ImageReferenceUppy.min.js");
            $config->styles->add($config->urls->siteModules . "FieldtypeImageReference/assets/ImageReferenceUppy.min.css");
        }

        // load dependencies for file delete in folder
        // if ($this->fromfolder && $this->wire('user')->hasPermission('imagereference-folder-delete')) {
        // }

        // load dependencies for field inside repeater
        if ($this->anypage) { // get assets for pagelist select
            $config->scripts->add($config->urls->InputfieldPageListSelect . 'InputfieldPageListSelect.js');
        }
    }

    /**
     * Return the completed output of Inputfield select file
     *
     * @return string
     *
     */
    public function ___render()
    {
        // populate imagepages 
        $this->imagePages = $this->getImagePages();

        $name = $this->attr('name');
        $value = json_decode($this->attr('value'));
        if ($value->pageid === -1) {
            $message = $this->_("The referenced image was deleted. Choose a new image");
            $this->page->error($this->_("The referenced image was deleted. Choose a new image"));
            $this->error($message);
        }
        $out = $this->renderSelectedImage($value);
        $out .= $this->renderInputs($name, $value);
        $out .= $this->renderThumbnails();

        return $out;
    }

    public function renderSelectedImage($value)
    {
        $previewWidth = ($this->previewWidth) ? $this->previewWidth : 200;
        $blankSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89x8AAuEB74Y0o2cAAAAASUVORK5CYII=';
        $image = $this->getImage($value);
        $url = ($image) ? $image->width($previewWidth)->url : $blankSrc;
        $info = ($image) ? $this->renderTooltip($image) : '';
        $out = "<div class='uk-panel uk-panel-box uk-margin-bottom'>
        <span class='fa fa-trash' uk-tooltip='title: Remove Image'></span>
        <img src='{$url}' style='width: {$previewWidth}px;' data-src='{$blankSrc}'>
        <div class='uk-thumbnail-caption' style='width: {$previewWidth}px'>{$info}</div>";
        $out .= "</div>";

        return $out;
    }

    public function renderInputs($name, $value)
    {
        $value = FieldtypeImageReference::toJson($value->pageid, $value->filename);
        return "<div>
        <input type='hidden' class='imagereference_value' name='{$name}' id='{$name}' value='{$value}' data-fieldname='{$this->name}' \>
        </div>";
    }

    public function renderThumbnails()
    {
        $wrapper = new InputfieldWrapper;
        $wrapper->attr('id', 'imagereference_thumbs');
        foreach ($this->imagePages as $p) $wrapper->add($this->renderThumbnailsForPage($p));
        // bd($this->folderpath);
        if ($this->fromfolder && $this->folderpath) $wrapper->add($this->renderThumbnailsForFolder($this->folderpath));
        if ($this->anypage) $wrapper->add($this->pickFromAnyPage());

        /**
         * @todo: add pick image from any page.
         * make use of ProcessPageEditImageSelect
         * retrieve page picker an thumbs with URL like /adminUrl/page/image/?id=1119&edit_page_id=1001&modal=1&field=images 
         */

        return $wrapper->render();
    }

    /**
     * renders thumbnails for an image page inside an InputfieldMarkup
     *
     * @param Page $page
     * @return InputfieldMarkup inputfield markup instance
     */
    public function renderThumbnailsForPage($page)
    {
        $imageFields = $this->getImageFields($page);
        if (count($imageFields)) {
            $imageFieldNames = implode(',', array_keys($imageFields));
            $button = "<a href='{$page->editUrl}&fields={$imageFieldNames}&from=imagereference' class='imagereference_edit imagereference_editimages pw-modal' title='" . $this->_('Upload Images') . "' uk-tooltip data-buttons='button#submit_save' data-autoclose><i class='fa fa-upload'></i></a>";
        }
        $markup = '<ul class="uk-thumbnav" data-pageid="' . $page->id . '" data-imagesfields="' . htmlspecialchars(json_encode(array_keys($imageFields))) . '"></ul>';
        $markupField = new InputfieldMarkup; // $this->wire('modules')->get('InputfieldMarkup');
        $markupField->class('imagereference_thumbholder');
        $markupField->id = "imagereference_  thumbs_{$page->id}";
        // $markupField->attr('data-pageid', $page->id); // does not work
        $markupField->label = sprintf($this->_('Choose an image from page "%s"'), $page->title);
        $markupField->entityEncodeLabel = false;
        $markupField->markupText = $button . $markup;
        $markupField->collapsed(1);

        return $markupField;
    }

    /**
     * renders thumbnails for images in a folder inside an InputfieldMarkup
     *
     * @param string $folderpath
     * @return InputfieldMarkup inputfield markup instance
     */
    public function renderThumbnailsForFolder($folderpath)
    {
        $button = ($this->user->hasPermission('imagereference-folder-upload'))
            ? "<a href='#' class='imagereference_edit imagereference_editimages_folder' title='" . $this->_('Upload Images') . "' uk-tooltip><i class='fa fa-upload'></i></a>"
            : '';
        $uppy = '<div class="uppy" data-allowed="' . $this->allowed_extensions . '" data-maxsize="' . $this->maxSize . '"></div>';
        $markup = '<ul class="uk-thumbnav imagereference_thumbs_folder" data-pageid="0" data-folderpath="' . $folderpath . '"></ul>';
        $markupField = new InputfieldMarkup; // $this->wire('modules')->get('InputfieldMarkup');
        $markupField->class('imagereference_thumbholder');
        $markupField->label = sprintf($this->_('Choose an image from folder "%s"'), $folderpath);;
        $markupField->entityEncodeLabel = false;
        $markupField->markupText = $button . $uppy . $markup;
        $markupField->collapsed(1);

        return $markupField;
    }

    /**
     * lets user select a page and
     * renders thumbnails for that page a InputfieldWrapper
     *
     * @param Page $page
     * @return InputfieldWrapper inputfield wrapper instance
     */
    public function pickFromAnyPage()
    {
        // set initial value of PageListSelect
        $value = 0;
        $pageid = (int) wireDecodeJSON($this->attr('value'))['pageid'];
        if ( // pageid of stored image is not thet of editPage or one of the imagepages
            ($pageid !== 0)
            && ($this->fromeditpage && $this->hasPage && $this->hasPage->id != $pageid)
            && (!$this->imagePages->has($this->wire('pages')->get($pageid)))
        ) $value = $pageid;


        $wrapper = new InputfieldWrapper;
        /** @var InputfieldPageListSelect $field */
        $field = $this->modules->get("InputfieldPageListSelect");
        $field->label = $this->_("Choose any page to get images from");
        $field->startLabel = $this->_("Choose a page");
        $field->showPath = false;
        $field->description = ($value)
            ? $this->_("If you would like to select images from any page, select the page below.")
            : $this->_("If you would like to select images from a different page, select the page below.");
        $field->attr('id+name', "{$this->name}_anypage");
        $field->class('imagereference_anypage');
        if ($value) $field->value = $value;
        $field->parent_id = 0;
        $field->collapsed = Inputfield::collapsedYes;
        $wrapper->add($field);

        $markup = '<ul class="uk-thumbnav" data-pageid="">';
        if ($value) $markup .= $this->getThumbnailsForPage($pageid);
        $markup .= '</ul>';
        $markupField = new InputfieldMarkup;
        $class = 'imagereference_thumbs_anypage';
        if ($value) $class .= ' in';
        $markupField->class($class);
        $pageName = ($value) ? $this->wire->pages($pageid)->title : '';
        $markupField->label = $this->_('Choose an image from page') . " \"<span class='imagereference_anypage_pagename'>{$pageName}</span>\"";
        // $markupField->skipLabel = Inputfield::skipLabelHeader;
        $markupField->entityEncodeLabel = false;
        $markupField->markupText = $markup;
        // $markupField->collapsed(1);
        // $markupField->showIf("{$field->name}!=0");
        $wrapper->add($markupField);
        return $wrapper;
    }

    /**
     * renders thumbnails markup for an image page
     *
     * @param int $pageid
     * @return string thumbnail markup for page images
     */
    public function getThumbnailsForPage($pageid)
    {
        $page = $this->wire('pages')->get($pageid);
        $images = $this->getPageImages($page);
        if (!$images->count) {
            // $imageFields = $this->getImageFields($page);
            // $imageFieldNames = implode(',', array_keys($imageFields));
            $markup = '<b>' . $this->_('There are no images. You first need to upload images to page') .  $page->title . '</b>';
        } else {
            $markup = $this->getThumbnails($images, $page->id);
        }

        return $markup;
    }

    /**
     * renders thumbnails markup for images in a folder
     *
     * @param int $page
     * @return string thumbnail markup for folder images
     */
    public function getThumbnailsForFolder($folderpath)
    {
        $baseUrl = FieldtypeImageReference::getBaseUrl($folderpath);
        $images = FieldtypeImageReference::getPageimages($folderpath);

        if (!$images->count) {
            $markup = '<b>' . $this->_('There are no images. Upload images to folder') . ' ' . $baseUrl . '</b>';
        } else {
            $markup = $this->getThumbnails($images, 0);
        }

        return $markup;
    }

    /**
     * renders thumbnail markup
     *
     * @param Pageimages $images
     * @param int $pageid
     * @return string thumbnail markup
     */
    public function getThumbnails($images, $pageid)
    {
        $previewWidth = ($this->previewWidth) ? $this->previewWidth : 200;
        $thumbWidth = ($this->thumbWidth) ? $this->thumbWidth : 100;
        $markup = '';
        foreach ($images as $img) {
            $tooltip = $this->renderTooltip($img);
            $markup .= "<li class='uk-thumbnail uk-thumbnail-mini uk-panel'>";
            if ($pageid === 0 && $this->user->hasPermission('imagereference-folder-delete'))
                $markup .= "<span class='fa fa-trash imagereference_deleteimage' uk-tooltip='title: Delete Image'></span>";
            $markup .= "<img style='width: {$thumbWidth}px' data-pageid='{$pageid}' data-filename='{$img->basename}' src='{$img->width($previewWidth)->url}' alt='{$img->basename}'  uk-tooltip title='{$tooltip}' data-title='{$tooltip}'>
            </li>";
        }
        return $markup;
    }

    /**
     * creates tooltip markup
     * @param mixed $img Pageimage|null either a Pageimage object or null
     */
    public function renderTooltip($img)
    {
        if (is_null($img)) return '';
        $out = $img->basename;
        if ($img->description) $out .= '<br>' . $img->description;
        $out .= '<br>' . $img->filesizeStr;
        if (strtolower($img->ext) !== 'svg') $out .= '<br>' . "{$img->width} x {$img->height} px";
        if (!$img->page instanceof ImageReferenceVirtualpage) $out .= '<br>' . $this->_('Page:') . ' ' . $img->page->title;
        if ($img->page instanceof ImageReferenceVirtualpage) $out .= '<br>' . $this->_('Folder:') . ' ' . $this->folderpath;
        if ($img->field && $img->field->name != 'imagereferencevirtualfield') $out .= '<br>' . $this->_('Field:') . ' ' . $img->field->name;

        return $out;
    }

    /**
     * Get all editable image fields on the page that are allowed image fields
     * 
     * @param Page $page
     * @param bool $excludeFullFields Exclude fields that are already full? (i.e. can't add more images to them)
     * @return array of Field objects for image fields
     * 
     */
    public function getImageFields(Page $page, $excludeFullFields = true)
    {

        $imageFields = array();

        foreach ($page->fields as $field) {
            if (!$field->type instanceof FieldtypeImage) continue;
            if (!in_array($field->name, $this->imagesfields)) continue;
            // if (!$page->editable($field->name)) continue; // remove, so editors without page edit permission for the image page can still choose images
            if ($excludeFullFields && $field->maxFiles > 0) {
                if (count($page->get($field->name)) >= $field->maxFiles) continue;
            }
            $imageFields[$field->name] = $field;
        }
        return $imageFields;
    }

    /**
     * gets all pages that serve image thumbnails to the inputfield
     *
     * @return PageArray might be empty, depending on options chosen for the field
     */
    public function getImagePages()
    {
        $pages = new PageArray;
        // parent and children of chosen page
        if ($this->frompages && $this->imagespage) {
            $p = $this->wire('pages')->get($this->imagespage, array('include' => 'hidden'));
            if ($p->id) {
                $imageFields = $this->getImageFields($p);
                if (!empty($imageFields)) {
                    $pages->add($p);
                }
                if ($this->includechildren) {
                    foreach ($pages->first()->children('include=hidden') as $child) {
                        $imageFields = $this->getImageFields($child);
                        if (!empty($imageFields)) $pages->add($child);
                    }
                }
            }
        }
        // editPage: page the field lives on
        if ($this->fromeditpage && $this->hasPage && !empty($this->getImageFields($this->hasPage))) $pages->add($this->hasPage);
        return $pages;
    }

    /**
     * gets all images from all imagefields on a page
     *
     * @param Page $page
     * @return Pageimages
     */
    public function getPageImages($page)
    {
        // $imagefields = ($this->fromeditpage && $page == $this->hasPage) ? $this->getImageFields($this->hasPage) : $this->getImageFields($page);
        $imagefields = $this->getImageFields($page);
        $images =  new Pageimages($page);
        foreach ($imagefields as $field) {
            foreach ($page->get($field->name) as $pageimage) $images->add($pageimage);
        }
        return $images;
    }

    /**
     * gets the image from stored page id and filename
     *
     * @param object $value holds $value->pageid and $value->filename
     * @return mixed Pageimage|null
     */
    public function getImage($value)
    {
        if ($value->pageid && $value->filename) {
            // get image from imagespage or editPage
            $imagefields = array();
            if ($this->fromeditpage && $this->hasPage && ($value->pageid == $this->hasPage->id)) { // get image from editPage
                $imagefields = $this->getImageFields($this->hasPage);
            } else { // get image from imagespage
                $imagefields = $this->getImageFields($this->pages->get($value->pageid));
            }
            $image = null;
            $page = $this->wire('pages')->get($value->pageid);
            if ($page->id) {
                foreach ($imagefields as $field) {
                    if ($image = $page->get($field->name)->getFile($value->filename)) break;
                }
            }
        } elseif ((int) $value->pageid === 0 && $value->filename) {
            // get image from folder
            $images = FieldtypeImageReference::getPageimages($this->folderpath);
            $image = $images->getFile($value->filename);
        } elseif ((int) $value->pageid === 0 && empty($value->filename)) {
            // empty image
            $image = null;
        }
        if (is_null($image) && !empty($value->filename)) {
            $location = ((int) $value->pageid === 0) ? "folder {$this->folderpath}" : "page {$page->title}";
            $this->error(sprintf($this->_('The saved image %1$s from %2$s cannot be found'), $value->filename, $location));
        }

        return $image;
    }

    /**
     * uploads files provided by uppy post request to specified folder
     *
     * @return void
     * @throws WireException
     */
    protected function handleUploadFileToFolder()
    {

        $input = $this->wire('input');
        if (!$input->{$this->className} /* && $input->post  */ && !$input->folderpath && empty($_FILES["uppyfiles"])) return;
        $file = $_FILES["uppyfiles"];

        $fullPath = FieldtypeImageReference::getBasePath($input->folderpath);
        $targetFile = $fullPath . basename($file['name'][0]);
        try {
            $uploaded = (new WireUpload('uppyfiles'))
                ->setValidExtensions(['svg', 'png', 'jpg', 'jpeg', 'gif'])
                ->setMaxFiles(1)
                // ->setMaxFileSize(10 * pow(2, 20)) // 10MB
                ->setDestinationPath($fullPath)
                ->execute();
            if (!empty($uploaded)) {
                header('Access-Control-Allow-Origin: *');
                header('Content-type: application/json');
                $data = ['url' => $targetFile, 'message' => 'The file ' . $uploaded[0] . ' has been uploaded.'];
                http_response_code(201);
                echo json_encode($data);
            } else {
                throw new WireException('Unable to move the uploaded file to its final location:' . $targetFile);
            }
        } catch (\Throwable $th) {
            header('Access-Control-Allow-Origin: *');
            header('Content-type: application/json');
            $data = ['message' => 'Sorry, there was an error uploading your file.', 'error' => $th->getMessage()];
            http_response_code(400);
            echo json_encode($data);
        }
        exit();
    }

    /**
     * delete an image from folder
     *
     * @param string $basename
     * @param string $fieldname
     * @return string JSON response
     */
    public function deleteImageFromFolder($basename, $fieldname) {
        $response = new \stdClass;
        $field = $this->wire('fields')->get($fieldname);
        // check if this image is used on any other page with this field
        $page = $this->wire('pages')->get("{$fieldname}.pageid=0, {$fieldname}.filename={$basename}");
        $repeater = '';
        if($page->id) {
            while (strpos($page->template->name, 'repeater_') !== false) {
                $fieldname = $page->getForField();
                $page = $page->getForPage();
                $repeater = '(repeater field)';
            }
            /** 
             * call to editUrl throws a Notice: Trying to get property 'template' of non-object in /var/www/pw.local/wire/core/Page.php on line 3320 
             * so we don't offer edit-link to Page for the moment
             */
            // $editUrl = ($page->editable()) ? $page->editUrl() : '';
            // $editString = ($editUrl) ? "<br><a href='{$editUrl}&field={$fieldname}'>Edit page {$page->title}</a>" : '';
            $response->error = sprintf($this->_('Cannot delete image because it is used on page %1$s in field %2$s %3$s'), $page->title, $fieldname, $repeater);
            // $response->error .= '<br>' . sprintf($this->_('You need to remove the image first %s'), $editString);
        } else {
            $folderpath = FieldtypeImageReference::getBasePath($field->get('folderpath'));
            try {
                if(unlink($folderpath . $basename)) {
                    $response->message = sprintf($this->_('Image %s deleted'), $basename);
                } else {
                    $response->error = sprintf($this->_('Cannot delete Image %s'), $basename);
                }
            } catch (\Throwable $th) {
                $response->error = sprintf($this->_('An error occured: %s'), $th->getMessage());
            }
        }
        header('Content-type: application/json');
        echo json_encode($response);
        exit();
    }

    public function ___upgrade($fromVersion, $toVersion)
    {
        if (version_compare($fromVersion, $toVersion == -1)) {
            if ((int) $toVersion > 202) {
                // install permissions
                foreach ($this->getModuleInfo()['permissions'] as $name => $title) {
                    $permissions = $this->wire('permissions');
                    $perm = $permissions->add($name);
                    if ($perm->id) {
                        $perm->title = $title;
                        $permissions->save($perm);
                        $this->wire('log')->message('Installed permission ' . $name, true);
                    } else {
                        $this->wire('log')->error("Permission {$name} could not be created. Please create it manually", true);
                    }
                }
            }
        }
    }
}