Question

我正在为我的客户开发一个热点插件，他可以在后端将多个热点添加到从库中选择的图像上。

我正在将此视频教程用作基础https://vimeo.com/200502785

关系看起来像这样-一个图像有很多热点（一对多关系）热点有很多产品（多对多关系）

我使用了媒体查找器中的代码将图像加载到后端加载图像后，用户可以单击并添加热点

jQuery(document).ready(function($) {

   function updateHotspotPosition(hotspot){

      var l = ( 100 * parseFloat(hotspot.position().left / parseFloat(hotspot.parent().width())) ).toFixed(3);
      var t = ( 100 * parseFloat(hotspot.position().top / parseFloat(hotspot.parent().height())) ).toFixed(3);

      hotspot.css("left", l+'%');
      hotspot.css("top", t+'%');

      hotspot.attr('data-request-data', 'left:' + l + ',top:' + t );

   }

   $('#add-hotspot').click(function(e) {
      e.preventDefault();

      $('#hotspot-container').append('<div class="hotspotmarker" data-control="popup" data-handler="onLoadCreateHotspotForm" data-size="large" href="javascript:;" data-request-data="left:0,top:0"></div>');

      $('.hotspotmarker').draggable({
         containment: "#hotspot-container",
         scroll: false,
         stop: function(){
            updateHotspotPosition($(this));
         }
      });

   });


   $('#hotspot-container').on('click', function(e) {
      e.preventDefault();
      if (true) {}
      var parentOffset = $(this).parent().offset();
      //or $(this).offset(); if you really just want the current element's offset
      var l = ( 100 * parseFloat((e.pageX - parentOffset.left) / parseFloat($(this).width())) ).toFixed(3);
      var t = ( 100 * parseFloat((e.pageY- parentOffset.top) / parseFloat($(this).height())) ).toFixed(3);


      $(this).append('<div class="hotspotmarker" data-control="popup" data-handler="onLoadCreateHotspotForm" data-size="large" style="left:'+ l +'%;top:'+ t +'%" data-request-data="left:'+l+',top:'+t+'"></div>')

      $('.hotspotmarker').draggable({
            containment: "#hotspot-container",
            scroll: false,
            stop: function(){
            updateHotspotPosition($(this));
         }
      }).on('click', function(event) {
         event.preventDefault();
         /* Act on the event */
      });;
   });
});

在单击热点之后，将启动模态窗口，其中包含传递的数据（左侧和顶部位置）以及用于选择将分配给该热点的产品的选项。

问题出在从图像控制器创建热点的地方，那里数据库中还不存在图像

控制器代码

<?php namespace Depcore\InspiracjeKludi\Controllers;

use Backend\Classes\Controller;
use BackendMenu;

class Images extends Controller
{
    public $implement = [
    'Backend\Behaviors\ListController',
    'Backend\Behaviors\FormController',
    'Backend\Behaviors\ReorderController'
    ];

    public $listConfig = 'config_list.yaml';
    public $formConfig = 'config_form.yaml';
    public $reorderConfig = 'config_reorder.yaml';

    public function __construct()
    {
        parent::__construct();
        BackendMenu::setContext('Depcore.InspiracjeKludi', 'inspiracje', 'side-menu-item');

        $this->itemFormWidget = $this->createProducsFormWidget();
    }

    protected $itemFormWidget;
    /**
     * Create a new hotspot form with products selection
     * @return null
     */
   public function onLoadCreateHotspotForm (  ){


      $this->itemFormWidget->setFormValues ( ['left'=>post ( 'left' ),'top'=>post ( 'top' )] );
      $this->vars['itemFormWidget'] = $this->itemFormWidget;


      return $this->makePartial ( 'hotspot_add');
    }

    protected function createProducsFormWidget (  ){
      $config = $this->makeConfig ( '$/depcore/inspiracjekludi/models/hotspot/fields.yaml' );
      $config->alias = 'productForm';
      $config->arrayName = 'products';
      $config->model = new \Depcore\InspiracjeKludi\Models\Hotspot;
      $widget = $this->makeWidget ( 'Backend\Widgets\Form', $config );
      $widget->bindToController (  );
      return $widget;
    }

    public function onCreateItem (  ) {

      // if  ( $hotspotID !== null ) find and update hotspot position and products relations
      // else {
         $data = $this->itemFormWidget->getSaveData (  );
         $model = new \Depcore\InspiracjeKludi\Models\Hotspot;
         $model->fill ( $data );

         // tutaj dodać defer save
         $model->save (  );
      // }
      return [
         'hotspotId' => $model->id,
      ];
    }


}

在本教程中，情况与添加到现有订单中的项目略有不同，在这里，我需要先将产品分配给热点，然后将热点分配给图像，然后再将其保存到数据库（在创建热点后，如何将热点的ID附加到页面上的元素上也是一个逻辑问题，但这是我猜想的另一个主题。）

创建新图像时保存/创建热点

0 个答案: