Tiuswebs - Constructor Core

Package to create new modules for tiuswebs

Developer tools

Visual Studio Code Extension

If you're developing on VS Code it's recommended to use the Tiuswebs Complete snippets extension for faster development. You can get the extension from the official Visual Studio Code marketplace.

Type of classes

There are a variaty of classes that you can extend in a module:

Component: For any kind of component
Result: For modules that requires to get data from the database (More than 1 element), for example: Show the last sliders, Show the members of a team, etc.
Footer: Only for components that are a footer
Header: Only for components that are a header
Form: Only for form components
MultimediaItem: Only for galleries
ItemsWithExcerpt: Results that Load cruds with title, image, description, excerpt
ItemsWithTitle: Results that Load cruds with title and image
Pagination: Only for components that are a pagination
Instagram: For modules that requires to get data from the Instagram API.

Core information

By default a component will add the background color and padding options, if your module doesnt need it you can disabled it with the next code

public $have_background_color = false;
public $have_paddings = false;

And if you need to have a container you can add it with the next code (by default is disabled)

public $have_container = true;

By default the components are set with overflow classes, if for some reason you don't need it on the component you can disabled it with the next code.

public $have_overflow = false;

If you want to change the default values for this 3 fields

public $default_values = [
	'background_color' => '#f1f1f1',
	'background_image' => '',
	'background_classes' => '',
	'padding_top' => '10px',
	'padding_bottom' => '10px',
	'padding_tailwind' => 'py-24',
	'with_container' => false,
];

Use of paddings when doesnt have a background color

If you have public $have_background_color = false;, then the padding will not be injected automatically on the view. You would need to inject it yourself

<div class="{{$component->getDefaults()['padding_tailwind']}}" style="{{$component->getPaddingStyle()}}">
	<!-- more HTML -->
</div>

Views customization

If you want to add something to the header or footer you need to make use of the push blade method as this example:

@push('header')
	<script src="https://dominio.com/javascript.js" type="text/javascript"></script>
@endpush

@push('scripts-footer')
	<script type="text/javascript">
	    alert('Example');
  	</script>
@endpush

Hide divs (Validation)

If we want to hide a div in case a field its empty, we can use the hide($field) function.

The function accepts the name of a value? (In this case instagram) or can accept also a string with the value.

<a href="{{$values->instagram}}" class="w-8 h-8 rounded-full social-class flex justify-center items-center duration-150 {{$component->hide('instagram')}}">
  <i class="icofont-instagram lg:text-xl"></i>
</a>

So in case if the instragram value its empty, it will hide the div automatically.

Note: On the types this function is added automatically when ussing the css class.

Check links (Validation)

In occasions we would want that if an element doesnt have a link (Or its a #), we dont want to see the link there, so for these cases a new method of validation has been added. The checkLink($field) will work for you.

The function accepts the name of a value? (In this case icon1_link) or can accept also a string with the value.

<a href="{{$values->icon1_link}}" class="{{$component->checkLink('icon1_link')}}">
  {!! $values->icon1 !!}
  <h3 class="title-class">{{$values->icon1_title}}</h3>
</a>

So in case if the link its empty or a #, in the website it will not look as have a link.

Show divs (Customization)

If we want to hide a div based in a boolean value, we can use the show($boolean) function.

The function accepts a boolean value and depending of the value it shows or hide the div

<a href="{{$values->instagram}}" class="w-8 h-8 rounded-full social-class flex justify-center items-center duration-150 {{$component->show($values->show_instagram)}}">
  <i class="icofont-instagram lg:text-xl"></i>
</a>

So in case if the show_instragram value its false, it will hide the div automatically.

If we want to hide and in case its true to send some classes by default you can do something like this:

<div class="carousel-caption {{ $component->show($values->with_captions, 'd-none d-md-block') }}">
    <h5>{{$element->name ?? $element->title}}</h5>
</div>

Component for a template

If you want a component to only be available on one template you can add a variable

public $use_on_template = 'single-documentation books';

And this component will be listed only on pages with that templates

Single Template

And if you want to get the items on the page in case if we are using a single template you can get it using the $component->item variable

<h3 class="content-title-class mb-5">
    {{$component->item->title}}
</h3>
<div class="content-text-class">
    {!! $component->item->description !!}
</div>

Result

Result class works for getting data from the database

How to use on the view

@foreach($component->elements as $item)
  <div class="col-span-4 lg:col-span-2">
    <div class="hover:opacity-70 duration-150" >
      <a href="{{$item->url}}">
        <img class="select-none object-cover w-full object-center h-48 mb-4" src="{{getThumb($item->image_url, 'l')}}" alt="Mask-Group">
      </a>
      <a href="{{$item->url}}">
        <h3 class="text-center font-bold text-2xl text-blue-500">{{$item->title}}</h3>
      </a>
    </div>
  </div>
@endforeach

Variables of the class

default_result: which option will be selected by default
default_sort: how will be sorted the data by default
default_limit: Any integer value, the quantity of elements to show by default (Default is 10)
show_options: If you dont want the user to be able to select a value for result
include_options: If you want the user to be able to select for example jobs and banners, Ex: ['jobs', 'banners', 'categories_products']
exclude_options: If you want the user to dont be able to select documentation for example, Ex: ['documentations']

default_sort values

latest (Default value)
oldest
random

Multimedia Item

Class that works when getting items from Multimedia (General or in a folder). It injects the variable $gallery with the folder info, and $gallery->items with the items.

The variables to customize are the next ones:

public $default_limit = 10; // Quantity of results to get
public $show_limit = true; // Enable the user to change the limit
public $default_sort = 'latest'; // How to sort the items (Latest, oldest, random)

Example of use on the view

@foreach($component->gallery->items as $key => $element)
	<div class="item">
		<div class="p-3">
			<img src="{{getThumb($element->value, 'm')}}" class="max-w-full">
		</div>
	</div>
@endforeach

Footer

This class should be used on all the components that are a footer, by default it will load automatically the menu variable, with one menu and with load the correct category name.

Normal use

If you just want the footer to have one menu you dont need to make any change on the component.

And to use it on the view you need to add the next code:

@isset($component->menu)
	<nav class="block md:hidden">
	  <ul class="space-y-3 sm:space-y-0 flex flex-col sm:flex-row justify-between">
	    @foreach($component->menu->elements as $item)
		    <li>
		      <a class="menu-item-class" href="{{$item->link}}">{{$item->title}}</a>
		    </li>
	    @endforeach
	  </ul>
	</nav>
@endisset

Use columns

It can happen that you need more that one object, for example if you have a footer with 4 columns and you want the user to be able to select menus and maybe more cruds you canfigure it

In the next configuration we set that we want the user to select maximum 4 objects, and can be menus and offices.

public $total_columns = 4;
public $cruds = ['menus', 'offices'];

And in the view you can get the objects with the nex code:

@foreach($component->columns as $element)
	@if($element->type=='Menu')
		<div class="{{$component->getColumnClasses()}}">
			<h6 class="font-bold uppercase mb-3 title-color">{{$element->title}}</h6>
			<ul class="list-unstyled mb-6 mb-md-8 mb-lg-0">
				@foreach($element->elements as $item)
	                <li class="mb-2">
	                    <a href="{{$item->link}}" class="hover:underline links-class">{{$item->title}}</a>
	                </li>
	            @endforeach
			</ul>
		</div>
	@elseif($element->type=='Office')
		<div class="{{$component->getColumnClasses()}} address">
			<h6 class="font-bold uppercase title-color">{{$element->title}}</h6>
			<b class="title-color"><i class="fa fa-map-marker" style="margin-right: 7px;"></i> {{__('Address')}}</b>
			<div class="text-color">
				<p>{{ $element->address->{1} }}</p>
				<p>{{ $element->address->{2} }}</p>
				<p>{{$element->location}}</p>
			</div>
			<b class="title-color"><i class="fa fa-phone"></i> {{__('Phone')}}</b>
			@foreach(collect($element->phones_html)->whereNotNull() as $phone)
				<p class="text-color">{!! $phone !!}</p>
			@endforeach
		</div>
	@endif
@endforeach

The getColumnClasses() comes by default on the Footer component, so you can use it with any problem, and it basically adds the tailwind cluds to show the correct size of the menu, depending of the user configuration.

Header

Works the same that footer but adds the header category

No menu needed

If you don't need a menu by default you can disable it by adding $total_columns = 0 on the component

public $total_columns = 0;

Types

Namespace: use Tiuswebs\ConstructorCore\Types\Button;

The Types are group of inputs that add more that one input, this, to just focus on the element.

How to copy variables

If we want to set one general Type just for styles and want the user customize just one variable for other inputs we can do the next code:

Icon::make('Icon')->default([
	'height' => '70px',
	'color' => '#3B82F6',
])->ignore('icon'),
Icon::make('Icon 1')->copyFrom('icon')->ignore(['height', 'color', 'classes'])->default(['icon' => 'https://cdn2.iconfinder.com/data/icons/music-and-multimedia-5/1000/music_icons_Light_blue-17-512.png']),
Icon::make('Icon 2')->copyFrom('icon')->ignore(['height', 'color', 'classes'])->default(['icon' => 'icofont-music-alt']),

Programatically add CSS classes

If we want to add CSS classes to an Icon type programatically we would use the addExtraClass() function:

	public $icon_class;

	public function load()
	{
		parent::load();
		$icon_class = $this->getIconClass();
	}

	public function fields()
	{
		return [
			Icon::make('Icon', 'column_1_icon')->default([
				'icon' => 'https://cdn.icon-icons.com/icons2/2645/PNG/512/telephone_icon_159818.png',
				'classes' => 'mb-4'
			])->addExtraClass($this->icon_class),
		];
	}

	public function getIconClass($my_condition)
	{
		return $my_condition == "left" ? "mr-auto" : "ml-auto";
	}

List of Types

Badge

Badge::make('Badge');

This type of field will add the next fields

{$name}_text
{$name}_text_color
{$name}_background_color
{$name}_size
{$name}_font
{$name}_weight
{$name}_classes

Returns: None

Button

Button::make('Main Button');
Button::make('Secondary Button');

This type of field will add the next fields

{$name}_text
{$name}_link
{$name}_text_color
{$name}_text_color_hover
{$name}_background_color
{$name}_background_color_hover
{$name}_size
{$name}_font
{$name}_weight
{$name}_classes

Returns: None

Content

Content::make('Content');

This type of field will add the next fields

{$name}_text
{$name}_color
{$name}_size
{$name}_font
{$name}_weight
{$name}_classes

Returns: None

Icon

To put an icon. For now you can put an image, an icon from FontAwesome 4.7, and icons from icofont

Icon::make('Icon');

This type of field will add the next fields

{$name}_icon
{$name}_height
{$name}_color
{$name}_classes

Returns: The icon on html

Input

Input::make('Input');

This type of field will add the next fields

{$name}_text_color
{$name}_background_color
{$name}_border_color
{$name}_size
{$name}_classes

Returns: None

Link

Link::make('Link');

This type of field will add the next fields

{$name}_text
{$name}_link
{$name}_color
{$name}_color_hover
{$name}_size
{$name}_font
{$name}_weight
{$name}_classes

Returns: None

Paragraph

Paragraph::make('Paragraph');

This type of field will add the next fields

{$name}_text
{$name}_color
{$name}_size
{$name}_font
{$name}_weight
{$name}_classes

Returns: None

Title

Title::make('Title');

This type of field will add the next fields

{$name}_text
{$name}_color
{$name}_size
{$name}_font
{$name}_weight
{$name}_classes

Returns: None

Panel

We can think of panels as our own custom Types.

Panel::make('Card', [
	Text::make('Title')->default('Card title');
	Text::make('Text')->default('Card text');
]);

Using the repeat() we give the freedom to the user to choose how many inputs he wants.

Text::make('Total Items')->default(10);

Panel::make('Item', [
	Text::make('Year')->default(2021),
	Text::make('Title')->default('Item title'),
	Text::make('Subtitle')->default('Information'),
])->repeat('total_items');

This will create a default of 10 Items.

Input types

All the inputs use Tiuswebs\ConstructorCore\Inputs namespace

Normal inputs

Inputs that returns the user values

BelongsTo

Accepts crud name, following the laravel conventions of the models and variable name to use it on the view (If empty it will be named office in this case)

BelongsTo::make('Office', 'map');

returns: The selected object

{
  "id": 1,
  "team_id": 1,
  "title": "Tuxtla Gutierrez",
  "address": {
    "1": "1st Avenue Example #75",
    "2": "Downtown",
    "3": "C.P. 40250"
  },
  "location": "Tuxtla Gutierrez, Chiapas",
  "phones": {
    "1": "961-123-4567",
    "2": null,
    "3": null
  },
  "emails": {
    "1": "example@company.com",
    "2": null,
    "3": null
  },
  "social": {
    "facebook": null,
    "twitter": null,
    "instagram": null
  },
  "whatsapp": "+52 961 123 4567",
  "hours": "Monday - Friday from 8 am to 4 pm",
  "lat": "50.1234567",
  "long": "-40.1234567",
  "description": null,
  "image_url": null,
  "variable_2": null,
  "variable_1": null,
  "is_active": 1,
  "created_at": "2020-06-29T18:33:54.000000Z",
  "updated_at": "2021-02-16T22:04:12.000000Z",
  "deleted_at": null,
  "phones_html": {
    "1": "<a href='phone:9611234567'>961-123-4567</a>"
  },
  "emails_html": {
    "1": "<a href='mailto:example@company.com'>example@company.com</a>"
  },
  "icons": "<a href='phone:9611234567' class='fa fa-phone' title='961-123-4567' target='_blank'></a><a href='http://wa.me/+52 961 123 4567' class='fa fa-whatsapp' target='_blank'></a><a href='https://www.google.com/maps/search/?api=1&query=50.1234567,-40.1234567' class='fa fa-map-pin' target='_blank'></a>",
  "whatsapp_html": "<a href='http://wa.me/529611234567' target='_blank'>+52 961 123 4567</a>"
}

Example using the office object in a view:

@if ($component->map->emails->{1})
<div class="flex mb-7">
	<a class="block hover:text-orange-500 transition-colors" href="mailto:{{ $component->map->emails->{1} }}">
		<i class="fa fa-envelope-o text-2xl mr-5" aria-hidden="true"></i>
		<p class="inline-block">{{ $component->map->emails->{1} }}</p>
	</a>
</div>
@endif

Boolean

Boolean::make('Title')->default(false);

returns: The value added by the client on boolean