Mockup

Mockup 以 Pattern 型式來包裝 JavaScript 模組，讓 Plone5 的開發流程，更符合一般 JavaScript 族群的思惟習慣。

入門教學持續簡化 JavaScript 開發流程的討論 Pastanaga UI Shared Basic for React and Angular Efforts

透過 plone.patternslib 讓 Plone5 具備 Patterns 功能，以 Mockup 的 pat-toggle 為例，會和 patternslib 衝突，因此部份功能是停用的，相關討論。

Products.CMFPlone/_scripts/_generate_gruntfile.py

bobtemplates.plone 啟用 Buildout 的 grunt-compile 功能 grunt does not satisfy its siblings' peerDependencies requirements 修改 package.json 指定 "grunt": ">=4.0.5 <1.0.0" will not be registered

patterns.Patternslib Base: This pattern without a name attribute will not be registered!
patterns.Patternslib Base: The pattern 'plone-widgets' does not have a trigger attribute, it will not be registered.
# thememapper/pattern.js name: _t('HTML mockup')
# filemanager/pattern.js name: 'saveFile'
# tinymce/pattern.js name: scale[1]

Pattern

Pattern 通常包括一個 Widget 或是共同執行同一功能的數個 Widget，然後被指派在網頁裡執行。指派過程需要設定 Trigger 和 Option 參數，像 class="pat-texteditor" 是 Trigger 範例，是一個 CSS 設定值，data-pat-texteditor="..." 是 Option，是一個 JSON 物件字串。

Plone Conf 2014 Status Report by Timo Stollenwerk

Updating JavaScript for Plone5

<?xml version="1.0"?>
<registry>
  <records prefix="plone.resources/foobar"
           interface='Products.CMFPlone.interfaces.IResourceRegistry'>
    <value key="js">.++resource++foobar.js/value
    <value key="deps">jquery</value>
  </records>
</registry>

CSS Bundle plone-compile-resources

<value key="csscompilation">++plone++static/my-package-compiled.css</value>

plone5 buildout

JavaScript 原本沒有宣告相依性的概念，後來像 RequireJS 和 CommonJS 推出，它們的功能跟 Python 的 import 類似，最後也影響 ECMAScript 6 (ES6) 把這樣的功能納入標準。Plone5 使用 RequireJS 的原因，在於它提供 bundle 線上編譯的功能。currently ship all JavaScript in one file and is aware of the issue, RequireJS is there (and we are using it) to give us async loading of all scripts if we need it. But it does not force us to do it, because it also enables us to bundle everything in one file. PhantomJS 在 make bootstrap 後會自動安裝，不必事先在 Linux 環境安裝。

$ sudo apt-get installl phantom-js && make bootstrap
$ make bundle-resourceregistry
# or make bundles for all bundles

每個 patterns/*/pattern.js 都有設定 parser: 'mockup' 只有 base 沒有。

Structure Pattern: 沒有 Title 就顯示 Id How to Customize the Structure Updater Pattern

上述範例裡只用到 init 函式，如果需要更多函式，可以自行建置。

上述 view/patternOptions 物件會以 JSON 字串形式傳入

widgets.min.js:24 Uncaught SyntaxError: Invalid regular expression

bundle combine 時可以會修改 Content Header 要避免 LiveSearch Pattern 支援 Esc 來隱藏結果

Not every pattern in mockup is in Plone by default. For example, the toggle pattern is not loaded.

Legacy Bundle Cooking Improvements: css_tool.cookResources() js_tool.cookResources()

<records
    prefix="plone.bundles/plone-legacy"
    interface="Products.CMFPlone.interfaces.IBundleRegistry"
    purge="False">
  <value key="last_compilation"></value>
</records>

Getting Started

Customizing Pattern Options

Set Up Development Environment on Ubuntu Linux

$ sudo apt-get install npm
$ nodejs -v
$ npm -v

# Unbuntu 14.04
$ cd /usr/bin
$ sudo ln -s nodejs node

參考 Getting Started 說明，建立開發環境：

$ git clone git@github.com:plone/mockup.git
$ cd mockup
$ make bootstrap

不要裝在 /usr/lib/node_modules

? sudo mkdir /usr/local/lib/node_modules
? sudo chown -R `whoami` /usr/local/lib/node_modules

make bootstrap 第一次遇到的錯誤，建立 /usr/local/lib/node_modules 似乎有解決，第二次遇到 ENOENT, chmod '.../package/example/parse.js' 錯誤。

建立 helloworld 的範例專案：

$ mkdir patterns/helloworld
$ vim patterns/helloworld/pattern.js  # parser: 'mockup',
$ vim js/config.js
$ cd ..
$ make bundle-widgets
$ vim mockup/hello.html

留下重覆的程式碼再利用 make update 更新勾選 development mode 在 resourcegistry 頁籤操作沒有反應至少有共種編輯方式

plone-compiled.min.js

ploneCustom with Resource Registry Include to Your Own Project minimalpattern

Decorating TextArea in AddForm Popup Drop the Compiled JS/CSS Resources

Best Practice: 1) reuse Barceloneta LESS 2) use the aliases when they exist to make it easier to override resources in build tools

@import "@{sitePath}/++plone++barceloneta/less/variables.plone.less";

mockup/patterns/thememapper/pattern.thememapper.less

- @import "@(mockupPath)/filemanager/pattern.filemanager.less";
+ @import "@(mockup-patterns-filemanager)";

採用 LESS 而不是 SASS: LESS is done in JavaScript and can be compiled in browser less2sass

Bower: 前端套件管理工具 less mixin to center responsive image in fixed size element

更新 Mockup 版本範例: #1 #2 CSSmin CSSutils

PickADate Pattern Default Time Backport patterns widgets iframe overlay 多次 Pattern Registry Init 會造成 Widget 重複顯示舊版 plonetheme.barceloneta 有重覆程式碼 Accessibility 508/WCAG2 Review Pagination Issue FieldSet Issue

Subclassing or Extending Widget Pattern: pat-leaflet example included in patterns-compiled.js

Make Spinner Work for Unauthenticated User select2 Widget: utils.escapeHTML() 遇到 & ampersand 符號會無法處理 collective.contact.facetednav: Initialize Mockup Patterns in jQueryTools Overlay Edit Form jQuery 必須確保頁面完整載入後才能執行如何與 faceted view 整合

require([
  'jquery',
  'pat-registry'
], function($, Registry) {
    $(Faceted.Events).bind(Faceted.Events.AJAX_QUERY_SUCCESS, function() {
    Registry.scan($('#content-core'));
  });
})

Custom Data Attribute

TinyMCE version

I18N

<body data-pat-preventdoublesubmit='{"message": "..."}'>

Twitter Widget

ploneintranet.theme

folder_contents datetime format

Improve RelatedItems Sorting

Create a Change Event with the New Date to See in the Pattern

使用 RequireJS 從 CDN 來載入 jQuery UI Bundling Google Icon Fonts CSS file using Resource Registry

Form Widget with React Redux remote plone-legacy bundle support in Plone 5.1

Patterns Library tooltip make tooltip useable by it's own

Font Mimetype .woff application/font-woff .ttf application/font-ttf .eot application/vnd.ms-fontobject .otf application/font-otf

SubClassing folder_contents 依 thumb_size_tables 可調整

Modal

dialog width example: Products.CMFPlone/profiles/default/actions.xml

define([
    'pat-fancyoverlay'
], function(FancyOverlay) {
    'use strict';
    var Modal = FancyOverlay.extend({
        name: 'plone-modal',
        trigger: '.pat-plone-modal'
    });
    return Modal;
});

Modal Does Not Work in iFrame

Riot JavaScript Frontend Library

Debug

舊版 ResourceRegistry 在開發模式 (debug-mode) 沒有針對 last_compilation date 反應

可能要手動取消 AMD Loading 以免造成衝突 album_view

disable: Mozilla styleSheets

Improper URLs Generated

Dependency: The ACE editor is not part of the Plone or pone-logged-in buddle. It is an dependency of the texteditor pattern, which itself is a dependency of the filemanager pattern which is bundled for the thememapper bundle.

Testing

在 Mockup 之前，並沒有系統化 Unit Test 機制，只有透過 Robot Framework 進行 Integration Test，現在 Mockup 和 Mockup-core 都有 Travis 整合，並朝向 Jenkins 整合。

Add Nodejs on Jenkins nodes (plone.jenkins_node)
Configure Jenkins so that tests will find where Nodejs is (plone.jenkins_server)
Configure Grunt (a JavaScript test runner) for Jenkins (mockup-core)
Add a make target for the new Grunt configuration (mockup)
Create a Jenkins job that runs it (jenkins.plone.org)

suggesting to implement a (generated) wrapper around each bundle

Third Party Package Migration

程式碼變得肥大只包含需要的語系程式碼

extra JavaScript / CSS management: meta bundlers

zopyx.plone.persistentlogger

collective.taxonomy: impossible to translate terms of a taxonomy with the previous dynatree UI, using React with redux and npm

plone.formwidget.geolocation: Merge 'geolocation-bundle' with 'default' aggregation Also make it depend on more specific 'patterns' bundle (which depends on 'plone' itself)

Use pat-modal instead of prepOverlay: collective.cover

Webpack

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser. Four Core Concepts: entry, output, loaders, plugins.

React App Tutorial Plone Theme with Webpack 與 RequireJS 能夠合作 Plone5 Frontend Development Plugin for Webpack

Django + Webpack + Vue.js Webpack 4 Bundler ES6 翻譯成 ES5

Debug Tip: Unspecified Build Error