Adding properties common to all components of the LIB

Plugins Third Party Plugins
1

Hi guys,

hope there’s someone out there being able to help.

I’m trying to create a plugin. This sounds pretty ambitious cause I haven’t got much clue of JavaScript. I got this plugin so far, showing up some stuff though (thanks to @matjaz starting 960grid file). But all of them depend on framework’s components.

But now, I’d like to create property settings (padding/margin and color by classes), available for ALL LIB elements - not only the ones coming alongside with my framework.

Is this possible and if so, what would be a good starting point?

Cheers

Thomas

2

This is a code snippet from PinegrowBlocks that does the same:

//Add common sections to all elements

var colors = [ 'black', 'white', 'offwhite', 'clouds', 'silver', 'concrete', 'asbestos', 'tan', 'pewter', 'moonlight', 'deepocean', 'turquoise', 'aqua', 'sunflower', 'orange', 'sienna', 'milanored', 'river', 'marina', 'deco', 'crete', 'guardsman', 'pomegranate', 'finn', 'tamarind'];

var colors_options = [];
var bck_options = [{key: 'bg-transparent', name: 'transparent'}];
var hover_colors_options = [];
var hover_bck_options = [{key: 'bg-transparent-hover', name: 'transparent'}];

for(var i = 0; i < colors.length; i++) {
    colors_options.push({key: colors[i], name: colors[i]});
    bck_options.push({key: 'bg-' + colors[i], name: colors[i]});
    hover_colors_options.push({key: colors[i] + '-hover', name: colors[i]});
    hover_bck_options.push({key: 'bg-' + colors[i] + '-hover', name: colors[i]});
}
var tag = {
    'type' : 'tag',
    'selector' : function($el) { return true },
    'name' : 'Div',
    'display_name' : 'tag',
    'priority' : 1000,
    not_main_type: true,
    'sections' : {
        'pg.blocks.common' : {
            name : 'Blocks options',
            fields : {
                'pg.blocks.common.color' : {
                    'type' : 'select',
                    'name' : 'Text color',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: colors_options
                },
                'pg.blocks.common.colorhover' : {
                    'type' : 'select',
                    'name' : 'Text color (hovered)',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: hover_colors_options
                },
                'pg.blocks.common.bgcolor' : {
                    'type' : 'select',
                    'name' : 'Background color',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: bck_options
                },
                'pg.blocks.common.bgcolorhover' : {
                    'type' : 'select',
                    'name' : 'Background color (hovered)',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: hover_bck_options
                },
                'pg.blocks.common.padtop' : {
                    'type' : 'select',
                    'name' : 'Padding top',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: [
                        {key: 'pad0', name: '0px'},
                        {key: 'pad5', name: '5px'},
                        {key: 'pad10', name: '10px'},
                        {key: 'pad15', name: '15px'},
                        {key: 'pad20', name: '20px'},
                        {key: 'pad25', name: '25px'},
                        {key: 'pad30', name: '30px'},
                        {key: 'pad45', name: '45px'},
                        {key: 'pad60', name: '60px'},
                        {key: 'pad90', name: '90px'}
                    ]
                },
                'pg.blocks.common.padbottom' : {
                    'type' : 'select',
                    'name' : 'Padding bottom',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: [
                        {key: 'pad-bottom0', name: '0px'},
                        {key: 'pad-bottom5', name: '5px'},
                        {key: 'pad-bottom10', name: '10px'},
                        {key: 'pad-bottom15', name: '15px'},
                        {key: 'pad-bottom20', name: '20px'},
                        {key: 'pad-bottom25', name: '25px'},
                        {key: 'pad-bottom30', name: '30px'},
                        {key: 'pad-bottom45', name: '45px'},
                        {key: 'pad-bottom60', name: '60px'},
                        {key: 'pad-bottom90', name: '90px'}
                    ]
                },
                'pg.blocks.common.margintop' : {
                    'type' : 'select',
                    'name' : 'Margin top',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: [
                        {key: 'margin-top0', name: '0px'},
                        {key: 'margin-top5', name: '5px'},
                        {key: 'margin-top10', name: '10px'},
                        {key: 'margin-top15', name: '15px'},
                        {key: 'margin-top20', name: '20px'},
                        {key: 'margin-top25', name: '25px'},
                        {key: 'margin-top30', name: '30px'},
                        {key: 'margin-top45', name: '45px'},
                        {key: 'margin-top60', name: '60px'},
                        {key: 'margin-top90', name: '90px'}
                    ]
                },
                'pg.blocks.common.marginbottom' : {
                    'type' : 'select',
                    'name' : 'Margin bottom',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: [
                        {key: 'margin-bottom0', name: '0px'},
                        {key: 'margin-bottom5', name: '5px'},
                        {key: 'margin-bottom10', name: '10px'},
                        {key: 'margin-bottom15', name: '15px'},
                        {key: 'margin-bottom20', name: '20px'},
                        {key: 'margin-bottom25', name: '25px'},
                        {key: 'margin-bottom30', name: '30px'},
                        {key: 'margin-bottom45', name: '45px'},
                        {key: 'margin-bottom60', name: '60px'},
                        {key: 'margin-bottom90', name: '90px'}
                    ]
                },
                'pg.blocks.common.minheight' : {
                    'type' : 'select',
                    'name' : 'Min height',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: [
                        {key: 'min-height-100px', name: '100px'},
                        {key: 'min-height-200px', name: '200px'},
                        {key: 'min-height-300px', name: '300px'},
                        {key: 'min-height-400px', name: '400px'},
                        {key: 'min-height-500px', name: '500px'},
                        {key: 'min-height-600px', name: '600px'},
                        {key: 'min-height-700px', name: '700px'},
                        {key: 'min-height-800px', name: '800px'}
                    ]
                },
                'pg.blocks.common.minheight-xs' : {
                    'type' : 'select',
                    'name' : 'Min height on mobile',
                    'action' : 'apply_class',
                    show_empty: true,
                    options: [
                        {key: 'min-height-xs-100px', name: '100px'},
                        {key: 'min-height-xs-200px', name: '200px'},
                        {key: 'min-height-xs-300px', name: '300px'},
                        {key: 'min-height-xs-400px', name: '400px'},
                        {key: 'min-height-xs-500px', name: '500px'},
                        {key: 'min-height-xs-600px', name: '600px'},
                        {key: 'min-height-xs-700px', name: '700px'},
                        {key: 'min-height-xs-800px', name: '800px'}
                    ]
                },
                'pg.blocks.common.noshadow' : {
                    type: 'checkbox',
                    name: 'No shadow',
                    action: 'apply_class',
                    value: 'no-shadow'
                },
                'pg.blocks.common.softscroll' : {
                    type: 'checkbox',
                    name: 'Soft scroll #links',
                    action: 'apply_class',
                    value: 'soft-scroll'
                }
            }
        }
    }
}
f.addComponentType(tag);
2 Likes
3

Hi Matjaz,

well what to say? Except of “You’re the best?”

This is so cool - so incredibly quick.

Thanks for this so far (cause I’m sure having to come back to you if you allow).

Cheers

Thomas

1 Like
4

In V3 my plugin doesn’t work anymore - certainly. I have to admit, that I have no idea at all where to start and where to end.

Is there any chance getting quick and unobtrusive help or a reference to look getting it back working?

Only 7 days left for fixing it :slight_smile:

Cheers

Thomas

5

to be precise:

It’s my color-concept, padding/margin and the flexbox concept which broke. I assume having to do with the new UI (which is in all honesty pretty confusing) and its new inbuilt features clashing with my stuff?

Cheers

Thomas