README

此模块试图通过天真地重新引入一些传统基础，使Silverstripe Admin界面开发变得简单一些。

已添加的功能

'合成' JS 加载/卸载事件 (DOMNodesInserted/DOMNodesRemoved)，用于动态插入/React组件
(opt-in) 简单的模态对话框（基于/需要额外加载一个约260kb的JS文件，包含jQuery、VueJS & Bootstrap）
静态 Session::get 等访问器（只需 require Restruct\Silverstripe\Simpler\Session），而不是将所有内容更改为 $this->getRequest()->getSession()->etc

动态插入和删除的DOM节点（即使是React组件）的JS事件

(sort of what Entwine onmatch/onadd does, but without the polling and also working for react-rendered areas)

要执行您的JS，即使表单/片段从Ajax/XHR请求中插入，也要监听 DOMNodesInserted
要删除/销毁JS内容，请监听 DOMNodesRemoved
处理程序收到的事件对象包含一个 event.detail.type 值
- LOAD (常规 DOMContenLoaded，触发一次，始终在文档上)
- XHR (Ajax请求到 /admin，频繁触发 ()，始终在文档上)
- FETCH (fetch请求到 /admin，频繁触发 () 但不可靠，始终在文档上触发)
- MOUNT/UNMOUNT (在React表单组件的挂载/卸载时，可靠且精确触发一次，在实表单元素上)

document.addEventListener("DOMNodesInserted", function (event) {
    // in case the event was triggered by react mount, we have a specific node to search within (else the event target will be the document)
    console.log('DOMNodesInserted', event.detail.type, event.target);
});

document.addEventListener("DOMNodesRemoved", function (event) {
    // in case the event was triggered by react unmount, we have a specific node to search within (else the event target will be the document)
    console.log('DOMNodesRemoved', event.detail.type, event.target);
});

示例：FilePond

作为一个实际示例，此模块包含一个针对优秀的 FilePond模块的“兼容层”，以初始化动态插入内容上的filepond (此代码已包含在此模块中，仅作为事件如何工作的示例)

document.addEventListener("DOMNodesInserted", function () {
    // Just a precaution to skip execution if we don't have a FilePond yet...
    if (typeof FilePond !== "undefined") {
        // Now attach filepond to any newly inserted file inputs
        var anchors = document.querySelectorAll('input[type="file"].filepond');
        for (var i = 0; i < anchors.length; i++) {
            var el = anchors[i];
            var pond = FilePond.create(el);
            var config = JSON.parse(el.dataset.config);
            for (var key in config) {
                pond[key] = config[key];
            }
        }
    }
});

opt-in额外JS需求(~260kb)，添加

(全局) Bootstrap js (主要用于模态框，但包含所有内容)
(全局) $ & jQuery 3 (实际上必须稍微不同，因为jQuery已被占用)
甚至 (全局) VueJS 2 (我知道，疯狂！)

模态对话框

打开简单的模态对话框只需设置(再次，全局)simpler对象的某些属性。

模态对话框需要加载一个额外的JS文件（目前约250kb），该文件向项目添加jQuery 3、Bootstrap JS和VueJs 2

---
Name: module_or_project
---
SilverStripe\Admin\LeftAndMain:
  extra_requirements_javascript:
    # Require simpler object & jQuery/BootstrapJS/VueJS from SimplerSilverstripe module
    - 'restruct/silverstripe-simpler:client/dist/js/simpler-silverstripe.js'

Restruct Shortcodable模块打开短代码表单对话框的示例

openDialog: function() {
    simpler.modal.show = true;
    simpler.modal.title = 'Insert/edit shortcode';
    simpler.modal.closeBtn = false;
    simpler.modal.closeTxt = 'Close';
    simpler.modal.saveBtn = false;
    simpler.modal.saveTxt = 'Insert shortcode';
    // Initially show spinner in the modal, after loading actual content via XHR, replace the spinnter with the content
    simpler.modal.bodyHtml = simpler.spinner;
    $.post(shortcodable.controller_url, shortcodable.getCurrentEditorSelectionAsParsedShortcodeData(), function(data){
        // (use the intermediary xhr_buffer element in order to have jQuery parse/activate listeners etc
        simpler.modal.bodyHtml = $('#xhr_buffer').html(data).html();
    });
}

说明

请检查 MutationObserver (& 这里) 以替代React转换器用于 DOMNodesXXX 事件

restruct / silverstripe-simpler

维护者

详细信息