iviparagraphs

v1.0.6

Published

4 years ago

IVi layout framework

0High
0Medium
0Low

tstudio

slider background json zoom drupal webpack

ivislider

"IviParagraphs" is a service for easy creation of Drupal paragraphs

Description

IviParagraphs is a responsive and lightweight collection of customizable Drupal paragraphs.
No jQuery is required.
Accepts info in json format.
You can change css settings very quickly

Package Managers

NPM

npm install iviparagraphs

#####Usage

Just import Class (for example in the js code that you bundle later with webpack):

import IviParagraphs from './iviparagraphs/IviParagraphs';

Add scss to webpack:

 'iviparagraphs': [
            'PATH/iviparagraphs/style.scss'
        ],

Import Drupal paragraphs with appropriate fields

Let`s start!

import IviParagraphs from './iviparagraphs/IviParagraphs';
let paragraphs = new IviParagraphs();
paragraphs.init();

Customize the panel if you want to:

import IviParagraphs from './iviparagraphs/IviParagraphs';
let paragraphs = new IviParagraphs(
    {
        horImage: {
            height: 0.4,
            marginBottom: 5,
            marginTop: 5
        },
        text: {
            span: true,
            spanstyle1: 'blueline',
            spanstyle2: '',
            spanstyle3: 'doubleline',
            marginTop: 5,
            marginBottom: 5,
            style1: {
                main: {
                    backgroundColor: '#70847b',
                    color: '#132836',
                    padding: {
                        responsive: {
                            0: '40px 0',
                            1023: '60px 0',
                            1200: '120px 0'
                        }
                    }
                },
                words: {
                    padding: '0 10px',
                    width: '100%',
                    maxWidth: '800px',
                    display: 'inline-block',
                    marginBottom: '40px',
                    marginTop: {
                        responsive: {
                            0: '20px',
                            1200: '40px'
                        }
                    }
                },
                title: {
                    marginBottom: '20px',
                },
                subtitle: {
                    padding: '0 20px',
                    marginBottom: {
                        responsive: {
                            0: '20px',
                            1200: '40px'
                        }
                    }
                },
                subtitleClass: 'h4',
                titleClass: 'h3',
                textClass: 'high-text',
                linkClass: 'about__btn'
            },
            style2: {

            }

        },
        fsImage: {
            style: {
                title: {
                    color: '#fff',
                }
            }

        }
    }
);
paragraphs.init();

JSON

By address 'rest/api/par/horimg/%' should be accessible JSON: (where % is fid of image)

$file = file_load($fid);
        $uri = $file->uri;

        $img = [];
        $img[] = file_create_url($uri);

        drupal_json_output(array_values($img));

Site Header

If you want to count header height the header must have ID = "header"

Settings

Horizontal image (paragraphs.horImage)

Option | Type | Default | Description ------ | ---- | ------- | ----------- marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top height | integer | 0.4 | Part of screen that should be the height of slider with a deduction of header Height (for example: use 1 if you want to have fullscreen slide)

Text (paragraphs.text)

(accepts 3 styles, one of them - with img bg)

Full-size image (paragraphs.fsimage)

Option | Type | Default | Description ------ | ---- | ------- | ----------- marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top span | boolean | false | define if you want to add a span. If there will be min title and text it will before text. Else it will be after title spanClass | string | '' | Span class arrowClass | string | 'iviparagraphs__fsimage-elementarrow-default' | Down-arrow class bottomOffset | integer | 0 | Defines what offset should be from bottom imageLayer | boolean | false | define if you want to have a transparent black overlay between image and title defaultTitle | boolean | false | define if you want to use default class for title (if is set "true" it will not allow to use titleClass option) titleClass | string | 'h2' | Title class style | object | {} | Object that contain styles for elements

Video (paragraphs.videoPar)

Option | Type | Default | Description ------ | ---- | ------- | ----------- marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top

Gallery (paragraphs.gallery)

Option | Type | Default | Description ------ | ---- | ------- | ----------- marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top style1, style2, style3 | object | - | Objects that contain info for definite style firstDefaultArrows | boolean | true | define if you want to use default arrows style for buttons in the first Gallery firstMousedrag | boolean | true | define if you want the gallery to move with mouse drag firstTouchdrag | boolean | true | define if you want the gallery to move with touch drag firstButtonsToMove | boolean | true | define if you want to control the gallery with buttons wth arrows firstControlKeys | boolean | true | define if you want to control the gallery wth arrows keys

Gallery first style (paragraphs.gallery.style1)

Option | Type | Default | Description ------ | ---- | ------- | ----------- horizontalPadding | integer | 5 | padding left and right for each image height | object | height: {responsive: {0: 250, 767: 300,1023: 450,1200: 550}}, | Height of the gallery for each screen cloneBackground | string | '#fff' | The background of your gallery (or page). It should be defined in order to make the clone of gallery not transparent by moving placeholderBackground | string | '#faf2eb' | Defines the background of the placeholder (when the gallery is being loaded) arrowsPosition | string | 'right' | define where you want to put the control arrows. May be left, right, justify, centre, bottom placeholderSrc | string | '/sites/all/themes/tgtheme/misc/dist/images/iviparagraphs/placeholder.png' | The src of the placeholder (when the gallery is being loaded)

Text and Image (paragraphs.textAndImage)

(accepts 4 styles, one of them - with img bg)

Option | Type | Default | Description ------ | ---- | ------- | ----------- span | boolean | false | define if you want to add a span. If there will be min title and text it will before text. Else it will be after title spanstyle1 | string | '' | Span class for the first style spanstyle2 | string | '' | Span class for the second style spanstyle3 | string | '' | Span class for the third style spanstyle4 | string | '' | Span class for the fourth style defaultStyle | boolean | false | define if you want to use default style. Setting true blocks other customization imageWrapperDefault | boolean | false | define if you want to use default style (half-transparent bg) for text elements in style with image defaultImgWidth | object | defaultImgWidth: {responsive: {0: 100,767: 50}}, | Width of the images for each screen marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top style1, style2, style3, style4 | object | - | Objects that contain styles for all elements main, text, title, subtitle, link, ImgWidth, TextWidth | object | - | Objects in style that contain styles for all particular elements (may be responsive) subtitleClass, titleClass, textClass, linkClass | string | - | may be in every style. Add classes to elements

Two texts (paragraphs.twotexts)

(accepts 4 styles, one of them - with img bg)

Option | Type | Default | Description ------ | ---- | ------- | ----------- span | boolean | false | define if you want to add a span. If there will be min title and text it will before text. Else it will be after title spanstyle1 | string | '' | Span class for the first style spanstyle2 | string | '' | Span class for the second style spanstyle3 | string | '' | Span class for the third style spanstyle4 | string | '' | Span class for the fourth style defaultStyle | boolean | false | define if you want to use default style. Setting true blocks other customization imageWrapperDefault | boolean | false | define if you want to use default style (half-transparent bg) for text elements in style with image narrowWidth | object | narrowWidth: {responsive: {0: '100%',767: '50%',}}, | Width of the narrow part for each screen wideWidth | object | wideWidth: {responsive: {0: '100%',767: '50%'}, | Width of the wide part for each screen marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top zeroElementsPadding | integer | 20 | Defines vertical padding of elements for smaller screens largeElementsPadding | integer | 40 | Defines vertical padding of elements for larger screens style1, style2, style3, style4 | object | - | Objects that contain styles for all elements main, text, title, subtitle, link, textwrapper, widetextwrapper | object | - | Objects in style that contain styles for all particular elements (may be responsive) subtitleClass, titleClass, textClass, linkClass | string | - | may be in every style. Add classes to elements

Three parts (paragraphs.threeparts)

(accepts 4 styles, one of them - with img bg. The width of parts is 33.333%)

Option | Type | Default | Description ------ | ---- | ------- | ----------- marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top style1, style2, style3, style4 | object | - | Objects that contain styles for all elements main, text, title, textwrapper | object | - | Objects in style that contain styles for all particular elements (may be responsive) titleClass, textClass | string | - | may be in every style. Add classes to elements

Vertical image (paragraphs.vertimg)

(1 style)

Option | Type | Default | Description ------ | ---- | ------- | ----------- marginTop | integer | 20 | Defines margin-top marginBottom | integer | 20 | Defines margin-top img, title | object | - | Objects that contain styles for all particular elements (may be responsive) titleClass | - | Adds classes to elements

Horizontal single image (paragraphs.horsingleimg)