Skip to content
This repository has been archived by the owner on Aug 15, 2022. It is now read-only.

Commit

Permalink
Add ability to control which Bard fields buttons appear in. Fixes #4
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacksleight
jacksleight committed Oct 14, 2021
1 parent 69e8aa1 commit 3a73f91
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 5 deletions.
15 changes: 15 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ return [
'name' => 'Introduction Paragraph',
'ident' => 'I',
'class' => 'introduction',
'button' => 'introduction',
'cp_css' => 'font-size: 1.25em',
],
],
Expand All @@ -49,4 +50,18 @@ Each style should consist of:
* **name (string):** The name of the style. This will appear in the button tooltip.
* **ident (string):** A short identification string (one or two characters). This will appear in the button icon.
* **class (string):** The class name that will be applied to the paragraph element when rendered on the site.
* **button (string|null):** The name of the button that'll be added to the Bard field's buttons list.
* **cp_css (string):** The CSS properties that will be added to the control panel for this style.

Finally open your blueprint or fieldset YAML file and add the button(s) to your Bard field's buttons list:

```yaml
-
handle: my_field
field:
type: bard
buttons:
- introduction
```
If you would like the button to appear in all Bard fields without having to add it manually set the button value to `null`.
9 changes: 5 additions & 4 deletions config/bard-paragraph-style.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@

'styles' => [
// [
// 'name' => 'Introduction Paragraph',
// 'ident' => 'I',
// 'class' => 'introduction',
// 'cp_css' => 'font-size: 1.25em',
// 'name' => 'Introduction Paragraph',
// 'ident' => 'I',
// 'class' => 'introduction',
// 'button' => 'introduction',
// 'cp_css' => 'font-size: 1.25em',
// ],
],

Expand Down
200 changes: 199 additions & 1 deletion dist/js/cp.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,199 @@
(()=>{"use strict";function t(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var n=Statamic.$bard.tiptap.commands.toggleBlockType,e=function(){function e(){!function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e)}var r,a,o;return r=e,(a=[{key:"name",value:function(){return"paragraph"}},{key:"schema",value:function(){return{attrs:{class:{default:null}},content:"inline*",group:"block",draggable:!1,parseDOM:[{tag:"p",getAttrs:function(t){return{class:t.getAttribute("class")}}}],toDOM:function(t){return["p",t.attrs,0]}}}},{key:"commands",value:function(t){var e=t.type,r=t.schema;return function(t){return n(e,r.nodes.paragraph,t)}}},{key:"pasteRules",value:function(){return[]}},{key:"plugins",value:function(){return[]}}])&&t(r.prototype,a),o&&t(r,o),e}();function r(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,n){if(!t)return;if("string"==typeof t)return a(t,n);var e=Object.prototype.toString.call(t).slice(8,-1);"Object"===e&&t.constructor&&(e=t.constructor.name);if("Map"===e||"Set"===e)return Array.from(t);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return a(t,n)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=new Array(n);e<n;e++)r[e]=t[e];return r}Statamic.booting((function(){var t=Statamic.$config.get("bard-paragraph-style.styles")||[];Statamic.$bard.extend((function(t){return(0,t.node)(new e)})),Statamic.$bard.buttons((function(n){var e=_.findLastIndex(n,{command:"heading"});n.splice.apply(n,[e+1,0].concat(r(t.map((function(t){return{text:t.name,command:"paragraph",args:{class:t.class},html:'<span><span style="font-size: 21px; font-family: Times, serif;">P</span><sup>'.concat(t.ident,"</sup></span>")}})))))}));var n=t.map((function(t){return".bard-fieldtype .ProseMirror p.".concat(t.class," { ").concat(t.cp_css," }")})).join(" "),a=document.createElement("style");a.appendChild(document.createTextNode(n)),document.head.appendChild(a)}))})();
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({

/***/ "./resources/js/paragraph.js":
/*!***********************************!*\
!*** ./resources/js/paragraph.js ***!
\***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Paragraph)
/* harmony export */ });
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var toggleBlockType = Statamic.$bard.tiptap.commands.toggleBlockType;

var Paragraph = /*#__PURE__*/function () {
function Paragraph() {
_classCallCheck(this, Paragraph);
}

_createClass(Paragraph, [{
key: "name",
value: function name() {
return 'paragraph';
}
}, {
key: "schema",
value: function schema() {
return {
attrs: {
"class": {
"default": null
}
},
content: 'inline*',
group: 'block',
draggable: false,
parseDOM: [{
tag: 'p',
getAttrs: function getAttrs(dom) {
return {
"class": dom.getAttribute('class')
};
}
}],
toDOM: function toDOM(node) {
return ['p', node.attrs, 0];
}
};
}
}, {
key: "commands",
value: function commands(_ref) {
var type = _ref.type,
schema = _ref.schema;
return function (attrs) {
return toggleBlockType(type, schema.nodes.paragraph, attrs);
};
}
}, {
key: "pasteRules",
value: function pasteRules() {
return [];
}
}, {
key: "plugins",
value: function plugins() {
return [];
}
}]);

return Paragraph;
}();



/***/ })

/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!****************************!*\
!*** ./resources/js/cp.js ***!
\****************************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _paragraph__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./paragraph */ "./resources/js/paragraph.js");
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }


Statamic.booting(function () {
var styles = Statamic.$config.get('bard-paragraph-style.styles') || [];
Statamic.$bard.extend(function (_ref) {
var node = _ref.node;
return node(new _paragraph__WEBPACK_IMPORTED_MODULE_0__.default());
});
Statamic.$bard.buttons(function (buttons) {
var index = _.findLastIndex(buttons, {
command: 'heading'
});

buttons.splice.apply(buttons, [index + 1, 0].concat(_toConsumableArray(styles.map(function (style) {
return {
name: style.button,
text: style.name,
command: 'paragraph',
args: {
"class": style["class"]
},
html: "<span><span style=\"font-size: 21px; font-family: Times, serif;\">P</span><sup>".concat(style.ident, "</sup></span>"),
condition: function condition(config) {
return style.button ? config.buttons.includes(style.button) : true;
}
};
}))));
});
var css = styles.map(function (style) {
return ".bard-fieldtype .ProseMirror p.".concat(style["class"], " { ").concat(style.cp_css, " }");
}).join(' ');
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
});
})();

/******/ })()
;
2 changes: 2 additions & 0 deletions resources/js/cp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ Statamic.booting(() => {
Statamic.$bard.buttons(buttons => {
const index = _.findLastIndex(buttons, { command: 'heading' });
buttons.splice(index + 1, 0, ...styles.map(style => ({
name: style.button,
text: style.name,
command: 'paragraph',
args: { class: style.class },
html: `<span><span style="font-size: 21px; font-family: Times, serif;">P</span><sup>${style.ident}</sup></span>`,
condition: config => style.button ? config.buttons.includes(style.button) : true,
})));
});

Expand Down

0 comments on commit 3a73f91

Please sign in to comment.