README

Symfony UX Photoswipe 是一个将 Photoswipe 库集成到 Symfony 应用的 Symfony 扩展包。它是 Symfony UX 创新项目 的一部分。

安装

Symfony UX Photoswipe 需要 PHP 7.2+ 和 Symfony 4.4+。

使用 Composer 和 Symfony Flex 安装此扩展包

composer require symfony/ux-photoswipe

# Don't forget to install the JavaScript dependencies as well and compile
yarn install --force
yarn encore dev

同时确保您的 package.json 文件中至少有版本 2.0 的 @symfony/stimulus-bridge。

用法

要使用 Symfony UX Chart.js，注入 GalleryBuilderInterface 服务并在 PHP 中创建图表

// ...
use Symfony\UX\Photoswipe\Builder\GalleryBuilderInterface;
use Symfony\UX\Photoswipe\Model\Gallery;

class HomeController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function index(GalleryBuilderInterface $galleryBuilder): Response
    {
        $images = [];

        for ($i = 0; $i<=5; $i++) {
            $rand = rand(0, 1000);

            array_push($images, [
                'href' => "https://unsplash.it/1200/900/?image={$rand}",
                'src' => "https://unsplash.it/400/300/?image={$rand}",
                'data-caption' => "Sea side, south shore<br><em class='text-muted'>© Dominik Schröder</em>"
            ]);
        }

        /** @var Gallery $gallery */
        $gallery = $galleryBuilder->createGallery();
        $gallery->addOption('arrowKeys', "false");
        $gallery->addOption('bgOpacity', 0.5);
        
        // Also yo can assign massively options
        $gallery->setOptions([
            'arrowKeys' => "false",
            'bgOpacity' => 0.5
        ]);
        
        // Also you can combine into single instantiation
        $gallery = $galleryBuilder->createGallery(
            ['arrowKeys' => false, 'bgOpacity' => 0.5],
            'hello'
        );

        foreach ($images as $image) {
            $gallery->addImage(new Image($image['href'], $image['src'],$image['data-caption']));
        }

        return $this->render('home/index.html.twig', [
            'gallery' => $gallery
        ]);
    }
}

所有选项和数据都直接提供给 Chart.js。您可以阅读 Photoswipe 文档 以了解所有选项。

在 PHP 中创建后，可以使用 Twig 显示图表

{{ render_gallery(gallery) }}

{# You can pass HTML attributes as a second argument to add them on the <canvas> tag #}
{{ render_chart(chart) }}

扩展默认行为

Symfony UX Photoswipe 允许您使用自定义 Stimulus 控制器扩展其默认行为

// gallery_controller.js

import { Controller } from 'stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('photoswipe:pre-connect', this._onPreConnect);
        this.element.addEventListener('photoswipe:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('photoswipe:pre-connect', this._onPreConnect);
        this.element.removeEventListener('photoswipe:connect', this._onConnect);
    }

    _onPreConnect(event) {
        // The chart is not yet created
        console.log(event.detail); // You can access the chart options using the event details

        // Update some options
        event.detail.options.arrowKeys = true;

    }

    _onConnect(event) {
        // The gallery was just created
        console.log(event.detail.gallery); // You can access the gallery instance using the event details
    }
}

然后在您的渲染调用中，将控制器作为 HTML 属性添加

/** @var Gallery $gallery */
$gallery = $galleryBuilder->createGallery([], 'home');

向后兼容承诺

此扩展包旨在遵循与 Symfony 框架相同的向后兼容承诺：https://symfony.com.cn/doc/current/contributing/code/bc.html

然而，它目前被认为是 实验性的，这意味着目前它不受 Symfony 的 BC 策略的约束。

运行测试

PHP 测试

php vendor/bin/simple-phpunit Tests

JavaScript 测试

cd Resources/assets
yarn test