Skip to content

Instantly share code, notes, and snippets.

@onefriendaday
onefriendaday / Fieldtype.js
Created Sep 30, 2019
Example for getting filtered selectbox
View Fieldtype.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div><select v-model="model.example"><option :value="item.uuid" :key="item.uuid" v-for="item in stories">{{item.name}}</option></select></div>`,
data() {
return {stories: []}
},
methods: {
initWith() {
return {
@onefriendaday
onefriendaday / Fieldtype.js
Created Sep 17, 2019
Custom colopicker example
View Fieldtype.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
data() {
return {
loading: true,
open: false,
colors: ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5', '']
}
},
template: `<div>
View replaceAllImages.js
export default function replaceAll(tree) {
var traverse = function (jtree) {
if (jtree.constructor === String) {
jtree = jtree.replace(new RegExp('a.storyblok.com', 'g'), 'img2.storyblok.com')
} else (jtree.constructor === Array) {
for (var item = 0; item < jtree.length; item++) {
traverse(jtree[item])
}
} else if (jtree.constructor === Object) {
for (var treeItem in jtree) {
View pages_controller.rb
class PagesController < ApplicationController
def index
response.headers['X-FRAME-OPTIONS'] = 'ALLOWALL'
client = Storyblok::Client.new(
logger: logger,
cache_version: Time.now.to_i,
token: 'Dv2ok3DqODzzb8QUuN2XCgtt',
version: 'draft'
)
View Fieldtype.js
pluginCreated() {
this.$sb.getScript('https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-core.min.js');
this.$nextTick(() => {
this.padding = this.model.padding;
this.margin = this.model.margin;
})
},
View Fieldtype.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
data() {
return {
advancedOpen: false
}
},
template: `<div>
<div class="uk-margin-small-bottom">
Google preview
@onefriendaday
onefriendaday / Fieldtype.js
Created Jul 31, 2019
Storyblok TinyMCE plugin
View Fieldtype.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div><textarea v-model="model.content" id="mytextarea"></textarea></div>`,
methods: {
initWith() {
return {
plugin: 'wysiwyg-tinymce',
content: ''
}
},
View Fieldtype.js
const Fieldtype = {
template: `
<div v-if="model.urlList">
<div class="uk-flex uk-flex-middle" v-for="(locale, key) in options" :key="locale">
<div v-html="locale" />
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" :value="model.urlList[key]" @input="validate($event, key)">
<div>/</div>
<div v-if="showError[key]">!!! Url invalid</div>
</div>
</div>
@onefriendaday
onefriendaday / Fieldtype.js
Created Jun 14, 2019
Storyblok Fieldtype validation
View Fieldtype.js
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `
<div>
<input
class="uk-width-1-1"
type="number"
@input="validate"
:step="1"
ref="input"
View loop.js
const StoryblokClient = require('storyblok-js-client')
const Storyblok = new StoryblokClient({
token: 'TOKEN'
})
const Sync = {
getAll(page) {
return Storyblok.get(`stories`, {
per_page: 25,