Skip to content

Kirby 3.6.6

Helpers

The Panel bundles a few functions that help you with common tasks.

Available helpers

How to access helpers

The Panel exposes all shared helpers via this.$helper:

// example in the Vue component of a custom field

panel.plugin("your/pad-display-field", {
  fields: {
    "pad-display": {
      // …
      computed: {
        paddedValue() {
          return this.$helper.pad(this.value);
        }
      }
      // …
    }
  }
});

Reference

Since 3.6.0

this.$helper.clipboard

Helpers to read from and write to the clipboard.

Example

this.$helper.clipboard.read(ClipboardEvent);
this.$helper.clipboard.read(value);

this.$helper.clone

Shorthand helper for

JSON.parse(JSON.stringify(array))

Example

let array = ["homer, "simpson"];
let cloned = this.$helper.clone(array);
Since 3.6.0

this.$helper.color

Turns a string into a valid CSS color making use of the Panel's custom CSS properties.

Example

this.$helper.color("#444");
this.$helper.color("purple-400");
this.$helper.color("pattern");

this.$helper.debounce

Parameters

Name Description
fn Function to be debounced
delay Delay in miliseconds

Example

debounce(function (query) {
  this.search(query);
}, 200)
Since 3.6.0

this.$helper.embed

Helps to generate proper YouTube or Vimeo embed URLs.

Parameters

Name Description
url URL to transform into valid embed URL
doNotTrack If URL should try to enforce non-tracking (default: false)

Example

this.$helper.embed.video(youtubeUrl);
this.$helper.embed.youtube(youtubeUrl);
this.$helper.embed.vimeo(vimeoUrl);

this.$helper.isComponent

Checks if string refers to an existing Vue component.

Example

this.$helper.isComponent("my-mysterious-component");

this.$helper.isUploadEvent

Checks if a javascript event is really an upload event.

Example

YourVueComponent.vue
<template>
  <div @drop="onDrop" />
</template>

<script>
export default {
  methods: {
    onDrop(event) {
      if (this.$helper.isUploadEvent(event) === true) {
        // …
      }
    }
  }
}

this.$helper.keyboard

Collection of helpers corresponding to keyboard events

Example

// returns meta key name depending on operating system, e.g. "cmd"
this.$helper.keyboard.metaKey();
Since 3.6.0

this.$helper.object

Collection of helpers for JavaScript objects.

Example

this.$helper.object.merge(object1, object2);

this.$helper.pad

Adds 0 to the left of the value

Parameters

Name Description
value Value to be padded
length Length of the returned string (default: 2)

Example

let money = 9;
return this.$helper.pad(money, 4);
// result: "0009"

this.$helper.ratio

Receive a padding percentage for a specified image ratio.

Parameters

Name Description
ratio e.g. 1/2 (default: 3/2)

Example

return this.$helper.ratio("1/2");
// result: "50%"

this.$helper.slug

Transform a string to a valid slug according to a specified ruleset.

Parameters

Name Description
string String to be transformed
rules Array of transformation rulesets (objects themselves)
allowed String of allowed characters

Example

return this.$helper.slug("Was für ein Spaß", [
  {
    "ü": "ue"
  },
  {
    "ß": "sz"
  }
]);
// result: "was-fuer-ein-spasz"

this.$helper.sort

Natural sort algorithm with unicode support

Example

return this.$helper.sort(valueA, valueB);

this.$helper.string

Helper that offers a couple of methods:

camelToKebab
return this.$helper.string.camelToKebab("myFavoriteSong");
// result: "my-favorite-song"
escapeHTML
return this.$helper.string.escapeHTML("<script>");
// result: "&lt;script&gt;"
hasEmoji
return this.$helper.string.hasEmoji("hello");
// result: false

return this.$helper.string.hasEmoji("😎");
// result: true
lcfirst
return this.$helper.string.lcfirst("Hello");
// result: "hello"
random

Returns a random alpha-numeric string of specified length.

return this.$helper.string.random(8);
stripHTML
return this.$helper.string.ucfirst("<p>Hello</p>");
// result: "Hello"
template

Replaces placeholers in a string with provided values

return this.$helper.string.template("Hello, { name }!", { name: "Homer" });
// result: "Hello, Homer!"
ucfirst
return this.$helper.string.ucfirst("hello");
// result: "Hello"
ucwords
return this.$helper.string.ucwords("hello my dear");
// result: "Hello My Dear"

this.$helper.upload

Helper to upload a file.

Parameters

Name Description
file File object
params Options object (see defaults below)
// available params and their default
const defaults = {
  url: "/",
  field: "file",
  method: "POST",
  accept: "text",
  attributes: {},
  complete: function() {},
  error: function() {},
  success: function() {},
  progress: function() {}
};