File manager - Edit - /home/opticamezl/www/newok/builder.tar
Back
elements/grid/element.php 0000644 00000004257 15175623007 0011465 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { $node->tags = []; // Filter tags if (!empty($node->props['filter'])) { foreach ($node->children as $child) { $child->tags = []; foreach (explode(',', $child->props['tags'] ?? '') as $tag) { // Strip tags as precaution if tags are mapped dynamically $tag = strip_tags($tag); if ($key = str_replace(' ', '-', trim($tag))) { $child->tags[$key] = trim($tag); } } $node->tags += $child->tags; } if ( $node->props['filter_order'] === 'manual' && $node->props['filter_order_manual'] ) { $order = array_map( 'strtolower', array_map('trim', explode(',', $node->props['filter_order_manual'])), ); uasort($node->tags, function ($a, $b) use ($order) { $iA = array_search(strtolower($a), $order); $iB = array_search(strtolower($b), $order); return $iA !== false && $iB !== false ? $iA - $iB : ($iA !== false ? -1 : ($iB !== false ? 1 : strnatcmp($a, $b))); }); } else { natsort($node->tags); } if ($node->props['filter_reverse']) { $node->tags = array_reverse($node->tags, true); } } if ($node->props['panel_style'] === 'tile-checked') { app(Metadata::class)->set('script:builder-grid', [ 'src' => Path::get('./app/grid.min.js', __DIR__), 'defer' => true, ]); } }, ], ]; elements/grid/images/icon.svg 0000644 00000000713 15175623007 0012232 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="3" y="3" /> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="17" y="3" /> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="17" y="17" /> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="3" y="17" /> </svg> elements/grid/images/iconSmall.svg 0000644 00000000617 15175623007 0013226 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="6" height="6" fill="none" stroke="#444" x="2.5" y="2.5" /> <rect width="6" height="6" fill="none" stroke="#444" x="11.5" y="2.5" /> <rect width="6" height="6" fill="none" stroke="#444" x="11.5" y="11.5" /> <rect width="6" height="6" fill="none" stroke="#444" x="2.5" y="11.5" /> </svg> elements/grid/templates/template.php 0000644 00000007523 15175623007 0013644 0 ustar 00 <?php // Resets if ($props['panel_link']) { $props['title_link'] = ''; $props['image_link'] = ''; } // Override default settings if (!$props['grid_parallax'] && $props['grid_parallax_justify']) { $props['grid_parallax'] = '0'; } $el = $this->el('div', [ 'uk-filter' => $tags ? [ 'target: .js-filter;', 'animation: {filter_animation};', ] : false, ]); // Grid $grid = $this->el('div', [ 'class' => [ 'uk-grid', 'js-filter' => $tags, 'uk-child-width-[1-{@!grid_default: auto}]{grid_default}', 'uk-child-width-[1-{@!grid_small: auto}]{grid_small}@s', 'uk-child-width-[1-{@!grid_medium: auto}]{grid_medium}@m', 'uk-child-width-[1-{@!grid_large: auto}]{grid_large}@l', 'uk-child-width-[1-{@!grid_xlarge: auto}]{grid_xlarge}@xl', 'uk-flex-center {@grid_column_align} {@!grid_masonry}', 'uk-flex-middle {@grid_row_align} {@!grid_masonry}', $props['grid_column_gap'] == $props['grid_row_gap'] ? 'uk-grid-{grid_column_gap}' : '[uk-grid-column-{grid_column_gap}] [uk-grid-row-{grid_row_gap}]', 'uk-grid-divider {@grid_divider} {@!grid_column_gap: collapse} {@!grid_row_gap: collapse}' => count($children) > 1, 'uk-grid-match {@!grid_masonry}', ], 'uk-grid' => $this->expr([ 'masonry: {grid_masonry};', 'parallax: {grid_parallax};', 'parallax-justify: true; {@grid_parallax_justify}', 'parallax-start: {grid_parallax_start};' => $props['grid_parallax'] || $props['grid_parallax_justify'], 'parallax-end: {grid_parallax_end};' => $props['grid_parallax'] || $props['grid_parallax_justify'], ], $props) ?: count($children) > 1, 'uk-grid-checked' => $props['panel_style'] === 'tile-checked' ? 'uk-tile-default,uk-tile-muted' : false, 'uk-lightbox' => $props['lightbox'] ? [ 'toggle: a[data-type];', 'animation: {lightbox_animation};', 'nav: {lightbox_nav}; slidenav: false;', 'delay-controls: 0;' => $props['lightbox_controls'], 'counter: true;' => $props['lightbox_counter'], 'bg-close: false;' => !$props['lightbox_bg_close'], 'video-autoplay: {lightbox_video_autoplay};', ] : false, ]); $cell = $this->el('div'); // Filter $filter_grid = $this->el('div', [ 'class' => [ 'uk-grid', 'uk-child-width-expand', $props['filter_grid_column_gap'] == $props['filter_grid_row_gap'] ? 'uk-grid-{filter_grid_column_gap}' : '[uk-grid-column-{filter_grid_column_gap}] [uk-grid-row-{filter_grid_row_gap}]', ], 'uk-grid' => count($children) > 1, ]); $filter_cell = $this->el('div', [ 'class' => [ 'uk-width-{filter_grid_width}@{filter_grid_breakpoint}', 'uk-flex-last@{filter_grid_breakpoint} {@filter_position: right}', ], ]); ?> <?= $el($props, $attrs) ?> <?php if ($tags) : ?> <?php if ($filter_horizontal = in_array($props['filter_position'], ['left', 'right'])) : ?> <?= $filter_grid($props) ?> <?= $filter_cell($props) ?> <?php endif ?> <?= $this->render("{$__dir}/template-nav", compact('props')) ?> <?php if ($filter_horizontal) : ?> </div> <div> <?php endif ?> <?= $grid($props) ?> <?php foreach ($children as $child) : ?> <?= $cell($props, ['data-tag' => $child->tags], $builder->render($child, ['element' => $props])) ?> <?php endforeach ?> <?= $grid->end() ?> <?php if ($filter_horizontal) : ?> </div> </div> <?php endif ?> <?php else : ?> <?= $grid($props) ?> <?php foreach ($children as $child) : ?> <div><?= $builder->render($child, ['element' => $props]) ?></div> <?php endforeach ?> <?= $grid->end() ?> <?php endif ?> <?= $el->end() ?> elements/grid/templates/template-nav.php 0000644 00000003607 15175623007 0014425 0 ustar 00 <?php // => gallery $nav = $this->el('ul', [ 'class' => [ 'el-nav', 'uk-{filter_style} {@filter_style: tab}', 'uk-margin[-{filter_margin}] {@filter_position: top}', ], 'uk-scrollspy-class' => in_array($props['animation'], ['none', 'parallax']) || !$props['item_animation'] ? false : (!empty($props['animation']) ? ['uk-animation-{0}' => $props['animation']] : true), ]); $nav_horizontal = [ 'uk-subnav {@filter_style: subnav.*}', 'uk-{filter_style} {@filter_style: subnav-.*}', 'uk-flex-{filter_align: right|center}', 'uk-child-width-expand {@filter_align: justify}', ]; $nav_vertical = [ 'uk-nav uk-nav-{0} [uk-text-left {@text_align}] {@filter_style: subnav.*}' => $props['filter_style_primary'] ? 'primary' : 'default', 'uk-tab-{filter_position} {@filter_style: tab}', ]; $nav_attrs = $props['filter_position'] === 'top' ? [ 'class' => $nav_horizontal, 'uk-margin' => (bool) preg_match('/^subnav/', $props['filter_style']), ] : [ 'class' => $nav_vertical, 'uk-toggle' => [ "cls: {$this->expr(array_merge($nav_vertical, $nav_horizontal), $props)};", 'mode: media;', 'media: @{filter_grid_breakpoint};', ], ]; ?> <?= $nav($props, $nav_attrs) ?> <?php if ($props['filter_all']) : ?> <li class="uk-active" uk-filter-control><a href><?= $this->trans($props['filter_all_label'] ?: 'All') ?></a></li> <?php endif ?> <?php foreach ($tags as $tag => $name) : ?> <li <?= $this->attrs([ 'class' => ['uk-active' => $tag === array_key_first($tags) && !$props['filter_all']], 'uk-filter-control' => json_encode(['filter' => '[data-tag~="' . str_replace('"', '\"', $tag) . '"]']), ]) ?>> <a href><?= $name ?></a> </li> <?php endforeach ?> <?= $nav->end() ?> elements/grid/templates/content.php 0000644 00000000522 15175623007 0013473 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/grid/element.json 0000644 00000172312 15175623007 0011645 0 ustar 00 { "@import": "./element.php", "name": "grid", "title": "Grid", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_image": true, "show_video": true, "show_link": true, "show_hover_image": true, "show_hover_video": true, "grid_default": "1", "grid_medium": "3", "filter_style": "tab", "filter_all": true, "filter_position": "top", "filter_align": "left", "filter_grid_width": "auto", "filter_grid_breakpoint": "m", "lightbox_bg_close": true, "title_hover_style": "reset", "title_element": "h3", "title_align": "top", "title_grid_width": "1-2", "title_grid_breakpoint": "m", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "content_column_breakpoint": "m", "icon_width": 80, "image_align": "top", "image_grid_width": "1-2", "image_grid_breakpoint": "m", "image_svg_color": "emphasis", "link_text": "Read more", "link_style": "default", "margin": "default", "item_animation": true }, "placeholder": { "children": [ { "type": "grid_item", "props": {} }, { "type": "grid_item", "props": {} }, { "type": "grid_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "grid_item", "media": [ { "type": "image", "item": { "title": "title", "image": "src" } }, { "type": "video", "item": { "title": "title", "video": "src" } } ] }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_image": { "type": "checkbox", "text": "Show the image" }, "show_video": { "type": "checkbox", "text": "Show the video" }, "show_link": { "type": "checkbox", "text": "Show the link" }, "show_hover_image": { "type": "checkbox", "text": "Show the hover image" }, "show_hover_video": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the hover video" }, "grid_masonry": { "label": "Masonry", "description": "Create a gap-free masonry layout if grid items have different heights. Pack items into columns with the most room or show them in their natural order. Optionally, use a parallax animation to move columns while scrolling until they justify at the bottom.", "type": "select", "options": { "None": "", "Pack": "pack", "Next": "next" } }, "grid_parallax": { "label": "Parallax", "description": "The parallax animation moves single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels. Alternatively, move columns with different heights until they justify at the bottom.", "type": "range", "attrs": { "min": 0, "max": 600, "step": 10 } }, "grid_parallax_justify": { "type": "checkbox", "text": "Justify columns at the bottom" }, "grid_parallax_start": { "enable": "grid_parallax || grid_parallax_justify" }, "grid_parallax_end": { "enable": "grid_parallax || grid_parallax_justify" }, "grid_column_gap": { "label": "Column Gap", "description": "Set the size of the gap between the grid columns.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "grid_row_gap": { "label": "Row Gap", "description": "Set the size of the gap between the grid rows.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "grid_divider": { "label": "Divider", "description": "Show a divider between grid columns.", "type": "checkbox", "text": "Show dividers", "enable": "grid_column_gap != 'collapse' && grid_row_gap != 'collapse'" }, "grid_column_align": { "label": "Alignment", "type": "checkbox", "text": "Center columns", "enable": "!grid_masonry" }, "grid_row_align": { "description": "Center grid columns horizontally and rows vertically.", "type": "checkbox", "text": "Center rows", "enable": "!grid_masonry" }, "grid_default": { "label": "Phone Portrait", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_small": { "label": "Phone Landscape", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_medium": { "label": "Tablet Landscape", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_large": { "label": "Desktop", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_xlarge": { "label": "Large Screens", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "filter": { "label": "Filter", "type": "checkbox", "text": "Enable filter navigation" }, "filter_animation": { "label": "Animation", "description": "Select an animation that will be applied to the content items when filtering between them.", "type": "select", "options": { "None": "false", "Slide": "", "Fade": "fade", "Delayed Fade": "delayed-fade" }, "enable": "filter" }, "filter_order": { "label": "Navigation Order", "description": "Order the filter navigation alphabetically or by defining the order manually.", "type": "select", "options": { "Alphabetical": "", "Manual": "manual" }, "enable": "filter" }, "filter_reverse": { "type": "checkbox", "text": "Reverse order", "enable": "filter" }, "filter_order_manual": { "label": "Manual Order", "description": "Enter a comma-separated list of tags to manually order the filter navigation.", "enable": "filter && filter_order == 'manual'" }, "filter_style": { "label": "Style", "description": "Select the filter navigation style. The pill and divider styles are only available for horizontal Subnavs.", "type": "select", "options": { "Tabs": "tab", "Subnav (Nav)": "subnav", "Subnav Divider (Nav)": "subnav-divider", "Subnav Pill (Nav)": "subnav-pill" }, "enable": "filter" }, "filter_all": { "label": "All Items", "type": "checkbox", "text": "Show filter control for all items", "enable": "filter" }, "filter_all_label": { "attrs": { "placeholder": "All" }, "enable": "filter && filter_all" }, "filter_position": { "label": "Position", "description": "Position the filter navigation at the top, left or right. A larger style can be applied to left and right navigation.", "type": "select", "options": { "Top": "top", "Left": "left", "Right": "right" }, "enable": "filter" }, "filter_style_primary": { "type": "checkbox", "text": "Primary navigation", "enable": "filter && $match(filter_position, 'left|right') && $match(filter_style, '^subnav')" }, "filter_align": { "label": "Alignment", "description": "Align the filter controls.", "type": "select", "options": { "Left": "left", "Right": "right", "Center": "center", "Justify": "justify" }, "enable": "filter && filter_position == 'top'" }, "filter_margin": { "label": "Margin", "description": "Set the vertical margin.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "filter && filter_position == 'top'" }, "filter_grid_width": { "label": "Grid Width", "description": "Define the width of the filter navigation. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "filter && $match(filter_position, 'left|right')" }, "filter_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between between the filter navigation and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "filter && $match(filter_position, 'left|right')" }, "filter_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "filter && $match(filter_position, 'left|right')" }, "filter_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "filter && $match(filter_position, 'left|right')" }, "lightbox": { "label": "Lightbox", "type": "checkbox", "text": "Enable lightbox gallery" }, "lightbox_controls": { "type": "checkbox", "text": "Show controls always", "enable": "lightbox" }, "lightbox_counter": { "type": "checkbox", "text": "Show counter", "enable": "lightbox" }, "lightbox_bg_close": { "type": "checkbox", "text": "Close on background click", "enable": "lightbox" }, "lightbox_animation": { "label": "Animation", "description": "Select the transition between two slides.", "type": "select", "options": { "Slide": "", "Fade": "fade", "Scale": "scale" }, "enable": "lightbox" }, "lightbox_nav": { "label": "Navigation", "description": "Select the navigation type.", "type": "select", "options": { "Slidenav": "", "Dotnav": "dotnav", "Thumbnav": "thumbnav" }, "enable": "lightbox" }, "lightbox_image_width": { "attrs": { "placeholder": "auto" }, "enable": "lightbox" }, "lightbox_image_height": { "attrs": { "placeholder": "auto" }, "enable": "lightbox" }, "lightbox_image_orientation": { "label": "Image Orientation", "description": "Width and height will be flipped accordingly, if the image is in portrait or landscape format.", "type": "checkbox", "text": "Allow mixed image orientations", "enable": "lightbox" }, "lightbox_video_autoplay": { "label": "Video Autoplay", "description": "Enable autoplay or play a muted inline video without controls.", "type": "select", "options": { "None": "", "Autoplay": "true", "Inline": "inline" }, "enable": "lightbox" }, "lightbox_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "lightbox" }, "title_display": { "label": "Show Title", "description": "Display the title inside the panel, as the lightbox caption or both.", "type": "select", "options": { "Panel + Lightbox": "", "Panel only": "item", "Lightbox only": "lightbox" }, "enable": "show_title && lightbox" }, "content_display": { "label": "Show Content", "description": "Display the content inside the panel, as the lightbox caption or both.", "type": "select", "options": { "Panel + Lightbox": "", "Panel only": "item", "Lightbox only": "lightbox" }, "enable": "show_content && lightbox" }, "panel_style": { "label": "Style", "description": "Select one of the boxed card or tile styles or a blank panel.", "type": "select", "options": { "None": "", "Card Default": "card-default", "Card Primary": "card-primary", "Card Secondary": "card-secondary", "Card Hover": "card-hover", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary", "Tile Checked": "tile-checked" } }, "panel_link": { "label": "Link", "description": "Link the whole panel if a link exists. Optionally, add a hover style.", "type": "checkbox", "text": "Link panel", "enable": "show_link" }, "panel_link_hover": { "type": "checkbox", "text": "Add hover style", "enable": "show_link && panel_link && $match(panel_style, 'card-(default|primary|secondary)|tile-')" }, "panel_padding": { "label": "Padding", "description": "Set the padding.", "type": "select", "options": { "None": "", "Small": "small", "Default": "default", "Large": "large" }, "enable": "panel_style || (!panel_style && (show_image || show_video) && image_align != 'between')" }, "panel_image_no_padding": { "description": "Top, left or right aligned images can be attached to the panel edge. If the image is aligned to the left or right, it will also extend to cover the whole space.", "type": "checkbox", "text": "Align image without padding", "show": "panel_style", "enable": "(show_image || show_video) && image_align != 'between'" }, "item_maxwidth": { "type": "select", "label": "Max Width", "description": "Set the maximum width.", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" } }, "panel_content_width": { "label": "1 Column Content Width", "description": "Set an optional content width which doesn't affect the image if there is just one column.", "type": "select", "options": { "Auto": "", "X-Small": "xsmall", "Small": "small" }, "show": "!panel_style", "enable": "(show_image || show_video) && image_align == 'top' && !panel_padding && !item_maxwidth && (!grid_default || grid_default == '1') && (!grid_small || grid_small == '1') && (!grid_medium || grid_medium == '1') && (!grid_large || grid_large == '1') && (!grid_xlarge || grid_xlarge == '1')" }, "panel_expand": { "label": "Expand Content", "description": "Expand the height of the content to fill the available space in the panel and push the link to the bottom.", "type": "select", "options": { "None": "", "Image": "image", "Content": "content", "Image and Content": "both" }, "enable": "!grid_masonry" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && show_link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && show_link && (title_link || panel_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_align": { "label": "Alignment", "description": "Align the title to the top or left in regards to the content.", "type": "select", "options": { "Top": "top", "Left": "left" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_grid_width": { "label": "Grid Width", "description": "Define the width of the title within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "Expand": "expand", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && title_align == 'left'" }, "title_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the title and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && title_align == 'left'" }, "title_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && title_align == 'left'" }, "title_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && title_align == 'left'" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Above Content": "above-content", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox)" }, "content_align": { "label": "Alignment", "type": "checkbox", "text": "Force left alignment", "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox)" }, "content_dropcap": { "label": "Drop Cap", "description": "Display the first letter of the paragraph as a large initial.", "type": "checkbox", "text": "Enable drop cap", "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox)" }, "content_column": { "label": "Columns", "description": "Set the number of text columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" }, "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox)" }, "content_column_divider": { "description": "Show a divider between text columns.", "type": "checkbox", "text": "Show dividers", "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox) && content_column" }, "content_column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the text columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox) && content_column" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox)" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image || show_video" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image || show_video" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image || show_video" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "(show_image || show_video) && (!panel_style || (panel_style && (!panel_image_no_padding || image_align == 'between')))" }, "image_box_shadow": { "label": "Box Shadow", "description": "Select the image box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "(show_image || show_video) && !panel_style" }, "image_box_decoration": { "label": "Box Decoration", "description": "Select the image box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" }, "enable": "(show_image || show_video) && !panel_style" }, "image_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "(show_image || show_video) && !panel_style && $match(image_box_decoration, '^(default|primary|secondary)$')" }, "image_link": { "label": "Link", "description": "Link the image if a link exists.", "type": "checkbox", "text": "Link image", "enable": "(show_image || show_video) && show_link" }, "image_transition": { "label": "Hover Transition", "description": "Set the hover transition for a linked image.", "type": "select", "options": { "None": "", "Scale Up": "scale-up", "Scale Down": "scale-down" }, "enable": "(show_image || show_video) && show_link && (image_link || panel_link)" }, "image_transition_border": { "type": "checkbox", "text": "Border", "enable": "(show_image || show_video) && show_link && (image_link || panel_link)" }, "image_hover_box_shadow": { "label": "Hover Box Shadow", "description": "Select the image box shadow size on hover.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "show_link && (show_image || show_video) && !panel_style && (image_link || panel_link)" }, "icon_width": { "label": "Icon Width", "description": "Set the icon width.", "enable": "show_image" }, "icon_color": { "label": "Icon Color", "description": "Set the icon color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image" }, "image_align": { "label": "Alignment", "description": "Align the image to the top, left, right or place it between the title and the content.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right", "Between": "between" }, "enable": "show_image || show_video" }, "image_grid_width": { "label": "Grid Width", "description": "Define the width of the image within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right')" }, "image_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the image and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right') && !(panel_image_no_padding && panel_style)" }, "image_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right') && !(panel_image_no_padding && panel_style)" }, "image_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right')" }, "image_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center grid items.", "type": "checkbox", "text": "Center", "enable": "(show_image || show_video) && $match(image_align, 'left|right')" }, "image_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "(show_image || show_video) && (image_align == 'between' || (image_align == 'bottom' && !(panel_style && panel_image_no_padding)))" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "image_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "show_image || show_video" }, "link_target": { "label": "Target", "type": "checkbox", "text": "Open in a new window", "enable": "show_link && !lightbox" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "item_animation": "${builder.item_animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-nav</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>, <code>.el-hover-image</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-nav", ".el-item", ".el-title", ".el-meta", ".el-content", ".el-image", ".el-link", ".el-hover-image" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_image", "show_video", "show_link", "show_hover_image", "show_hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Grid", "type": "group", "divider": true, "fields": [ "grid_masonry", "grid_parallax", "grid_parallax_justify", { "label": "Parallax Start/End", "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the element's height.", "type": "grid", "width": "1-2", "fields": ["grid_parallax_start", "grid_parallax_end"] }, "grid_column_gap", "grid_row_gap", "grid_divider", "grid_column_align", "grid_row_align" ] }, { "label": "Columns", "type": "group", "divider": true, "fields": [ "grid_default", "grid_small", "grid_medium", "grid_large", "grid_xlarge" ] }, { "label": "Filter", "type": "group", "divider": true, "fields": [ "filter", "filter_animation", "filter_order", "filter_reverse", "filter_order_manual", "filter_style", "filter_all", "filter_all_label", "filter_position", "filter_style_primary", "filter_align", "filter_margin", "filter_grid_width", "filter_grid_column_gap", "filter_grid_row_gap", "filter_grid_breakpoint" ] }, { "label": "Lightbox", "type": "group", "divider": true, "fields": [ "lightbox", "lightbox_controls", "lightbox_counter", "lightbox_bg_close", "lightbox_animation", "lightbox_nav", { "label": "Image Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["lightbox_image_width", "lightbox_image_height"] }, "lightbox_image_orientation", "lightbox_video_autoplay", "lightbox_text_color", "title_display", "content_display" ] }, { "label": "Panel", "type": "group", "divider": true, "fields": [ "panel_style", "panel_link", "panel_link_hover", "panel_padding", "panel_image_no_padding", "item_maxwidth", "panel_content_width", "panel_expand" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_align", "title_grid_width", "title_grid_column_gap", "title_grid_row_gap", "title_grid_breakpoint", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": [ "content_style", "content_align", "content_dropcap", "content_column", "content_column_divider", "content_column_breakpoint", "content_margin" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_border", "image_box_shadow", "image_box_decoration", "image_box_decoration_inverse", "image_link", "image_transition", "image_transition_border", "image_hover_box_shadow", "icon_width", "icon_color", "image_align", "image_grid_width", "image_grid_column_gap", "image_grid_row_gap", "image_grid_breakpoint", "image_vertical_align", "image_margin", "image_svg_inline", "image_svg_animate", "image_svg_color", "image_text_color" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_text", "link_aria_label", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "item_animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/grid/app/grid.min.js 0000644 00000001061 15175623007 0012136 0 ustar 00 /*! YOOtheme Pro v4.5.33 | https://yootheme.com */ (function(i,l){"use strict";i.component("GridChecked",{args:"classes",extends:i.component("margin"),props:{classes:"list"},data:{classes:"",margin:"",firstColumn:""},update:{write({rows:n}){var a;for(let e=0;e<n.length;e++)for(let t=0;t<n[0].length;t++){const r=e%2^t%2;let s=(a=n[e][t])==null?void 0:a.firstElementChild;l.isTag(s==null?void 0:s.firstElementChild,"a")&&(s=s.firstElementChild),l.toggleClass(s,this.classes[0],!r),l.toggleClass(s,this.classes[1],r)}},events:["resize"]}})})(UIkit,UIkit.util); elements/grid/updates.php 0000644 00000025664 15175623007 0011506 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.3' => function ($node) { if (Arr::get($node->props, 'show_link') && Arr::get($node->props, 'panel_link') && preg_match('/^card-(default|primary|secondary)|tile-/', Arr::get($node->props, 'panel_style', ''))) { $node->props['panel_link_hover'] = 'true'; } // Remove obsolete props unset( $node->props['icon_ratio'], $node->props['grid_mode'], $node->props['panel_card_size'] ); }, '4.4.0-beta.0.2' => function ($node) { if (str_starts_with(Arr::get($node->props, 'panel_style', ''), 'card-') && Arr::get($node->props, 'panel_image_no_padding') && in_array(Arr::get($node->props, 'image_align'), ['left', 'right'])) { $node->props['panel_expand'] = 'image'; } }, '4.3.4.1' => function ($node) { if (Arr::get($node->props, 'panel_expand')) { $node->props['panel_expand'] = 'content'; } }, '4.3.1' => function ($node) { if (!Arr::get($node->props, 'grid_masonry')) { unset($node->props['grid_masonry']); } }, '4.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'grid_masonry')) { $node->props['grid_masonry'] = 'next'; } }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'panel_link') && Arr::get($node->props, 'css')) { $node->props['css'] = str_replace('.el-item', '.el-item > *', $node->props['css']); } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.7.3.1' => function ($node) { if (empty($node->props['panel_style']) && empty($node->props['panel_padding'])) { foreach ($node->children as $child) { if (str_starts_with($child->props->panel_style ?? '', 'card-')) { $node->props['panel_padding'] = 'default'; break; } } } }, '2.7.0-beta.0.5' => function ($node) { if (str_starts_with($node->props['panel_style'] ?? '', 'card-')) { if (empty($node->props['panel_card_size'])) { $node->props['panel_card_size'] = 'default'; } $node->props['panel_padding'] = $node->props['panel_card_size']; } unset($node->props['panel_card_size']); }, '2.7.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'panel_content_padding' => 'panel_padding', 'panel_size' => 'panel_card_size', 'panel_card_image' => 'panel_image_no_padding', ]); }, '2.4.14.2' => function ($node) { $node->props['animation'] = Arr::get($node->props, 'item_animation'); $node->props['item_animation'] = true; }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'item_maxwidth') === 'xxlarge') { $node->props['item_maxwidth'] = '2xlarge'; } if (Arr::get($node->props, 'title_grid_width') === 'xxlarge') { $node->props['title_grid_width'] = '2xlarge'; } if (Arr::get($node->props, 'image_grid_width') === 'xxlarge') { $node->props['image_grid_width'] = '2xlarge'; } if (!empty($node->props['icon_ratio'])) { $node->props['icon_width'] = round(20 * $node->props['icon_ratio']); unset($node->props['icon_ratio']); } }, '2.0.0-beta.8.1' => function ($node) { Arr::updateKeys($node->props, ['grid_align' => 'grid_column_align']); }, '2.0.0-beta.5.1' => function ($node) { Arr::updateKeys($node->props, [ 'link_type' => function ($value) { if ($value === 'content') { return [ 'title_link' => true, 'image_link' => true, 'link_text' => '', ]; } elseif ($value === 'element') { return [ 'panel_link' => true, 'link_text' => '', ]; } }, ]); }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'divider' => 'grid_divider', 'filter_breakpoint' => 'filter_grid_breakpoint', 'title_breakpoint' => 'title_grid_breakpoint', 'image_breakpoint' => 'image_grid_breakpoint', 'gutter' => fn($value) => ['grid_column_gap' => $value, 'grid_row_gap' => $value], 'filter_gutter' => fn($value) => [ 'filter_grid_column_gap' => $value, 'filter_grid_row_gap' => $value, ], 'title_gutter' => fn($value) => [ 'title_grid_column_gap' => $value, 'title_grid_row_gap' => $value, ], 'image_gutter' => fn($value) => [ 'image_grid_column_gap' => $value, 'image_grid_row_gap' => $value, ], ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_style') === 'heading-hero') { $node->props['title_style'] = 'heading-xlarge'; } if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } if (in_array($style, ['juno', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-medium'; } } if ( in_array($style, [ 'district', 'florence', 'flow', 'nioh-studio', 'summit', 'vision', ]) ) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-large'; } } if ($style == 'lilian') { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-2xlarge'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } if (Arr::get($node->props, 'link_style') === 'panel') { if (Arr::get($node->props, 'panel_style')) { $node->props['link_type'] = 'element'; } else { $node->props['link_type'] = 'content'; } $node->props['link_style'] = 'default'; } Arr::updateKeys($node->props, ['image_card' => 'panel_image_no_padding']); }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_inline_svg' => 'image_svg_inline', 'image_animate_svg' => 'image_svg_animate', ]); }, '1.18.0' => function ($node) { if ( !isset($node->props['grid_parallax']) && Arr::get($node->props, 'grid_mode') === 'parallax' ) { $node->props['grid_parallax'] = Arr::get($node->props, 'grid_parallax_y'); } if ( !isset($node->props['image_box_decoration']) && Arr::get($node->props, 'image_box_shadow_bottom') === true ) { $node->props['image_box_decoration'] = 'shadow'; } if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/overlay-slider_item/templates/content.php 0000644 00000002270 15175623007 0016527 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['video']) : ?> <?php if ($this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['hover_image']) : ?> <img src="<?= $props['hover_image'] ?>" alt> <?php endif ?> <?php if ($props['hover_video']) : ?> <?php if ($this->iframeVideo($props['hover_video'], [], false)) : ?> <iframe src="<?= $props['hover_video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['hover_video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/overlay-slider_item/templates/template-content.php 0000644 00000006464 15175623007 0020351 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-transition-{title_transition} {@overlay_display}', 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', 'uk-flex-1 {@content_expand}' => !$props['content'] && (!$props['meta'] || $element['meta_align'] == 'above-title'), ], ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-transition-{meta_transition} {@overlay_display}', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', 'uk-flex-1 {@content_expand}' => $element['meta_align'] == 'below-content' || (!$props['content'] && ($element['meta_align'] == 'above-content' || ($element['meta_align'] == 'below-title' ))), ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-transition-{content_transition} {@overlay_display}', 'uk-{content_style}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), 'uk-flex-1 {@content_expand}' => !($props['meta'] && $element['meta_align'] == 'below-content'), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', 'uk-transition-{link_transition} {@overlay_display}', // Not on link element to prevent conflicts with link style ], ]); ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> elements/overlay-slider_item/templates/template-link.php 0000644 00000003267 15175623007 0017632 0 ustar 00 <?php $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $element['overlay_link']) { $link_container->attr($link->attrs + [ 'class' => [ // Needs to be child of `uk-light` or `uk-dark` 'uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $element['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($element); } } if ($link && $props['title'] != '' && $element['title_link']) { $props['title'] = $link($element, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && ($props['link_text'] || $element['link_text'])) { if ($element['overlay_link']) { $link = $this->el('div'); } $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', // Keep link style if overlay link 'uk-link {@link_style:} {@overlay_link}', 'uk-text-muted {@link_style: link-muted} {@overlay_link}', ]); } return $link; elements/overlay-slider_item/templates/template-media.php 0000644 00000005110 15175623007 0017741 0 ustar 00 <?php if ($props['video']) { $src = $props['video']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-video.php"; } elseif ($props['image']) { $src = $props['image']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-image.php"; } elseif ($props['hover_video']) { $src = $props['hover_video']; $focal = $props['hover_image_focal_point']; $media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $media = include "{$__dir}/template-image.php"; } // Media $media->attr([ 'class' => [ 'el-image', 'uk-blend-{0}' => $props['media_blend_mode'], 'uk-transition-{image_transition}', 'uk-transition-opaque' => $props['image'] || $props['video'], 'uk-transition-fade {@!image_transition}' => ($props['hover_image'] || $props['hover_video']) && !($props['image'] || $props['video']), 'uk-flex-1 {@image_expand}' ], ]); if ($element['image_expand'] || ($media->name == 'video' && $element['image_width'] && $element['image_height'])) { $media->attr([ 'class' => [ 'uk-object-cover', 'uk-object-{0}' => $focal, ], 'style' => [ // Keep video responsiveness but with new proportions (because video isn't cropped like an image) 'aspect-ratio: {image_width} / {image_height};' => $media->name == 'video', ], ]); } // Hover Media $hover_media = ''; if (($props['hover_image'] || $props['hover_video']) && ($props['image'] || $props['video'])) { if ($props['hover_video']) { $src = $props['hover_video']; $hover_media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $hover_media = include "{$__dir}/template-image.php"; } $hover_media->attr([ 'class' => [ 'el-hover-image', 'uk-transition-{image_transition}', 'uk-transition-fade {@!image_transition}', 'uk-object-{0}' => $props['hover_image_focal_point'], // `uk-cover` already sets object-fit to cover ], 'uk-cover' => true, 'uk-video' => false, // Resets 'alt' => true, // Image 'loading' => false, // Image + Iframe 'preload' => false, // Video ]); } ?> <?= $media($element, '') ?> <?php if ($hover_media) : ?> <?= $hover_media($element, '') ?> <?php endif ?> elements/overlay-slider_item/templates/template-image.php 0000644 00000000463 15175623007 0017752 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $focal, 'thumbnail' => true, ]); return $image; elements/overlay-slider_item/templates/template.php 0000644 00000010324 15175623007 0016667 0 ustar 00 <?php // Override default settings $element['text_color'] = $props['text_color'] ?: $element['text_color']; // New logic shortcuts $element['has_transition'] = $element['overlay_display'] || $element['image_transition'] || $props['hover_image'] || $props['hover_video']; $element['text_color_inverse'] = $element['text_color'] === 'light' ? 'dark' : 'light'; $el = $this->el($props['item_element'] ?: 'div', [ 'class' => [ 'el-item', // Can't use `uk-grid-item-match` because `flex-wrap: warp` creates a multi-line flex container which doesn't shrink the child height if its content is larger 'uk-flex uk-flex-column {@image_expand}', // Needs to be parent of `uk-link-toggle` 'uk-{0}' => !$element['overlay_style'] || $element['overlay_cover'] ? $element['text_color'] : false, // Only for transparent navbar 'uk-inverse-{0}' => $element['overlay_style'] && !$element['overlay_cover'] ? $element['text_color'] : false, ], ]); // Link Container $link_container = $props['link'] && $element['overlay_link'] ? $this->el('a', [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@image_expand}', ], ]) : null; ($link_container ?: $el)->attr([ 'class' => [ 'uk-inline-clip', 'uk-transition-toggle {@has_transition}', ], 'style' => [ "background-color: {$props['media_background']};" => $props['media_background'], ], 'tabindex' => $element['has_transition'] && !($props['link'] && $element['overlay_link']) ? 0 : null, // Needs to be on anchor to have just one focusable toggle when using keyboard navigation 'uk-toggle' => ($props['text_color_hover'] || $element['text_color_hover']) && ((!$element['overlay_style'] && ($props['hover_image'] || $props['hover_video'])) || ($element['overlay_cover'] && $element['overlay_display'] && $element['overlay_transition_background'])) ? [ 'cls: uk-{text_color_inverse} [uk-{text_color}];', 'mode: hover;', 'target: !*; {@overlay_link}' => $props['link'], ] : false, ]); $overlay = $this->el('div', [ 'class' => [ 'uk-{overlay_style}', 'uk-transition-{overlay_transition} {@overlay_display} {@overlay_cover}', 'uk-position-cover {@overlay_cover}', 'uk-position-{overlay_margin} {@overlay_cover}', ], ]); $position = $this->el('div', [ 'class' => [ 'uk-position-{overlay_position} [uk-position-{overlay_margin} {@overlay_style}]', 'uk-transition-{overlay_transition} {@overlay_display}' => !$element['overlay_transition_background'] || !$element['overlay_cover'], 'uk-blend-difference {@text_blend} {@!overlay_style}', 'uk-flex uk-flex-column {@content_expand}' ], ]); $content = $this->el('div', [ 'class' => [ $element['overlay_style'] ? 'uk-overlay' : 'uk-panel', 'uk-padding {@!overlay_padding} {@!overlay_style}', 'uk-padding-{!overlay_padding: |none}', 'uk-padding-remove {@overlay_padding: none} {@overlay_style}', 'uk-width-{overlay_maxwidth} {@!overlay_position: top|bottom}', 'uk-margin-remove-first-child', 'uk-flex-1 uk-flex uk-flex-column {@content_expand}' ], ]); if (!$element['overlay_cover']) { $position->attr($overlay->attrs); } // Link $link = include "{$__dir}/template-link.php"; ?> <?= $el($element, $attrs) ?> <?php if ($link_container) : ?> <?= $link_container($element) ?> <?php endif ?> <?= $this->render("{$__dir}/template-media", compact('props', 'element')) ?> <?php if ($props['media_overlay']) : ?> <div class="uk-position-cover" style="background-color:<?= $props['media_overlay'] ?>"></div> <?php endif ?> <?php if ($element['overlay_cover']) : ?> <?= $overlay($element, '') ?> <?php endif ?> <?php if ($props['title'] != '' || $props['meta'] != '' || $props['content'] != '' || ($props['link'] && ($props['link_text'] || $element['link_text']))) : ?> <?= $position($element, $content($element, $this->render("{$__dir}/template-content", compact('props', 'element', 'link')))) ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container->end() ?> <?php endif ?> <?= $el->end() ?> elements/overlay-slider_item/templates/template-video.php 0000644 00000001422 15175623007 0017772 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'uk-responsive' => true, 'loading' => ['lazy {@image_loading}'], 'title' => $props['video_title'], 'class' => [ 'uk-disabled', ], 'uk-video' => [ 'automute: true;', ], ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'preload' => ['none {@image_loading}'], 'uk-video' => true, ]); } $video->attr([ 'width' => $element['image_width'], 'height' => $element['image_height'], ]); return $video; elements/overlay-slider_item/element.php 0000644 00000002507 15175623007 0014513 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['title', 'meta', 'content', 'link', 'hover_image', 'hover_video'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; } } /** * Auto-correct media rendering for dynamic content * * @var View $view */ $view = app(View::class); foreach (['', 'hover_'] as $prefix) { if ($node->props["{$prefix}image"] && $view->isVideo($node->props["{$prefix}image"])) { $node->props["{$prefix}video"] = $node->props["{$prefix}image"]; $node->props["{$prefix}image"] = null; } elseif ($node->props["{$prefix}video"] && $view->isImage($node->props["{$prefix}video"])) { $node->props["{$prefix}image"] = $node->props["{$prefix}video"]; $node->props["{$prefix}video"] = null; } } // Don't render element if content fields are empty return $node->props['image'] || $node->props['video'] || $node->props['hover_image'] || $node->props['hover_video']; }, ], ]; elements/overlay-slider_item/element.json 0000644 00000020762 15175623007 0014700 0 ustar 00 { "@import": "./element.php", "name": "overlay-slider_item", "title": "Item", "width": 500, "placeholder": { "props": { "image": "${url:~yootheme/theme/assets/images/element-image-placeholder.png}", "video": "", "title": "Title", "meta": "", "content": "", "hover_image": "", "hover_video": "" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "image": { "label": "Image", "type": "image", "source": true, "show": "!video", "altRef": "%name%_alt" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "_media": { "type": "button-panel", "panel": "builder-overlay-slider-item-media", "text": "Edit Settings", "show": "image || video" }, "video_title": { "label": "Video Title", "source": true, "show": "video && $match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "image_alt": { "label": "Image Alt", "source": true, "show": "image && !video" }, "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true, "enable": "link" }, "hover_image": { "label": "Hover Image", "description": "Select an optional image that appears on hover.", "type": "image", "source": true, "show": "!hover_video" }, "hover_video": { "label": "Hover Video", "description": "Select an optional video that appears on hover.", "type": "video", "source": true, "show": "!hover_image" }, "item_element": "${builder.html_element_item}", "text_color": { "label": "Text Color", "description": "Set a different text color for this item.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "text_color_hover": { "type": "checkbox", "text": "Inverse the text color on hover" }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "hover_image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "image", "video", "_media", "video_title", "image_alt", "title", "meta", "content", "link", "link_text", "link_aria_label", "hover_image", "hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Item", "type": "group", "divider": true, "fields": [ "item_element" ] }, { "label": "Overlay", "type": "group", "divider": true, "fields": ["text_color", "text_color_hover"] }, { "label": "Image", "type": "group", "divider": true, "fields": ["image_focal_point"] }, { "label": "Hover Image", "type": "group", "fields": ["hover_image_focal_point"] } ] }, "${builder.advancedItem}" ] } }, "panels": { "builder-overlay-slider-item-media": { "title": "Media", "width": 500, "fields": { "media_background": { "label": "Background Color", "description": "Use the background color in combination with blend modes.", "type": "color" }, "media_blend_mode": { "label": "Blend Mode", "description": "Determine how the image or video will blend with the background color.", "type": "select", "options": { "Normal": "", "Multiply": "multiply", "Screen": "screen", "Overlay": "overlay", "Darken": "darken", "Lighten": "lighten", "Color-dodge": "color-dodge", "Color-burn": "color-burn", "Hard-light": "hard-light", "Soft-light": "soft-light", "Difference": "difference", "Exclusion": "exclusion", "Hue": "hue", "Saturation": "saturation", "Color": "color", "Luminosity": "luminosity" }, "enable": "media_background" }, "media_overlay": { "label": "Overlay Color", "description": "Set an additional transparent overlay to soften the image or video.", "type": "color" } }, "fieldset": { "default": { "fields": ["media_background", "media_blend_mode", "media_overlay"] } } } } } elements/overlay-slider_item/updates.php 0000644 00000000340 15175623007 0014520 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'image') && Arr::get($node->props, 'video')) { unset($node->props['video']); } }, ]; elements/html/images/icon.svg 0000644 00000000573 15175623007 0012255 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="24" height="27" fill="none" stroke="#444" stroke-width="2" x="3" y="2" /> <polyline fill="none" stroke="#444" stroke-width="2" points="18.2,10.6 23.1,15.5 18.2,20.4" /> <polyline fill="none" stroke="#444" stroke-width="2" points="12.1,10.6 7.2,15.5 12.1,20.4" /> </svg> elements/html/images/iconSmall.svg 0000644 00000000530 15175623007 0013237 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="1.01" points="12,7 15,10 12,13" /> <polyline fill="none" stroke="#444" stroke-width="1.01" points="8,7 5,10 8,13" /> <rect width="15" height="18" fill="none" stroke="#444" x="2.5" y="0.5" /> </svg> elements/html/templates/content.php 0000644 00000000143 15175623007 0013511 0 ustar 00 <?php if ($props['content'] != '') : ?> <div> <?= $props['content'] ?> </div> <?php endif ?> elements/html/templates/template.php 0000644 00000000115 15175623007 0013651 0 ustar 00 <?php $el = $this->el('div'); echo $el($props, $attrs, $props['content']); elements/html/element.json 0000644 00000003426 15175623007 0011663 0 ustar 00 { "@import": "./element.php", "name": "html", "title": "Html", "icon": "${url:images/icon.svg}", "group": "basic", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "placeholder": { "props": { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "type": "editor", "editor": "code", "mode": "text/html", "source": true }, "name": "${builder.name}", "source": "${builder.source}", "id": "${builder.id}", "status": "${builder.status}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "type": "editor", "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content"] }, "${builder.advanced}" ] } } } elements/html/element.php 0000644 00000000351 15175623007 0011473 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['content'] != ''; }, ], ]; elements/layout/element.json 0000644 00000000334 15175623007 0012227 0 ustar 00 { "name": "layout", "title": "Layout", "container": true, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" } } elements/layout/templates/content.php 0000644 00000000051 15175623007 0014060 0 ustar 00 <?php echo $builder->render($children); elements/layout/templates/template.php 0000644 00000000635 15175623007 0014231 0 ustar 00 <?php if (isset($prefix)) { echo "<!-- Builder #{$prefix} -->"; } // Add elements inline css above the content to ensure css is present when rendered if (!empty($props['css'])) { echo $this->el('style', [ 'class' => 'uk-margin-remove-adjacent', 'data-id' => !empty($attrs['data-id']) ? "{$attrs['data-id']}-style" : false, ])([], $props['css']); } echo $builder->render($children); elements/layout/updates.php 0000644 00000002265 15175623007 0012066 0 ustar 00 <?php namespace YOOtheme; return [ '2.4.0-beta.0.3' => function ($node) { $rename = [ 'slider' => 'overlay-slider', 'slider_item' => 'overlay-slider_item', 'map_marker' => 'map_item', ]; $apply = function ($node) use (&$apply, $rename) { if (isset($node->type) && !empty($rename[$node->type])) { $node->type = $rename[$node->type]; } if (!empty($node->children)) { array_map($apply, $node->children); } }; $apply($node); }, '2.3.0-beta.0.1' => function ($node) { $rename = [ 'joomla_module' => 'module', 'wordpress_widget' => 'module', 'joomla_position' => 'module_position', 'wordpress_area' => 'module_position', ]; $apply = function ($node) use (&$apply, $rename) { if (isset($node->type) && !empty($rename[$node->type])) { $node->type = $rename[$node->type]; } if (!empty($node->children)) { array_map($apply, $node->children); } }; $apply($node); }, ]; elements/text/updates.php 0000644 00000000667 15175623007 0011541 0 ustar 00 <?php namespace YOOtheme; return [ '2.8.0-beta.0.13' => function ($node) { if (Arr::get($node->props, 'text_size') && !Arr::get($node->props, 'text_style')) { $node->props['text_style'] = Arr::get($node->props, 'text_size'); } unset($node->props['text_size']); }, '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/text/templates/content.php 0000644 00000000133 15175623007 0013530 0 ustar 00 <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> elements/text/templates/template.php 0000644 00000001452 15175623007 0013676 0 ustar 00 <?php $el = $this->el($props['html_element'] ?: 'div', [ 'class' => [ 'uk-panel', 'uk-text-{text_style}', 'uk-text-{text_color}', 'uk-dropcap {@dropcap}', 'uk-column-{column}[@{column_breakpoint}]', 'uk-column-divider {@column} {@column_divider}', ], ]); // Column $breakpoints = ['xl', 'l', 'm', 's', '']; if ($props['column'] && false !== $index = array_search($props['column_breakpoint'], $breakpoints)) { [, $columns] = explode('-', $props['column']); foreach (array_splice($breakpoints, $index + 1, 4) as $breakpoint) { if ($columns < 2) { break; } $el->attr('class', ['uk-column-1-' . (--$columns) . ($breakpoint ? "@{$breakpoint}" : '')]); } } echo $el($props, $attrs, $props['content']); elements/text/element.json 0000644 00000017040 15175623007 0011700 0 ustar 00 { "@import": "./element.php", "name": "text", "title": "Text", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "margin": "default", "column_breakpoint": "m" }, "placeholder": { "props": { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "type": "editor", "source": true }, "dropcap": { "label": "Drop Cap", "description": "Display the first letter of the paragraph as a large initial.", "type": "checkbox", "text": "Enable drop cap" }, "text_style": { "label": "Text Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Meta": "meta", "Lead": "lead", "Small": "small", "Large": "large" } }, "text_color": { "label": "Text Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" } }, "column": { "label": "Columns", "description": "Set the number of text columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" } }, "column_divider": { "description": "Show a divider between text columns.", "type": "checkbox", "text": "Show dividers", "enable": "column" }, "column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the text columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "column" }, "html_element": { "label": "HTML Element", "description": "Define the purpose and structure of the content or give it no semantic meaning.", "type": "select", "options": { "div": "", "address": "address", "aside": "aside", "footer": "footer" } }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content"] }, { "title": "Settings", "fields": [ { "label": "Text", "type": "group", "divider": true, "fields": [ "dropcap", "text_style", "text_color", "column", "column_divider", "column_breakpoint", "html_element" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/text/images/icon.svg 0000644 00000000512 15175623007 0012266 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="2" fill="#444" x="2" y="8" /> <rect width="26" height="2" fill="#444" x="2" y="12" /> <rect width="26" height="2" fill="#444" x="2" y="16" /> <rect width="20" height="2" fill="#444" x="2" y="20" /> </svg> elements/text/images/iconSmall.svg 0000644 00000000511 15175623007 0013256 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="18" height="1" fill="#444" x="1" y="5" /> <rect width="18" height="1" fill="#444" x="1" y="8" /> <rect width="18" height="1" fill="#444" x="1" y="11" /> <rect width="14" height="1" fill="#444" x="1" y="14" /> </svg> elements/text/element.php 0000644 00000000351 15175623007 0011513 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['content'] != ''; }, ], ]; elements/gallery/element.json 0000644 00000160566 15175623007 0012367 0 ustar 00 { "@import": "./element.php", "name": "gallery", "title": "Gallery", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_link": true, "show_hover_image": true, "show_hover_video": true, "grid_default": "1", "grid_medium": "3", "filter_style": "tab", "filter_all": true, "filter_position": "top", "filter_align": "left", "filter_grid_width": "auto", "filter_grid_breakpoint": "m", "lightbox_bg_close": true, "overlay_mode": "cover", "overlay_hover": true, "overlay_style": "overlay-primary", "overlay_position": "center", "text_color": "light", "overlay_transition": "fade", "title_hover_style": "reset", "title_element": "h3", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "link_text": "Read more", "link_style": "default", "text_align": "center", "margin": "default", "item_animation": true }, "placeholder": { "children": [ { "type": "gallery_item", "props": {} }, { "type": "gallery_item", "props": {} }, { "type": "gallery_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "gallery_item", "media": [ { "type": "image", "item": { "title": "title", "image": "src" } }, { "type": "video", "item": { "title": "title", "video": "src" } } ] }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_link": { "type": "checkbox", "text": "Show the link" }, "show_hover_image": { "type": "checkbox", "text": "Show the hover image" }, "show_hover_video": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the hover video" }, "grid_masonry": { "label": "Masonry", "description": "Create a gap-free masonry layout if grid items have different heights. Pack items into columns with the most room or show them in their natural order. Optionally, use a parallax animation to move columns while scrolling until they justify at the bottom.", "type": "select", "options": { "None": "", "Pack": "pack", "Next": "next" } }, "grid_parallax": { "label": "Parallax", "description": "The parallax animation moves single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels. Alternatively, move columns with different heights until they justify at the bottom.", "type": "range", "attrs": { "min": 0, "max": 600, "step": 10 } }, "grid_parallax_justify": { "type": "checkbox", "text": "Justify columns at the bottom" }, "grid_parallax_start": { "enable": "grid_parallax || grid_parallax_justify" }, "grid_parallax_end": { "enable": "grid_parallax || grid_parallax_justify" }, "grid_column_gap": { "label": "Column Gap", "description": "Set the size of the gap between the grid columns.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "grid_row_gap": { "label": "Row Gap", "description": "Set the size of the gap between the grid rows.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "grid_divider": { "label": "Divider", "description": "Show a divider between grid columns.", "type": "checkbox", "text": "Show dividers", "enable": "grid_column_gap != 'collapse' && grid_row_gap != 'collapse'" }, "grid_column_align": { "label": "Alignment", "description": "Center grid columns horizontally and rows vertically.", "type": "checkbox", "text": "Center columns", "enable": "!grid_masonry" }, "grid_row_align": { "type": "checkbox", "text": "Center rows", "enable": "!grid_masonry" }, "grid_default": { "label": "Phone Portrait", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_small": { "label": "Phone Landscape", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_medium": { "label": "Tablet Landscape", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_large": { "label": "Desktop", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "grid_xlarge": { "label": "Large Screens", "description": "Set the number of grid columns for each breakpoint. <i>Inherit</i> refers to the number of columns on the next smaller screen size. <i>Auto</i> expands the columns to the width of their items filling the rows accordingly.", "type": "select", "options": { "Inherit": "", "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6", "Auto": "auto" } }, "filter": { "label": "Filter", "type": "checkbox", "text": "Enable filter navigation" }, "filter_animation": { "label": "Animation", "description": "Select an animation that will be applied to the content items when filtering between them.", "type": "select", "options": { "None": "false", "Slide": "", "Fade": "fade", "Delayed Fade": "delayed-fade" }, "enable": "filter" }, "filter_order": { "label": "Navigation Order", "description": "Order the filter navigation alphabetically or by defining the order manually.", "type": "select", "options": { "Alphabetical": "", "Manual": "manual" }, "enable": "filter" }, "filter_reverse": { "type": "checkbox", "text": "Reverse order", "enable": "filter" }, "filter_order_manual": { "label": "Manual Order", "description": "Enter a comma-separated list of tags to manually order the filter navigation.", "enable": "filter && filter_order == 'manual'" }, "filter_style": { "label": "Style", "description": "Select the filter navigation style. The pill and divider styles are only available for horizontal Subnavs.", "type": "select", "options": { "Tabs": "tab", "Subnav (Nav)": "subnav", "Subnav Divider (Nav)": "subnav-divider", "Subnav Pill (Nav)": "subnav-pill" }, "enable": "filter" }, "filter_all": { "label": "All Items", "type": "checkbox", "text": "Show filter control for all items", "enable": "filter" }, "filter_all_label": { "attrs": { "placeholder": "All" }, "enable": "filter && filter_all" }, "filter_position": { "label": "Position", "description": "Position the filter navigation at the top, left or right. A larger style can be applied to left and right navigation.", "type": "select", "options": { "Top": "top", "Left": "left", "Right": "right" }, "enable": "filter" }, "filter_style_primary": { "type": "checkbox", "text": "Primary navigation", "enable": "filter && $match(filter_position, 'left|right') && $match(filter_style, '^subnav')" }, "filter_align": { "label": "Alignment", "description": "Align the filter controls.", "type": "select", "options": { "Left": "left", "Right": "right", "Center": "center", "Justify": "justify" }, "enable": "filter && filter_position == 'top'" }, "filter_margin": { "label": "Margin", "description": "Set the vertical margin.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "filter && filter_position == 'top'" }, "filter_grid_width": { "label": "Grid Width", "description": "Define the width of the filter navigation. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "filter && $match(filter_position, 'left|right')" }, "filter_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between between the filter navigation and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "filter && $match(filter_position, 'left|right')" }, "filter_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "filter && $match(filter_position, 'left|right')" }, "filter_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "filter && $match(filter_position, 'left|right')" }, "lightbox": { "label": "Lightbox", "type": "checkbox", "text": "Enable lightbox gallery" }, "lightbox_controls": { "type": "checkbox", "text": "Show controls always", "enable": "lightbox" }, "lightbox_counter": { "type": "checkbox", "text": "Show counter", "enable": "lightbox" }, "lightbox_bg_close": { "type": "checkbox", "text": "Close on background click", "enable": "lightbox" }, "lightbox_animation": { "label": "Animation", "description": "Select the transition between two slides.", "type": "select", "options": { "Slide": "", "Fade": "fade", "Scale": "scale" }, "enable": "lightbox" }, "lightbox_nav": { "label": "Navigation", "description": "Select the navigation type.", "type": "select", "options": { "Slidenav": "", "Dotnav": "dotnav", "Thumbnav": "thumbnav" }, "enable": "lightbox" }, "lightbox_image_width": { "attrs": { "placeholder": "auto" }, "enable": "lightbox" }, "lightbox_image_height": { "attrs": { "placeholder": "auto" }, "enable": "lightbox" }, "lightbox_image_orientation": { "label": "Image Orientation", "description": "Width and height will be flipped accordingly, if the image is in portrait or landscape format.", "type": "checkbox", "text": "Allow mixed image orientations", "enable": "lightbox" }, "lightbox_video_autoplay": { "label": "Video Autoplay", "description": "Enable autoplay or play a muted inline video without controls.", "type": "select", "options": { "None": "", "Autoplay": "true", "Inline": "inline" }, "enable": "lightbox" }, "lightbox_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "lightbox" }, "title_display": { "label": "Show Title", "description": "Display the title inside the overlay, as the lightbox caption or both.", "type": "select", "options": { "Overlay + Lightbox": "", "Overlay only": "item", "Lightbox only": "lightbox" }, "enable": "show_title && lightbox" }, "content_display": { "label": "Show Content", "description": "Display the content inside the overlay, as the lightbox caption or both.", "type": "select", "options": { "Overlay + Lightbox": "", "Overlay only": "item", "Lightbox only": "lightbox" }, "enable": "show_content && lightbox" }, "image_expand": { "label": "Height", "description": "Expand the height of the image to fill the available space in the item.", "type": "checkbox", "text": "Expand image", "enable": "!grid_masonry" }, "overlay_link": { "label": "Link", "description": "Link the whole overlay if a link exists.", "type": "checkbox", "text": "Link overlay", "enable": "show_link" }, "item_maxwidth": { "type": "select", "label": "Max Width", "description": "Set the maximum width.", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" } }, "overlay_mode": { "label": "Mode", "description": "When using cover mode, you need to set the text color manually.", "type": "select", "options": { "Cover": "cover", "Caption": "caption" } }, "overlay_hover": { "type": "checkbox", "text": "Display overlay on hover" }, "overlay_transition_background": { "type": "checkbox", "text": "Animate background only", "enable": "overlay_hover && overlay_mode == 'cover' && overlay_style" }, "overlay_style": { "label": "Style", "description": "Select the style for the overlay.", "type": "select", "options": { "None": "", "Overlay Default": "overlay-default", "Overlay Primary": "overlay-primary", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "overlay_position": { "label": "Position", "description": "Select the overlay or content position.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right", "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right", "Center": "center", "Center Left": "center-left", "Center Right": "center-right" } }, "overlay_margin": { "label": "Margin", "description": "Apply a margin between the overlay and the image container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "overlay_style" }, "overlay_padding": { "label": "Padding", "description": "Set the padding between the overlay and its content.", "type": "select", "options": { "Default": "", "Small": "small", "Large": "large", "None": "none" } }, "content_expand": { "label": "Height", "description": "Expand the height of the content to fill the available space in the overlay and push the link to the bottom.", "type": "checkbox", "text": "Expand content" }, "overlay_maxwidth": { "label": "Max Width", "description": "Set the maximum content width.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "!$match(overlay_position, '^(top|bottom)$')" }, "text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" } }, "text_color_hover": { "type": "checkbox", "text": "Inverse the text color on hover", "enable": "!overlay_style && (show_hover_image || show_hover_video) || overlay_style && overlay_mode == 'cover' && overlay_hover && overlay_transition_background" }, "text_blend": { "type": "checkbox", "text": "Blend with image", "enable": "!overlay_style" }, "overlay_transition": { "label": "Transition", "description": "Select a transition for the overlay when it appears on hover.", "type": "select", "options": { "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "overlay_hover" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_orientation": { "label": "Image Orientation", "description": "Landscape and portrait images are centered within the grid cells. Width and height will be flipped when images are resized.", "type": "checkbox", "text": "Allow mixed image orientations" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly" }, "image_transition": { "label": "Transition", "description": "Select an image transition. If the hover image is set, the transition takes place between the two images. If <i>None</i> is selected, the hover image fades in.", "type": "select", "options": { "None (Fade if hover image)": "", "Scale Up": "scale-up", "Scale Down": "scale-down" } }, "image_transition_border": { "type": "checkbox", "text": "Border" }, "image_min_height": { "label": "Min Height", "description": "Use an optional minimum height to prevent images from becoming smaller than the content on small devices.", "type": "range", "attrs": { "min": 200, "max": 500, "step": 20 } }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "!image_transition_border && !image_box_decoration" }, "image_box_shadow": { "label": "Box Shadow", "description": "Select the image box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" } }, "image_hover_box_shadow": { "label": "Hover Box Shadow", "description": "Select the image box shadow size on hover.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" } }, "image_box_decoration": { "label": "Box Decoration", "description": "Select the image box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" } }, "image_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "$match(image_box_decoration, '^(default|primary|secondary)$')" }, "title_transition": { "label": "Transition", "description": "Select a transition for the title when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_title && overlay_hover && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && show_link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox) && show_link && (title_link || overlay_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title && (title_display != 'lightbox' && lightbox || !lightbox)" }, "meta_transition": { "label": "Transition", "description": "Select a transition for the meta text when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_meta && overlay_hover" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "content_transition": { "label": "Transition", "description": "Select a transition for the content when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_content && overlay_hover && (content_display != 'lightbox' && lightbox || !lightbox)" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox)" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content && (content_display != 'lightbox' && lightbox || !lightbox)" }, "link_target": { "label": "Target", "type": "checkbox", "text": "Open in a new window", "enable": "show_link && !lightbox" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "enable": "show_link" }, "link_transition": { "label": "Transition", "description": "Select a transition for the link when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_link && overlay_hover" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "item_animation": "${builder.item_animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-nav</code>, <code>.el-item</code>, <code>.el-image</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-link</code>, <code>.el-hover-image</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-nav", ".el-item", ".el-image", ".el-title", ".el-meta", ".el-content", ".el-link", ".el-hover-image" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_link", "show_hover_image", "show_hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Gallery", "type": "group", "divider": true, "fields": [ "grid_masonry", "grid_parallax", "grid_parallax_justify", { "label": "Parallax Start/End", "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the element's height.", "type": "grid", "width": "1-2", "fields": ["grid_parallax_start", "grid_parallax_end"] }, "grid_column_gap", "grid_row_gap", "grid_divider", "grid_column_align", "grid_row_align" ] }, { "label": "Columns", "type": "group", "divider": true, "fields": [ "grid_default", "grid_small", "grid_medium", "grid_large", "grid_xlarge" ] }, { "label": "Filter", "type": "group", "divider": true, "fields": [ "filter", "filter_animation", "filter_order", "filter_reverse", "filter_order_manual", "filter_style", "filter_all", "filter_all_label", "filter_position", "filter_style_primary", "filter_align", "filter_margin", "filter_grid_width", "filter_grid_column_gap", "filter_grid_row_gap", "filter_grid_breakpoint" ] }, { "label": "Lightbox", "type": "group", "divider": true, "fields": [ "lightbox", "lightbox_controls", "lightbox_counter", "lightbox_bg_close", "lightbox_animation", "lightbox_nav", { "label": "Image Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["lightbox_image_width", "lightbox_image_height"] }, "lightbox_image_orientation", "lightbox_video_autoplay", "lightbox_text_color", "title_display", "content_display" ] }, { "label": "Item", "type": "group", "divider": true, "fields": [ "image_expand", "overlay_link", "item_maxwidth" ] }, { "label": "Overlay", "type": "group", "divider": true, "fields": [ "overlay_mode", "overlay_hover", "overlay_transition_background", "overlay_style", "overlay_position", "overlay_margin", "overlay_padding", "content_expand", "overlay_maxwidth", "text_color", "text_color_hover", "text_blend", "overlay_transition" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_orientation", "image_loading", "image_transition", "image_transition_border", "image_min_height", "image_border", "image_box_shadow", "image_hover_box_shadow", "image_box_decoration", "image_box_decoration_inverse" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_transition", "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_transition", "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_transition", "content_style", "content_margin"] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_text", "link_aria_label", "link_transition", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "item_animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/gallery/images/icon.svg 0000644 00000001347 15175623007 0012750 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="3" y="3" /> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="17" y="3" /> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="3" y="17" /> <rect width="10" height="10" fill="none" stroke="#444" stroke-width="2" x="17" y="17" /> <path fill="none" stroke="#444" stroke-width="2" d="M10,6H6v4" /> <path fill="none" stroke="#444" stroke-width="2" d="M24,10V6H20" /> <path fill="none" stroke="#444" stroke-width="2" d="M20,24h4V20" /> <path fill="none" stroke="#444" stroke-width="2" d="M6,20v4h4" /> </svg> elements/gallery/images/iconSmall.svg 0000644 00000001167 15175623007 0013741 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" d="M6.5 4.5h-2v2" /> <path fill="none" stroke="#444" d="M6.5 15.5h-2v-2" /> <path fill="none" stroke="#444" d="M13.5 15.5h2v-2" /> <path fill="none" stroke="#444" d="M13.5 4.5h2v2" /> <rect width="6" height="6" fill="none" stroke="#444" x="2.5" y="2.5" /> <rect width="6" height="6" fill="none" stroke="#444" x="11.5" y="2.5" /> <rect width="6" height="6" fill="none" stroke="#444" x="11.5" y="11.5" /> <rect width="6" height="6" fill="none" stroke="#444" x="2.5" y="11.5" /> </svg> elements/gallery/element.php 0000644 00000003634 15175623007 0012175 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { $node->tags = []; // Filter tags if (!empty($node->props['filter'])) { foreach ($node->children as $child) { $child->tags = []; foreach (explode(',', $child->props['tags'] ?? '') as $tag) { // Strip tags as precaution if tags are mapped dynamically $tag = strip_tags($tag); if ($key = str_replace(' ', '-', trim($tag))) { $child->tags[$key] = trim($tag); } } $node->tags += $child->tags; } if ( $node->props['filter_order'] === 'manual' && $node->props['filter_order_manual'] ) { $order = array_map( 'strtolower', array_map('trim', explode(',', $node->props['filter_order_manual'])), ); uasort($node->tags, function ($a, $b) use ($order) { $iA = array_search(strtolower($a), $order); $iB = array_search(strtolower($b), $order); return $iA !== false && $iB !== false ? $iA - $iB : ($iA !== false ? -1 : ($iB !== false ? 1 : strnatcmp($a, $b))); }); } else { natsort($node->tags); } if ($node->props['filter_reverse']) { $node->tags = array_reverse($node->tags, true); } } }, ], ]; elements/gallery/updates.php 0000644 00000015312 15175623007 0012205 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset( $node->props['grid_mode'], $node->props['image_box_shadow_bottom'] ); }, '4.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'grid_masonry')) { $node->props['grid_masonry'] = 'next'; } }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'overlay_link') && Arr::get($node->props, 'css')) { $node->props['css'] = str_replace('.el-item', '.el-item > *', $node->props['css']); } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.4.14.2' => function ($node) { $node->props['animation'] = Arr::get($node->props, 'item_animation'); $node->props['item_animation'] = true; }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'item_maxwidth') === 'xxlarge') { $node->props['item_maxwidth'] = '2xlarge'; } }, '2.0.0-beta.8.1' => function ($node) { Arr::updateKeys($node->props, ['grid_align' => 'grid_column_align']); }, '2.0.0-beta.5.1' => function ($node) { Arr::updateKeys($node->props, [ 'link_type' => function ($value) { if ($value === 'content') { return [ 'title_link' => true, 'link_text' => '', ]; } elseif ($value === 'element') { return [ 'overlay_link' => true, 'link_text' => '', ]; } }, ]); }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'divider' => 'grid_divider', 'filter_breakpoint' => 'filter_grid_breakpoint', 'gutter' => fn($value) => ['grid_column_gap' => $value, 'grid_row_gap' => $value], 'filter_gutter' => fn($value) => [ 'filter_grid_column_gap' => $value, 'filter_grid_row_gap' => $value, ], ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } $node->props['link_type'] = 'element'; }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.0' => function ($node) { if ( !isset($node->props['grid_parallax']) && Arr::get($node->props, 'grid_mode') === 'parallax' ) { $node->props['grid_parallax'] = Arr::get($node->props, 'grid_parallax_y'); } if (!isset($node->props['show_hover_image'])) { $node->props['show_hover_image'] = Arr::get($node->props, 'show_image2'); } if ( !isset($node->props['image_box_decoration']) && Arr::get($node->props, 'image_box_shadow_bottom') === true ) { $node->props['image_box_decoration'] = 'shadow'; } if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/gallery/templates/template.php 0000644 00000011427 15175623007 0014354 0 ustar 00 <?php // Resets if ($props['overlay_link']) { $props['title_link'] = ''; } // Override default settings if (!$props['grid_parallax'] && $props['grid_parallax_justify']) { $props['grid_parallax'] = '0'; } if ($props['content_expand']) { if (in_array($props['overlay_position'], ['top', 'bottom'])) { $props['overlay_position'] = 'cover'; } if (in_array($props['overlay_position'], ['top-center', 'center', 'bottom-center'])) { $props['overlay_position'] = 'center-horizontal'; } if (in_array($props['overlay_position'], ['top-left', 'center-left', 'bottom-left'])) { $props['overlay_position'] = 'left'; } if (in_array($props['overlay_position'], ['top-right', 'center-right', 'bottom-right'])) { $props['overlay_position'] = 'right'; } } // New logic shortcuts $props['overlay_cover'] = $props['overlay_style'] && $props['overlay_mode'] == 'cover'; $el = $this->el('div', [ 'uk-filter' => $tags ? [ 'target: .js-filter;', 'animation: {filter_animation};', ] : false, ]); // Grid $grid = $this->el('div', [ 'class' => [ 'uk-grid', 'js-filter' => $tags, 'uk-child-width-[1-{@!grid_default: auto}]{grid_default}', 'uk-child-width-[1-{@!grid_small: auto}]{grid_small}@s', 'uk-child-width-[1-{@!grid_medium: auto}]{grid_medium}@m', 'uk-child-width-[1-{@!grid_large: auto}]{grid_large}@l', 'uk-child-width-[1-{@!grid_xlarge: auto}]{grid_xlarge}@xl', 'uk-flex-center {@grid_column_align} {@!grid_masonry}', 'uk-flex-middle {@grid_row_align} {@!grid_masonry}', $props['grid_column_gap'] == $props['grid_row_gap'] ? 'uk-grid-{grid_column_gap}' : '[uk-grid-column-{grid_column_gap}] [uk-grid-row-{grid_row_gap}]', 'uk-grid-divider {@grid_divider} {@!grid_column_gap: collapse} {@!grid_row_gap:collapse}' => count($children) > 1, ], 'uk-grid' => $this->expr([ 'masonry: {grid_masonry};', 'parallax: {grid_parallax};', 'parallax-justify: true; {@grid_parallax_justify}', 'parallax-start: {grid_parallax_start};' => $props['grid_parallax'] || $props['grid_parallax_justify'], 'parallax-end: {grid_parallax_end};' => $props['grid_parallax'] || $props['grid_parallax_justify'], ], $props) ?: count($children) > 1, 'uk-lightbox' => $props['lightbox'] ? [ 'toggle: a[data-type];', 'animation: {lightbox_animation};', 'nav: {lightbox_nav}; slidenav: false;', 'delay-controls: 0;' => $props['lightbox_controls'], 'counter: true;' => $props['lightbox_counter'], 'bg-close: false;' => !$props['lightbox_bg_close'], 'video-autoplay: {lightbox_video_autoplay};', ] : false, ]); $cell = $this->el('div', [ 'class' => [ 'uk-flex uk-flex-center uk-flex-middle {@image_orientation}', // Can't use `uk-grid-match` on the parent because `flex-wrap: warp` creates a multi-line flex container which doesn't shrink the child height if its content is larger 'uk-flex {@!grid_masonry} {@image_expand}', 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]] {@!grid_masonry} {@image_expand}', ], ]); // Filter $filter_grid = $this->el('div', [ 'class' => [ 'uk-grid', 'uk-child-width-expand', $props['filter_grid_column_gap'] == $props['filter_grid_row_gap'] ? 'uk-grid-{filter_grid_column_gap}' : '[uk-grid-column-{filter_grid_column_gap}] [uk-grid-row-{filter_grid_row_gap}]', ], 'uk-grid' => count($children) > 1, ]); $filter_cell = $this->el('div', [ 'class' => [ 'uk-width-{filter_grid_width}@{filter_grid_breakpoint}', 'uk-flex-last@{filter_grid_breakpoint} {@filter_position: right}', ], ]); ?> <?= $el($props, $attrs) ?> <?php if ($tags) : ?> <?php if ($filter_horizontal = in_array($props['filter_position'], ['left', 'right'])) : ?> <?= $filter_grid($props) ?> <?= $filter_cell($props) ?> <?php endif ?> <?= $this->render("{$__dir}/template-nav", compact('props')) ?> <?php if ($filter_horizontal) : ?> </div> <div> <?php endif ?> <?= $grid($props) ?> <?php foreach ($children as $child) : ?> <?= $cell($props, ['data-tag' => $child->tags], $builder->render($child, ['element' => $props])) ?> <?php endforeach ?> <?= $grid->end() ?> <?php if ($filter_horizontal) : ?> </div> </div> <?php endif ?> <?php else : ?> <?= $grid($props) ?> <?php foreach ($children as $child) : ?> <?= $cell($props, $builder->render($child, ['element' => $props])) ?> <?php endforeach ?> <?= $grid->end() ?> <?php endif ?> <?= $el->end() ?> elements/gallery/templates/template-nav.php 0000644 00000003604 15175623007 0015134 0 ustar 00 <?php // => grid $nav = $this->el('ul', [ 'class' => [ 'el-nav', 'uk-{filter_style} {@filter_style: tab}', 'uk-margin[-{filter_margin}] {@filter_position: top}', ], 'uk-scrollspy-class' => in_array($props['animation'], ['none', 'parallax']) || !$props['item_animation'] ? false : (!empty($props['animation']) ? ['uk-animation-{0}' => $props['animation']] : true), ]); $nav_horizontal = [ 'uk-subnav {@filter_style: subnav.*}', 'uk-{filter_style} {@filter_style: subnav-.*}', 'uk-flex-{filter_align: right|center}', 'uk-child-width-expand {@filter_align: justify}', ]; $nav_vertical = [ 'uk-nav uk-nav-{0} [uk-text-left {@text_align}] {@filter_style: subnav.*}' => $props['filter_style_primary'] ? 'primary' : 'default', 'uk-tab-{filter_position} {@filter_style: tab}', ]; $nav_attrs = $props['filter_position'] === 'top' ? [ 'class' => $nav_horizontal, 'uk-margin' => (bool) preg_match('/^subnav/', $props['filter_style']), ] : [ 'class' => $nav_vertical, 'uk-toggle' => [ "cls: {$this->expr(array_merge($nav_vertical, $nav_horizontal), $props)};", 'mode: media;', 'media: @{filter_grid_breakpoint};', ], ]; ?> <?= $nav($props, $nav_attrs) ?> <?php if ($props['filter_all']) : ?> <li class="uk-active" uk-filter-control><a href><?= $this->trans($props['filter_all_label'] ?: 'All') ?></a></li> <?php endif ?> <?php foreach ($tags as $tag => $name) : ?> <li <?= $this->attrs([ 'class' => ['uk-active' => $tag === array_key_first($tags) && !$props['filter_all']], 'uk-filter-control' => json_encode(['filter' => '[data-tag~="' . str_replace('"', '\"', $tag) . '"]']), ]) ?>> <a href><?= $name ?></a> </li> <?php endforeach ?> <?= $nav->end() ?> elements/gallery/templates/content.php 0000644 00000000522 15175623007 0014205 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/column/element.json 0000644 00000037561 15175623007 0012223 0 ustar 00 { "@import": "./element.php", "name": "column", "title": "Column", "container": true, "width": 500, "defaults": { "position_sticky_breakpoint": "m", "image_position": "center-center" }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "image": { "label": "Image", "description": "Upload a background image.", "type": "image", "source": true, "show": "!video" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "_media": { "type": "button-panel", "panel": "builder-column-media", "text": "Edit Settings", "show": "image || video" }, "video_title": { "label": "Video Title", "source": true, "show": "video && $match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "vertical_align": { "label": "Vertical Alignment", "description": "Vertically align the elements in the column.", "type": "select", "options": { "Top": "", "Middle": "middle", "Bottom": "bottom" } }, "style": { "label": "Style", "type": "select", "options": { "None": "", "Card Default": "card-default", "Card Primary": "card-primary", "Card Secondary": "card-secondary", "Card Hover": "card-hover", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "preserve_color": { "type": "checkbox", "text": "Preserve text color", "enable": "$match(style, 'tile-')" }, "background_color": { "label": "Background Color", "type": "color", "enable": "!style && !background_parallax_background" }, "_background_parallax_button": { "description": "Define a custom background color or a color parallax animation instead of using a predefined style.", "type": "button-panel", "text": "Edit Parallax", "panel": "background-parallax", "enable": "!style" }, "text_color": { "label": "Text Color", "description": "Force a light or dark color for text, buttons and controls on the image or video background.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "!style || ($match(style, 'tile-') && (image || video))" }, "padding": { "label": "Padding", "description": "Set the padding.", "type": "select", "options": { "Default": "", "X-Small": "xsmall", "Small": "small", "Large": "large", "X-Large": "xlarge", "None": "none" }, "enable": "style || background_color || background_parallax_background || image || video" }, "html_element": "${builder.html_element}", "position_sticky": { "label": "Position Sticky", "type": "select", "options": { "None": "", "Elements within Column": "column", "Column within Row": "row", "Column within Section": "section" } }, "position_blend": { "description": "Stick the column or its elements to the top of the viewport while scrolling down. They will stop being sticky when they reach the bottom of the containing column, row or section. Optionally, blend all elements with the page content.", "type": "checkbox", "text": "Blend with page content", "enable": "position_sticky" }, "position_sticky_offset": { "label": "Top Offset", "attrs": { "placeholder": "0" }, "enable": "position_sticky" }, "position_sticky_offset_end": { "label": "Bottom Offset", "attrs": { "placeholder": "0" }, "enable": "position_sticky" }, "position_sticky_breakpoint": { "label": "Position Sticky Breakpoint", "description": "Make the column or its elements sticky only from this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "position_sticky" }, "prevent_collapse": { "label": "Empty Dynamic Content", "description": "Don't collapse the column if dynamically loaded content is empty.", "type": "checkbox", "text": "Don't collapse column" }, "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-column</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-column"] } } }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["image", "video", "_media", "video_title"] }, { "title": "Settings", "fields": [ "vertical_align", "style", "preserve_color", "text_color", "padding", "html_element", "position_sticky", "position_blend", { "description": "Set the sticky top offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh - 50%</code>. Percent relates to the column's height. Set a bottom offset if the sticky content is larger than the viewport.", "name": "_position_sticky_offset", "type": "grid", "width": "1-2", "fields": ["position_sticky_offset", "position_sticky_offset_end"] }, "position_sticky_breakpoint", "prevent_collapse" ] }, { "title": "Advanced", "fields": ["source", "id", "class", "attributes", "css"] } ] } }, "panels": { "builder-column-media": { "title": "Image/Video", "width": 500, "fields": { "image_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" } }, "image_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" } }, "video_width": { "label": "Width", "type": "number" }, "video_height": { "label": "Height", "type": "number" }, "media_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "show": "image && !video" }, "image_size": { "label": "Image Size", "description": "Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color.", "type": "select", "options": { "Auto": "", "Cover": "cover", "Contain": "contain", "Width 100%": "width-1-1", "Height 100%": "height-1-1" }, "show": "image && !video" }, "image_position": { "label": "Image Position", "description": "Set the initial background position, relative to the section layer.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "center-center", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "show": "image && !video" }, "image_effect": { "label": "Image Effect", "type": "select", "options": { "None": "", "Parallax": "parallax", "Fixed": "fixed" }, "show": "image && !video" }, "_image_parallax_button": { "description": "Add a parallax effect or fix the background with regard to the viewport while scrolling.", "type": "button-panel", "text": "Edit Parallax", "panel": "image-parallax", "show": "image && !video", "enable": "image_effect == 'parallax'" }, "media_visibility": { "label": "Visibility", "description": "Display the image or video only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" } }, "media_background": { "label": "Background Color", "description": "Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn't cover the whole section.", "type": "color" }, "media_blend_mode": { "label": "Blend Mode", "description": "Determine how the image or video will blend with the background color.", "type": "select", "options": { "Normal": "", "Multiply": "multiply", "Screen": "screen", "Overlay": "overlay", "Darken": "darken", "Lighten": "lighten", "Color-dodge": "color-dodge", "Color-burn": "color-burn", "Hard-light": "hard-light", "Soft-light": "soft-light", "Difference": "difference", "Exclusion": "exclusion", "Hue": "hue", "Saturation": "saturation", "Color": "color", "Luminosity": "luminosity" } }, "media_overlay": { "label": "Overlay Color", "type": "gradient", "internal": "media_overlay_gradient" }, "_media_overlay_parallax_button": { "description": "Set an additional transparent overlay to soften the image or video.", "type": "button-panel", "text": "Edit Parallax", "panel": "media-overlay-parallax", "enable": "media_overlay" } }, "fieldset": { "default": { "fields": [ { "description": "Set the width and height in pixels. Setting just one value preserves the original proportions. The image will be resized and cropped automatically.", "name": "_image_dimension", "type": "grid", "width": "1-2", "show": "image && !video", "fields": ["image_width", "image_height"] }, { "description": "Set the video dimensions.", "name": "_video_dimension", "type": "grid", "width": "1-2", "show": "video && !image", "fields": ["video_width", "video_height"] }, "media_focal_point", "image_loading", "image_size", "image_position", "image_effect", "_image_parallax_button", "media_visibility", "media_background", "media_blend_mode", "media_overlay", "_media_overlay_parallax_button" ] } } } } } elements/column/templates/template.php 0000644 00000022607 15175623007 0014214 0 ustar 00 <?php // Initialize prop if not set $props += [ 'media_overlay_gradient' => null, 'background_parallax_background' => null, ]; // Resets if (str_starts_with($props['style'] ?? '', 'card-')) { if ($props['padding'] == 'xsmall') { $props['padding'] = 'small'; } if ($props['padding'] == 'xlarge') { $props['padding'] = 'large'; } } if ($props['row_height'] != 'viewport' || $props['row_height_viewport'] > 100) { $props['row_height_offset_top'] = false; } if ($props['image']) { $props['video'] = false; } // New logic shortcuts $props['has_panel'] = $props['style'] || $props['background_color'] || $props['background_parallax_background'] || $props['image'] || $props['video'] || in_array($props['position_sticky'], ['row', 'section']) || $props['row_height']; $props['has_overlay'] = ($props['image'] || $props['video']) && ($props['media_overlay'] || $props['media_overlay_gradient']); // Cell $el = $this->el($props['html_element'] ?: 'div', [ 'class' => [ // Match child height 'uk-grid-item-match' => ($props['vertical_align'] || $props['style'] || $props['background_color'] || $props['background_parallax_background'] || $props['image'] || $props['video'] || !empty($props['element_absolute'])) && !in_array($props['position_sticky'], ['row', 'section']) && !$props['row_height'], // Vertical alignment 'uk-flex-{vertical_align} {@!has_panel}', // Child expand to column height 'uk-flex uk-flex-column {@child_height_expand} {@!has_panel}', // Sticky 'js-sticky {@position_sticky: column} {@!has_panel}', // Text color 'uk-{text_color}' => !$props['style'] || (preg_match('/^tile-/', $props['style']) && ($props['image'] || $props['video'])), // Breakpoint widths 'uk-width-1-1 {@!width_default} {@!width_small} {@!width_medium} {@!width_large} {@!width_xlarge}', // Make sure at least one `uk-width` is set 'uk-width-{width_default}', 'uk-width-{width_small}@s', 'uk-width-{width_medium}@m', 'uk-width-{width_large}@l', 'uk-width-{width_xlarge}@xl', // Order first 'uk-flex-first {@order_first: xs}', 'uk-flex-first@{order_first} {@!order_first: xs}', ], // Row parallax 'style' => [ 'align-self: stretch; {@row_parallax} {@position_sticky}', ], ]); // Panel: Style / Background / Image / Video / Sticky / Row Height $panel = $props['has_panel'] ? $this->el('div', [ 'class' => [ 'uk-{style} [uk-card {@style: card-.*}] [uk-card-{!padding: |none} {@style: card-.*}]', // Match child height 'uk-flex {@image}', // Clip video 'uk-position-relative {@video} {@!image}' => !$this->iframeVideo($props['video']), 'uk-cover-container {@video} {@!image}' => $this->iframeVideo($props['video']), // Preserve color 'uk-preserve-color {@style: tile-.*}' => $props['preserve_color'] || ($props['text_color'] && ($props['image'] || $props['video'])), // Height Viewport 'uk-height-viewport {@row_height: viewport} {@!row_height_offset_top} {@row_height_viewport: |100}', 'uk-height-viewport-{0} {@row_height: viewport} {@!row_height_offset_top} {@row_height_viewport: 200|300|400}' => (int) $props['row_height_viewport'] / 100, ], 'style' => [ // Video Background 'background-color: {media_background}; {@video}', 'background-color: {background_color}; {@!media_background} {@!video} {@!style}', // Height Viewport 'min-height: {!row_height_viewport: |100|200|300|400}vh {@row_height: viewport} {@!row_height_offset_top}', 'min-height: {0}px {@row_height: pixels}' => $props['row_height_viewport'] ?: 100, ], // Height Viewport 'uk-height-viewport' => $props['row_height'] == 'viewport' && $props['row_height_offset_top'] ? [ 'offset-top: {0};' => in_array($props['position_sticky'], ['row', 'section']) ? '!*' : 'true', 'offset-bottom: {0};' => $props['row_height_viewport'] && $props['row_height_viewport'] < 100 ? 100 - (int) $props['row_height_viewport'] : false, ] : false, ]) : null; if (!$props['style'] && $bgParallax = $this->parallaxOptions($props, 'background_', ['background'])) { $panel->attr('uk-parallax', $bgParallax); } if (in_array($props['position_sticky'], ['row', 'section'])) { $panel->attr([ 'class' => [ // Force sticky below sticky navbar 'uk-position-z-index', 'uk-blend-difference {@position_blend}', ], 'uk-sticky' => $this->expr([ 'offset: {position_sticky_offset};', 'offset-end: {position_sticky_offset_end};', 'end: !.tm-grid-expand; {@position_sticky: row}', 'end: !.uk-section; {@position_sticky: section}', 'media: @{position_sticky_breakpoint};', ], $props) ?: true, ]); } // Image $image = $props['image'] ? $this->el('div', $this->bgImage($props['image'], [ 'width' => $props['image_width'], 'height' => $props['image_height'], 'focal_point' => $props['media_focal_point'], 'loading' => $props['image_loading'] ? 'eager' : null, 'size' => $props['image_size'], 'position' => $props['image_position'], 'visibility' => $props['media_visibility'], 'blend_mode' => $props['media_blend_mode'], 'background' => $props['media_background'], 'effect' => $props['image_effect'] != 'parallax' ? $props['image_effect'] : '', ])) : null; if ($image && $props['image_effect'] == 'parallax' && $imageParallax = $this->parallaxOptions($props, 'image_', ['bgx', 'bgy'])) { $image->attr('uk-parallax', $imageParallax); } // `has_panel` with padding if ($props['style'] || $props['background_color'] || $props['background_parallax_background'] || $props['image'] || $props['video']) { ($props['image'] ? $image : $panel)->attr('class', [ // Padding and position context for the overlay 'uk-tile {@!style: card-.*} [uk-tile-{!padding: |none}]', // Also padding if no style 'uk-card-body {@style: card-.*}', // Needed if height matches parent 'uk-width-1-1 {@image}', // Padding 'uk-padding-remove {@padding: none}', ]); // `has_panel` without padding } elseif (in_array($props['position_sticky'], ['row', 'section']) || $props['row_height']) { $panel->attr('class', [ // Remove child margin && position context for the overlay 'uk-panel', ]); } if ($props['has_panel']) { ($props['image'] ? $image : $panel)->attr('class', [ 'js-sticky {@position_sticky: column}', // Vertical alignment 'uk-flex uk-flex-{vertical_align}', // Child expand to column height 'uk-flex uk-flex-column {@child_height_expand}', ]); } // Video $video = $props['video'] ? include "{$__dir}/template-video.php" : null; // Overlay $overlay = $props['has_overlay'] ? $this->el('div', [ 'class' => ['uk-position-cover'], 'style' => [ 'background-color: {media_overlay};', // `background-clip` fixes sub-pixel issue 'background-image: {media_overlay_gradient}; background-clip: padding-box;', ], ]) : null; if (($props['media_overlay'] || $props['media_overlay_gradient']) && ($props['image'] || $props['video']) && $mediaOverlayParallax = $this->parallaxOptions($props, 'media_overlay_', ['opacity'])) { $overlay->attr('uk-parallax', $mediaOverlayParallax); } // Align elements as block. // Make sure overlay or video are always below content. // Add position context considering any tile padding. $container = $props['vertical_align'] || $props['has_overlay'] || $props['video'] || !empty($props['element_absolute']) ? $this->el('div', [ 'class' => [ 'uk-panel uk-width-1-1', // Child expand to column height 'uk-flex-1 uk-flex uk-flex-column {@child_height_expand}', ], ]) : null; // Sticky $sticky = $props['position_sticky'] == 'column' ? $this->el('div', [ 'class' => [ 'uk-panel uk-position-z-index', // Force sticky below sticky navbar 'uk-blend-difference {@position_blend}', ], 'uk-sticky' => $this->expr([ 'offset: {position_sticky_offset};', 'offset-end: {position_sticky_offset_end};', 'end: !.js-sticky;', // Selects panel, so tile padding is considered 'media: @{position_sticky_breakpoint};', ], $props) ?: true, ]) : null; ?> <?= $el($props, $attrs) ?> <?php if ($panel) : ?> <?= $panel($props) ?> <?php endif ?> <?php if ($image) : ?> <?= $image($props) ?> <?php endif ?> <?php if ($video) : ?> <?= $video($props, '') ?> <?php endif ?> <?php if ($overlay) : ?> <?= $overlay($props, '') ?> <?php endif ?> <?php if ($container) : ?> <?= $container($props) ?> <?php endif ?> <?php if ($sticky) : ?> <?= $sticky($props) ?> <?php endif ?> <?= $builder->render($children) ?> <?php if ($sticky) : ?> <?= $sticky->end() ?> <?php endif ?> <?php if ($container) : ?> <?= $container->end() ?> <?php endif ?> <?php if ($image) : ?> <?= $image->end() ?> <?php endif ?> <?php if ($panel) : ?> <?= $panel->end() ?> <?php endif ?> <?= $el->end() ?> elements/column/templates/template-video.php 0000644 00000001423 15175623007 0015311 0 ustar 00 <?php if ($iframe = $this->iframeVideo($props['video'])) { $video = $this->el('iframe', [ 'class' => [ 'uk-disabled', ], 'src' => $iframe, 'title' => $props['video_title'], ]); } else { $video = $this->el('video', [ 'src' => $props['video'], 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'class' => [ 'uk-object-{media_focal_point}', ], ]); } $video->attr([ 'width' => $props['video_width'], 'height' => $props['video_height'], 'class' => [ 'uk-blend-{media_blend_mode}', 'uk-visible@{media_visibility}', ], 'uk-cover' => true, ]); return $video; elements/column/templates/content.php 0000644 00000000051 15175623007 0014040 0 ustar 00 <?php echo $builder->render($children); elements/column/element.php 0000644 00000001537 15175623007 0012033 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { foreach (['height', 'height_viewport', 'height_offset_top', 'parallax'] as $prop) { $node->props["row_{$prop}"] = $params['parent']->props[$prop] ?? null; } foreach ($node->children as $child) { if ( !empty($child->props['height_expand']) && (!$node->props['position_sticky'] || (in_array($node->props['position_sticky'], ['row', 'section']) && $node->props['row_height'])) ) { $node->props['child_height_expand'] = true; $node->props['vertical_align'] = ''; break; } } }, ], ]; elements/column/updates.php 0000644 00000004630 15175623007 0012044 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset($node->props['widths']); }, '4.3.0-beta.0.3' => function ($node, $params) { Arr::updateKeys($node->props, ['image_focal_point' => 'media_focal_point']); }, '4.0.0-beta.9.1' => function ($node) { $style = Arr::get($node->props, 'style') ?: ''; if (preg_match('/^tile-(tile|card)-/', $style)) { $node->props['style'] = substr($style, 5); } }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'style')) { $node->props['style'] = "tile-{$node->props['style']}"; } }, '3.0.5.1' => function ($node) { if ( Arr::get($node->props, 'image_effect') == 'parallax' && !is_numeric(Arr::get($node->props, 'image_parallax_easing')) ) { Arr::set($node->props, 'image_parallax_easing', '1'); } }, '2.8.0-beta.0.3' => function ($node) { foreach (['bgx', 'bgy'] as $prop) { $key = "image_parallax_{$prop}"; $start = Arr::get($node->props, "{$key}_start", ''); $end = Arr::get($node->props, "{$key}_end", ''); if ($start != '' || $end != '') { Arr::set( $node->props, $key, implode(',', [$start != '' ? $start : 0, $end != '' ? $end : 0]), ); } Arr::del($node->props, "{$key}_start"); Arr::del($node->props, "{$key}_end"); } }, '2.8.0-beta.0.1' => function ($node) { if (isset($node->props['position_sticky'])) { $node->props['position_sticky'] = 'column'; } }, '2.4.0-beta.0.2' => function ($node) { Arr::updateKeys($node->props, ['image_visibility' => 'media_visibility']); }, '2.1.0-beta.2.1' => function ($node) { if (in_array(Arr::get($node->props, 'style'), ['primary', 'secondary'])) { $node->props['text_color'] = ''; } }, '1.22.0-beta.0.1' => function ($node) { unset($node->props['widths']); }, '1.18.0' => function ($node) { if ( !isset($node->props['vertical_align']) && Arr::get($node->props, 'vertical_align') === true ) { $node->props['vertical_align'] = 'middle'; } }, ]; elements/overlay/templates/template-video.php 0000644 00000001416 15175623007 0015477 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'uk-responsive' => true, 'loading' => ['lazy {@image_loading}'], 'title' => $props['video_title'], 'class' => [ 'uk-disabled', ], 'uk-video' => [ 'automute: true;', ], ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'preload' => ['none {@image_loading}'], 'uk-video' => true, ]); } $video->attr([ 'width' => $props['image_width'], 'height' => $props['image_height'], ]); return $video; elements/overlay/templates/template-image.php 0000644 00000000455 15175623007 0015455 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => $props['image_alt'], 'loading' => $props['image_loading'] ? false : null, 'width' => $props['image_width'], 'height' => $props['image_height'], 'focal_point' => $focal, 'thumbnail' => true, ]); return $image; elements/overlay/templates/content.php 0000644 00000002774 15175623007 0014242 0 ustar 00 <?php if ($props['image'] || $props['video'] || $props['hover_image'] || $props['hover_video'] || $props['title'] != '' || $props['meta'] != '' || $props['content'] != '' || $props['link']) : ?> <div> <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['video']) : ?> <?php if ($this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['hover_image']) : ?> <img src="<?= $props['hover_image'] ?>" alt> <?php endif ?> <?php if ($props['hover_video']) : ?> <?php if ($this->iframeVideo($props['hover_video'], [], false)) : ?> <iframe src="<?= $props['hover_video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['hover_video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $props['title_element'] ?>><?= $props['title'] ?></<?= $props['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?></a></p> <?php endif ?> </div> <?php endif ?> elements/overlay/templates/template-media.php 0000644 00000005223 15175623007 0015450 0 ustar 00 <?php if ($props['video']) { $src = $props['video']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-video.php"; } elseif ($props['image']) { $src = $props['image']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-image.php"; } elseif ($props['hover_video']) { $src = $props['hover_video']; $focal = $props['hover_image_focal_point']; $media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $media = include "{$__dir}/template-image.php"; } // Media $media->attr([ 'class' => [ 'el-image', 'uk-blend-{0}' => $props['media_blend_mode'], 'uk-transition-{image_transition}', 'uk-transition-opaque' => $props['image'] || $props['video'], 'uk-transition-fade {@!image_transition}' => ($props['hover_image'] || $props['hover_video']) && !($props['image'] || $props['video']), 'uk-flex-1 {@image_expand}' ], 'style' => [ 'min-height: {image_min_height}px;', ], ]); if ($props['image_expand'] || $props['image_min_height'] || ($media->name == 'video' && $props['image_width'] && $props['image_height'])) { $media->attr([ 'class' => [ 'uk-object-cover', 'uk-object-{0}' => $focal, ], 'style' => [ // Keep video responsiveness but with new proportions (because video isn't cropped like an image) 'aspect-ratio: {image_width} / {image_height};' => $media->name == 'video', ], ]); } // Hover Media $hover_media = ''; if (($props['hover_image'] || $props['hover_video']) && ($props['image'] || $props['video'])) { if ($props['hover_video']) { $src = $props['hover_video']; $hover_media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $hover_media = include "{$__dir}/template-image.php"; } $hover_media->attr([ 'class' => [ 'el-hover-image', 'uk-transition-{image_transition}', 'uk-transition-fade {@!image_transition}', 'uk-object-{hover_image_focal_point}', // `uk-cover` already sets object-fit to cover ], 'uk-cover' => true, 'uk-video' => false, // Resets 'alt' => true, // Image 'loading' => false, // Image + Iframe 'preload' => false, // Video ]); } ?> <?= $media($props, '') ?> <?php if ($hover_media) : ?> <?= $hover_media($props, '') ?> <?php endif ?> elements/overlay/templates/template-content.php 0000644 00000006314 15175623007 0016045 0 ustar 00 <?php // Title $title = $this->el($props['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-transition-{title_transition} {@overlay_hover}', 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', 'uk-flex-1 {@content_expand}' => !$props['content'] && (!$props['meta'] || $props['meta_align'] == 'above-title'), ], ]); // Meta $meta = $this->el($props['meta_element'], [ 'class' => [ 'el-meta', 'uk-transition-{meta_transition} {@overlay_hover}', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($props['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $props['meta_element'] != 'div', 'uk-flex-1 {@content_expand}' => $props['meta_align'] == 'below-content' || (!$props['content'] && ($props['meta_align'] == 'above-content' || ($props['meta_align'] == 'below-title' ))), ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-transition-{content_transition} {@overlay_hover}', 'uk-{content_style}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($props['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), 'uk-flex-1 {@content_expand}' => !($props['meta'] && $props['meta_align'] == 'below-content'), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', 'uk-transition-{link_transition} {@overlay_hover}', // Not on link element to prevent conflicts with link style ], ]); ?> <?php if ($props['meta'] != '' && $props['meta_align'] == 'above-title') : ?> <?= $meta($props, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($props) ?> <?php if ($props['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($props['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $props['meta_align'] == 'below-title') : ?> <?= $meta($props, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($props, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $props['meta_align'] == 'below-content') : ?> <?= $meta($props, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && $props['link_text']) : ?> <?= $link_container($props, $link($props, $props['link_text'])) ?> <?php endif ?> elements/overlay/templates/template.php 0000644 00000014322 15175623007 0014373 0 ustar 00 <?php // Resets if ($props['overlay_link']) { $props['title_link'] = ''; } if ($props['content_expand']) { if (in_array($props['overlay_position'], ['top', 'bottom'])) { $props['overlay_position'] = 'cover'; } if (in_array($props['overlay_position'], ['top-center', 'center', 'bottom-center'])) { $props['overlay_position'] = 'center-horizontal'; } if (in_array($props['overlay_position'], ['top-left', 'center-left', 'bottom-left'])) { $props['overlay_position'] = 'left'; } if (in_array($props['overlay_position'], ['top-right', 'center-right', 'bottom-right'])) { $props['overlay_position'] = 'right'; } } // New logic shortcuts $props['image_expand'] = $props['height_expand']; // Keep code same as other overlay elements $props['overlay_cover'] = $props['overlay_style'] && $props['overlay_mode'] == 'cover'; $props['has_transition'] = $props['overlay_hover'] || $props['image_transition'] || $props['image_transition_border'] || $props['hover_image'] || $props['hover_video']; $props['text_color_inverse'] = $props['text_color'] === 'light' ? 'dark' : 'light'; $props['flex_column_align'] = ''; $props['flex_column_align_fallback'] = ''; if ($props['image_expand']) { $horizontal = ['left', 'center', 'right']; $vertical = ['top', 'middle', 'bottom']; $props['flex_column_align'] = str_replace($horizontal, $vertical, $props['text_align'] ?? ''); $props['flex_column_align_fallback'] = str_replace($horizontal, $vertical, $props['text_align_fallback'] ?? ''); } $el = $this->el($props['html_element'] ?: 'div', [ 'class' => [ // Expand to column height 'uk-flex-1 {@height_expand}', 'uk-flex uk-flex-column {@image_expand}', 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@image_expand}', // Needs to be parent of `uk-link-toggle` 'uk-{text_color}' => !$props['overlay_style'] || $props['overlay_cover'], // Only for transparent navbar 'uk-inverse-{text_color}' => $props['overlay_style'] && !$props['overlay_cover'], ], ]); // Container (Needed for link and to make text alignment work set on parent) $container = $this->el($props['link'] && $props['overlay_link'] ? 'a' : 'div', [ 'class' => [ 'uk-box-shadow-{image_box_shadow}', 'uk-box-shadow-hover-{image_hover_box_shadow}', 'uk-border-{image_border} {@!image_box_decoration} {@!image_transition_border}', 'uk-box-shadow-bottom {@image_box_decoration: shadow}', 'tm-mask-default {@image_box_decoration: mask}', 'tm-box-decoration-{image_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@image_box_decoration_inverse} {@image_box_decoration: default|primary|secondary}', 'tm-transition-border {@image_transition_border}', 'uk-inline' => $props['image_box_decoration'] || $props['image_transition_border'], 'uk-transition-toggle {@has_transition}', 'uk-flex-1 uk-flex uk-flex-column {@image_expand}', ], 'style' => [ "background-color: {$props['media_background']};" => $props['media_background'], ], 'tabindex' => $props['has_transition'] && !($props['link'] && $props['overlay_link']) ? 0 : null, // Needs to be on anchor to have just one focusable toggle when using keyboard navigation 'uk-toggle' => $props['text_color_hover'] && ((!$props['overlay_style'] && ($props['hover_image'] || $props['hover_video'])) || ($props['overlay_cover'] && $props['overlay_hover'] && $props['overlay_transition_background'])) ? [ 'cls: uk-{text_color_inverse} [uk-{text_color}];', 'mode: hover;', 'target: !*;', ] : false, ]); // Box Decoration / Transition Border $image_container = $props['image_box_decoration'] || $props['image_transition_border'] ? $this->el('div', [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@image_expand}', ], ]) : null; ($image_container ?: $container)->attr('class', [ 'uk-inline-clip', ]); $overlay = $this->el('div', [ 'class' => [ 'uk-{overlay_style}', 'uk-transition-{overlay_transition} {@overlay_hover} {@overlay_cover}', 'uk-position-cover {@overlay_cover}', 'uk-position-{overlay_margin} {@overlay_cover}', ], ]); $position = $this->el('div', [ 'class' => [ 'uk-position-{overlay_position} [uk-position-{overlay_margin} {@overlay_style}]', 'uk-transition-{overlay_transition} {@overlay_hover}' => !($props['overlay_transition_background'] && $props['overlay_cover']), 'uk-blend-difference {@text_blend} {@!overlay_style}', 'uk-flex {@content_expand}' ], ]); $content = $this->el('div', [ 'class' => [ $props['overlay_style'] ? 'uk-overlay' : 'uk-panel', 'uk-padding {@!overlay_padding} {@!overlay_style}', 'uk-padding-{!overlay_padding: |none}', 'uk-padding-remove {@overlay_padding: none} {@overlay_style}', 'uk-width-{overlay_maxwidth} {@!overlay_position: top|bottom}', 'uk-margin-remove-first-child', 'uk-flex-1 uk-flex uk-flex-column {@content_expand}' ], ]); if (!$props['overlay_cover']) { $position->attr($overlay->attrs); } // Link $link = include "{$__dir}/template-link.php"; ?> <?= $el($props, $attrs) ?> <?= $container($props) ?> <?php if ($image_container) : ?> <?= $image_container($props) ?> <?php endif ?> <?= $this->render("{$__dir}/template-media", compact('props')) ?> <?php if ($props['media_overlay']) : ?> <div class="uk-position-cover" style="background-color:<?= $props['media_overlay'] ?>"></div> <?php endif ?> <?php if ($props['overlay_cover']) : ?> <?= $overlay($props, '') ?> <?php endif ?> <?php if ($props['title'] != '' || $props['meta'] != '' || $props['content'] != '' || ($props['link'] && $props['link_text'])) : ?> <?= $position($props, $content($props, $this->render("{$__dir}/template-content", compact('props', 'link')))) ?> <?php endif ?> <?php if ($image_container) : ?> <?= $image_container->end() ?> <?php endif ?> <?= $container->end() ?> <?= $el->end() ?> elements/overlay/templates/template-link.php 0000644 00000003144 15175623007 0015326 0 ustar 00 <?php $link = $props['link'] ? $this->el('a', [ 'href' => ['{link}'], 'aria-label' => ['{link_aria_label}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $props['overlay_link']) { $container->attr($link->attrs + [ 'class' => [ // Needs to be child of `uk-light` or `uk-dark` 'uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $props['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($props); } } if ($link && $props['title'] != '' && $props['title_link']) { $props['title'] = $link($props, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && $props['link_text']) { if ($props['overlay_link']) { $link = $this->el('div'); } $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', // Keep link style if overlay link 'uk-link {@link_style:} {@overlay_link}', 'uk-text-muted {@link_style: link-muted} {@overlay_link}', ]); } return $link; elements/overlay/element.php 0000644 00000002066 15175623007 0012215 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { /** * Auto-correct media rendering for dynamic content * * @var View $view */ $view = app(View::class); foreach (['', 'hover_'] as $prefix) { if ($node->props["{$prefix}image"] && $view->isVideo($node->props["{$prefix}image"])) { $node->props["{$prefix}video"] = $node->props["{$prefix}image"]; $node->props["{$prefix}image"] = null; } elseif ($node->props["{$prefix}video"] && $view->isImage($node->props["{$prefix}video"])) { $node->props["{$prefix}image"] = $node->props["{$prefix}video"]; $node->props["{$prefix}video"] = null; } } // Don't render element if content fields are empty return $node->props['image'] || $node->props['video'] || $node->props['hover_image'] || $node->props['hover_video']; }, ], ]; elements/overlay/element.json 0000644 00000116611 15175623007 0012401 0 ustar 00 { "@import": "./element.php", "name": "overlay", "title": "Overlay", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "link_text": "Read more", "overlay_mode": "cover", "overlay_hover": true, "overlay_style": "overlay-primary", "overlay_position": "center", "text_color": "light", "overlay_transition": "fade", "title_hover_style": "reset", "title_element": "h3", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "link_style": "default", "text_align": "center", "margin": "default" }, "placeholder": { "props": { "image": "${url:~yootheme/theme/assets/images/element-image-placeholder.png}", "video": "", "title": "Title", "meta": "", "content": "", "hover_image": "", "hover_video": "" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "image": { "label": "Image", "type": "image", "source": true, "show": "!video", "altRef": "%name%_alt" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "_media": { "type": "button-panel", "panel": "builder-overlay-media", "text": "Edit Settings", "show": "image || video" }, "video_title": { "label": "Video Title", "source": true, "show": "video && $match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "image_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" } }, "image_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" } }, "image_alt": { "label": "Image Alt", "source": true, "show": "image && !video" }, "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "link": "${builder.link}", "link_target": "${builder.link_target}", "link_text": { "label": "Link Text", "description": "Enter the text for the link.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "source": true, "enable": "link" }, "hover_image": { "label": "Hover Image", "description": "Select an optional image that appears on hover.", "type": "image", "source": true, "show": "!hover_video" }, "hover_video": { "label": "Hover Video", "description": "Select an optional video that appears on hover.", "type": "video", "source": true, "show": "!hover_image" }, "height_expand": { "label": "Height", "description": "Expand the height of the element to fill the available space in the column.", "type": "checkbox", "text": "Fill the available column space" }, "overlay_link": { "label": "Link", "description": "Link the whole overlay if a link exists.", "type": "checkbox", "text": "Link overlay", "enable": "link" }, "html_element": "${builder.html_element}", "overlay_mode": { "label": "Mode", "description": "When using cover mode, you need to set the text color manually.", "type": "select", "options": { "Cover": "cover", "Caption": "caption" } }, "overlay_hover": { "type": "checkbox", "text": "Display overlay on hover" }, "overlay_transition_background": { "type": "checkbox", "text": "Animate background only", "enable": "overlay_hover && overlay_mode == 'cover' && overlay_style" }, "overlay_style": { "label": "Style", "description": "Select a style for the overlay.", "type": "select", "options": { "None": "", "Overlay Default": "overlay-default", "Overlay Primary": "overlay-primary", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "overlay_position": { "label": "Position", "description": "Select the overlay or content position.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right", "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right", "Center": "center", "Center Left": "center-left", "Center Right": "center-right" } }, "overlay_margin": { "label": "Margin", "description": "Apply a margin between the overlay and the image container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "overlay_style" }, "overlay_padding": { "label": "Padding", "description": "Set the padding between the overlay and its content.", "type": "select", "options": { "Default": "", "Small": "small", "Large": "large", "None": "none" } }, "content_expand": { "label": "Height", "description": "Expand the height of the content to fill the available space in the overlay and push the link to the bottom.", "type": "checkbox", "text": "Expand content" }, "overlay_maxwidth": { "label": "Max Width", "description": "Set the maximum content width.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "!$match(overlay_position, '^(top|bottom)$')" }, "text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "text_color_hover": { "type": "checkbox", "text": "Inverse the text color on hover", "enable": "!overlay_style && (hover_image || hover_video) || overlay_style && overlay_mode == 'cover' && overlay_hover && overlay_transition_background" }, "text_blend": { "type": "checkbox", "text": "Blend with image", "enable": "!overlay_style" }, "overlay_transition": { "label": "Transition", "description": "Select a transition for the overlay when it appears on hover.", "type": "select", "options": { "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "overlay_hover" }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly" }, "image_transition": { "label": "Transition", "description": "Select an image transition. If the hover image is set, the transition takes place between the two images. If <i>None</i> is selected, the hover image fades in.", "type": "select", "options": { "None (Fade if hover image)": "", "Scale Up": "scale-up", "Scale Down": "scale-down" } }, "image_transition_border": { "type": "checkbox", "text": "Border" }, "image_min_height": { "label": "Min Height", "description": "Use an optional minimum height to prevent images from becoming smaller than the content on small devices.", "type": "range", "attrs": { "min": 200, "max": 500, "step": 20 } }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "!image_transition_border && !image_box_decoration" }, "image_box_shadow": { "label": "Box Shadow", "description": "Select the image box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" } }, "image_hover_box_shadow": { "label": "Hover Box Shadow", "description": "Select the image box shadow size on hover.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" } }, "image_box_decoration": { "label": "Box Decoration", "description": "Select the image box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" } }, "image_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "$match(image_box_decoration, '^(default|primary|secondary)$')" }, "hover_image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "title_transition": { "label": "Transition", "description": "Select a transition for the title when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "title && overlay_hover" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "title" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "title && link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "title && link && (title_link || overlay_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "title" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "title" }, "meta_transition": { "label": "Transition", "description": "Select a transition for the meta text when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "meta && overlay_hover" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Below Content": "below-content" }, "enable": "meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "meta" }, "content_transition": { "label": "Transition", "description": "Select a transition for the content when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "content && overlay_hover" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "content" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "content" }, "link_transition": { "label": "Transition", "description": "Select a transition for the link when the overlay appears on hover.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "link && link_text && overlay_hover" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "link && link_text" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "link && link_text && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "link && link_text && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "link && link_text" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-image</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-link</code>, <code>.el-hover-image</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-image", ".el-title", ".el-meta", ".el-content", ".el-link", ".el-hover-image" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "image", "video", "_media", "video_title", { "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "name": "_image_dimension", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_alt", "title", "meta", "content", "link", "link_target", "link_text", "link_aria_label", "hover_image", "hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Container", "type": "group", "divider": true, "fields": [ "height_expand", "overlay_link", "html_element" ] }, { "label": "Overlay", "type": "group", "divider": true, "fields": [ "overlay_mode", "overlay_hover", "overlay_transition_background", "overlay_style", "overlay_position", "overlay_margin", "overlay_padding", "content_expand", "overlay_maxwidth", "text_color", "text_color_hover", "text_blend", "overlay_transition" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ "image_focal_point", "image_loading", "image_transition", "image_transition_border", "image_min_height", "image_border", "image_box_shadow", "image_hover_box_shadow", "image_box_decoration", "image_box_decoration_inverse" ] }, { "label": "Hover Image", "type": "group", "divider": true, "fields": [ "hover_image_focal_point" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_transition", "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_transition", "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_transition", "content_style", "content_margin"] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_transition", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } }, "panels": { "builder-overlay-media": { "title": "Media", "width": 500, "fields": { "media_background": { "label": "Background Color", "description": "Use the background color in combination with blend modes.", "type": "color" }, "media_blend_mode": { "label": "Blend Mode", "description": "Determine how the image or video will blend with the background color.", "type": "select", "options": { "Normal": "", "Multiply": "multiply", "Screen": "screen", "Overlay": "overlay", "Darken": "darken", "Lighten": "lighten", "Color-dodge": "color-dodge", "Color-burn": "color-burn", "Hard-light": "hard-light", "Soft-light": "soft-light", "Difference": "difference", "Exclusion": "exclusion", "Hue": "hue", "Saturation": "saturation", "Color": "color", "Luminosity": "luminosity" }, "enable": "media_background" }, "media_overlay": { "label": "Overlay Color", "description": "Set an additional transparent overlay to soften the image or video.", "type": "color" } }, "fieldset": { "default": { "fields": ["media_background", "media_blend_mode", "media_overlay"] } } } } } elements/overlay/images/icon.svg 0000644 00000000705 15175623007 0012767 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="30" height="30" fill="none" /> <rect width="12" height="2" fill="#444" x="8.971" y="13" /> <rect width="8" height="2" fill="#444" x="10.971" y="16" /> <rect width="28" height="22" fill="none" stroke="#444" stroke-width="2px" x="1" y="4" /> <rect width="20" height="14" fill="none" stroke="#444" stroke-width="2px" x="5" y="8" /> </svg> elements/overlay/images/iconSmall.svg 0000644 00000000554 15175623007 0013762 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="19" height="15" fill="none" stroke="#444" x="0.5" y="2.5" /> <rect width="15" height="11" fill="none" stroke="#444" x="2.5" y="4.5" /> <rect width="8" height="1" fill="#444" x="6" y="9" /> <rect width="6" height="1" fill="#444" x="7" y="11" /> </svg> elements/overlay/updates.php 0000644 00000013326 15175623007 0012232 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'image') && Arr::get($node->props, 'video')) { unset($node->props['video']); } }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'overlay_link') && Arr::get($node->props, 'css')) { $node->props['css'] = str_replace( '.el-element', '.el-element > *', $node->props['css'], ); } }, '3.0.0-beta.5.1' => function ($node) { if (Arr::get($node->props, 'image_box_decoration') === 'border-hover') { $node->props['image_transition_border'] = true; unset($node->props['image_box_decoration']); } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.0.0-beta.5.1' => function ($node) { Arr::updateKeys($node->props, [ 'link_type' => function ($value) { if ($value === 'content') { return [ 'title_link' => true, 'link_text' => '', ]; } elseif ($value === 'element') { return [ 'overlay_link' => true, 'link_text' => '', ]; } }, ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } $node->props['link_type'] = 'element'; }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.0' => function ($node) { if (!isset($node->props['overlay_image']) && Arr::get($node->props, 'image2')) { $node->props['overlay_image'] = Arr::get($node->props, 'image2'); } if ( !isset($node->props['image_box_decoration']) && Arr::get($node->props, 'image_box_shadow_bottom') === true ) { $node->props['image_box_decoration'] = 'shadow'; } if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/accordion/templates/content.php 0000644 00000000522 15175623007 0014507 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/accordion/templates/template.php 0000644 00000000543 15175623007 0014653 0 ustar 00 <?php $el = $this->el('div', [ 'uk-accordion' => [ 'multiple: {multiple};', 'collapsible: {0};' => $props['collapsible'] ? 'true' : 'false', ], ]); ?> <?= $el($props, $attrs) ?> <?php foreach ($children as $child) : ?> <?= $builder->render($child, ['element' => $props]) ?> <?php endforeach ?> <?= $el->end() ?> elements/accordion/element.json 0000644 00000043314 15175623007 0012660 0 ustar 00 { "name": "accordion", "title": "Accordion", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_image": true, "show_link": true, "collapsible": true, "content_column_breakpoint": "m", "image_svg_color": "emphasis", "image_align": "top", "image_grid_width": "1-2", "image_grid_breakpoint": "m", "link_text": "Read more", "link_style": "default" }, "placeholder": { "children": [ { "type": "accordion_item", "props": {} }, { "type": "accordion_item", "props": {} }, { "type": "accordion_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "accordion_item", "media": { "type": "image", "item": { "title": "title", "image": "src" } } }, "show_image": { "type": "checkbox", "text": "Show the image" }, "show_link": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the link" }, "multiple": { "label": "Behavior", "type": "checkbox", "text": "Allow multiple open items" }, "collapsible": { "type": "checkbox", "text": "Start with all items closed" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Lead": "lead", "Meta": "meta" } }, "content_dropcap": { "label": "Drop Cap", "description": "Display the first letter of the paragraph as a large initial.", "type": "checkbox", "text": "Enable drop cap" }, "content_column": { "label": "Columns", "description": "Set the number of text columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" } }, "content_column_divider": { "description": "Show a divider between text columns.", "type": "checkbox", "text": "Show dividers", "enable": "content_column" }, "content_column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the text columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "content_column" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" } }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "show_image" }, "image_align": { "label": "Alignment", "description": "Align the image to the top, left, right or place it between the title and the content.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right" }, "enable": "show_image" }, "image_grid_width": { "label": "Grid Width", "description": "Define the width of the image within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the image and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center grid items.", "type": "checkbox", "text": "Center", "enable": "show_image && $match(image_align, 'left|right')" }, "image_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_image && image_align == 'bottom'" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_target": { "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-item", ".el-title", ".el-content", ".el-image", ".el-link" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "show_image", "show_link"] }, { "title": "Settings", "fields": [ { "label": "Accordion", "type": "group", "divider": true, "fields": ["multiple", "collapsible"] }, { "label": "Content", "type": "group", "divider": true, "fields": [ "content_style", "content_dropcap", "content_column", "content_column_divider", "content_column_breakpoint", "content_margin" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_border", "image_align", "image_grid_width", "image_grid_column_gap", "image_grid_row_gap", "image_grid_breakpoint", "image_vertical_align", "image_margin", "image_svg_inline", "image_svg_color" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_text", "link_target", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/accordion/images/iconSmall.svg 0000644 00000000547 15175623007 0014244 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="17" height="8" fill="none" stroke="#575656" x="1.5" y="4.5" /> <rect width="18" height="1" fill="#575656" x="1" y="2" /> <rect width="18" height="1" fill="#575656" x="1" y="14" /> <rect width="18" height="1" fill="#575656" x="1" y="16" /> </svg> elements/accordion/images/icon.svg 0000644 00000000671 15175623007 0013251 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="28" height="13" fill="none" stroke="#444" stroke-width="2" x="1" y="6" /> <line fill="none" stroke="#444" stroke-width="2" x1="0" y1="2" x2="30" y2="2" /> <line fill="none" stroke="#444" stroke-width="2" x1="0" y1="23" x2="30" y2="23" /> <line fill="none" stroke="#444" stroke-width="2" x1="0" y1="27" x2="30" y2="27" /> </svg> elements/accordion/updates.php 0000644 00000001613 15175623007 0012506 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.4' => function ($node) { unset($node->props['title_element']); }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'image_grid_width') === 'xxlarge') { $node->props['image_grid_width'] = '2xlarge'; } }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_breakpoint' => 'image_grid_breakpoint', 'image_gutter' => fn($value) => [ 'image_grid_column_gap' => $value, 'image_grid_row_gap' => $value, ], ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, ['image_inline_svg' => 'image_svg_inline']); }, ]; elements/code/templates/template.php 0000644 00000000343 15175623007 0013622 0 ustar 00 <?php $el = $this->el('pre', [ 'class' => [ 'uk-margin-remove {@position: absolute}', ], ]); ?> <?= $el($props, $attrs) ?><code class="el-content"><?= $this->e($props['content']) ?></code><?= $el->end() ?> elements/code/templates/content.php 0000644 00000000162 15175623007 0013460 0 ustar 00 <?php if ($props['content'] != '') : ?> <pre><code><?= $this->e($props['content']) ?></code></pre> <?php endif ?> elements/code/element.json 0000644 00000006467 15175623007 0011641 0 ustar 00 { "@import": "./element.php", "name": "code", "title": "Code", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "placeholder": { "props": { "content": "// Code example\n <div id=\"myid\" class=\"myclass\" hidden> \nLorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.\n</div>" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "type": "editor", "editor": "code", "source": true }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-content</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-content"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content"] }, { "title": "Settings", "fields": [ { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/code/images/icon.svg 0000644 00000000406 15175623007 0012216 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="2" points="20,7 28,15 20,23" /> <polyline fill="none" stroke="#444" stroke-width="2" points="10,7 2,15 10,23" /> </svg> elements/code/images/iconSmall.svg 0000644 00000000412 15175623007 0013204 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="1.01" points="13,4 19,10 13,16" /> <polyline fill="none" stroke="#444" stroke-width="1.01" points="7,4 1,10 7,16" /> </svg> elements/code/element.php 0000644 00000000351 15175623007 0011441 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['content'] != ''; }, ], ]; elements/icon/images/icon.svg 0000644 00000000470 15175623007 0012235 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="2" d="M15,19.39,20,22,19,16.48l4-3.9-5.57-.81L15,6.76l-2.48,5L7,12.58l4,3.9L10.05,22Z" /> <circle fill="none" stroke="#444" stroke-width="2" cx="15" cy="15" r="13" /> </svg> elements/icon/images/iconSmall.svg 0000644 00000000436 15175623007 0013230 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" d="M10,13l3.46,1.81L12.77,11l2.77-2.7-3.86-.56L10,4.3,8.28,7.76l-3.82.56L7.23,11l-.66,3.83Z" /> <circle fill="none" stroke="#444" cx="10" cy="10" r="9" /> </svg> elements/icon/element.php 0000644 00000000347 15175623007 0011464 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return (bool) $node->props['icon']; }, ], ]; elements/icon/templates/content.php 0000644 00000000267 15175623007 0013504 0 ustar 00 <?php if ($props['icon'] && $props['link']) : ?> <a href="<?= $props['link'] ?>">[<?= $props['icon'] ?>]</a> <?php elseif ($props['icon']) : ?> [<?= $props['icon'] ?>] <?php endif ?> elements/icon/templates/template.php 0000644 00000001507 15175623007 0013643 0 ustar 00 <?php $el = $this->el('div'); // Icon $icon = $this->el('span', [ 'class' => [ 'uk-text-{icon_color} {@!link}', ], 'uk-icon' => [ 'icon: {icon};', 'width: {icon_width}; height: {icon_width}; {@!link_style: button}', ], ], ''); // Link $link = $this->el('a', [ 'class' => [ 'uk-icon-link {@!link_style}', 'uk-icon-button {@link_style: button}', 'uk-link-{link_style: muted|text|reset}', ], 'href' => ['{link}'], 'aria-label' => ['{link_aria_label}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); ?> <?= $el($props, $attrs) ?> <?php if ($props['link']) : ?> <?= $link($props, $icon($props)) ?> <?php else : ?> <?= $icon($props) ?> <?php endif ?> <?= $el->end() ?> elements/icon/element.json 0000644 00000013633 15175623007 0011650 0 ustar 00 { "@import": "./element.php", "name": "icon", "title": "Icon", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "icon_width": 60, "margin": "default" }, "placeholder": { "props": { "icon": "star" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "icon": { "label": "Icon", "description": "Click on the pencil to pick an icon from the icon library.", "type": "icon", "source": true }, "link": "${builder.link}", "link_target": "${builder.link_target}", "link_aria_label": "${builder.link_aria_label}", "icon_color": { "label": "Color", "description": "Select the icon color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "!link" }, "icon_width": { "label": "Icon Width", "description": "Set the icon width.", "enable": "link_style != 'button'" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Icon Link": "", "Icon Button": "button", "Link": "link", "Link Muted": "muted", "Link Text": "text", "Link Reset": "reset" }, "enable": "link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["icon", "link", "link_target", "link_aria_label"] }, { "title": "Settings", "fields": [ { "label": "Icon", "type": "group", "divider": true, "fields": ["icon_color", "icon_width"] }, { "label": "Link", "type": "group", "divider": true, "fields": ["link_style"] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/icon/updates.php 0000644 00000000624 15175623007 0011476 0 ustar 00 <?php namespace YOOtheme; return [ '2.1.0-beta.0.1' => function ($node) { if (!empty($node->props['icon_ratio'])) { $node->props['icon_width'] = round(20 * $node->props['icon_ratio']); unset($node->props['icon_ratio']); } }, '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/button/updates.php 0000644 00000000751 15175623007 0012062 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset($node->props['inline_align']); }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'gutter' => fn($value) => ['grid_column_gap' => $value, 'grid_row_gap' => $value], ]); }, '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/button/images/icon.svg 0000644 00000000524 15175623007 0012620 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="1.8" d="M11,8l10.882,8.611l-2.902,1.681l3.209,5.965 l-3.98,2.146l-3.207-5.965l-2.9,1.681L11,8z" /> <polyline fill="none" stroke="#444" stroke-width="2" points="8,18 2,18 2,3 28,3 28,18 25,18" /> </svg> elements/button/images/iconSmall.svg 0000644 00000000456 15175623007 0013615 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" d="M7.1,6.4l7.4,6l-1.9,1.1l2.1,3.9l-2.6,1.4L10,14.9L8.1,16L7.1,6.4z" /> <polyline fill="none" stroke="#444" points="6,12.5 1.5,12.5 1.5,3.5 18.5,3.5 18.5,12.5 16,12.5" /> </svg> elements/button/element.json 0000644 00000013652 15175623007 0012234 0 ustar 00 { "name": "button", "title": "Button", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "grid_column_gap": "small", "grid_row_gap": "small", "margin": "default" }, "placeholder": { "children": [{ "type": "button_item", "props": {} }] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "title": "content", "item": "button_item", "media": { "type": "", "item": { "link_title": "title", "link": "src" } } }, "button_size": { "label": "Size", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" } }, "fullwidth": { "type": "checkbox", "text": "Full width button" }, "grid_column_gap": { "label": "Column Gap", "description": "Set the size of the column gap between multiple buttons.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "grid_row_gap": { "label": "Row Gap", "description": "Set the size of the row gap between multiple buttons.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-content</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-item", ".el-content"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content"] }, { "title": "Settings", "fields": [ { "label": "Button", "type": "group", "divider": true, "fields": [ "button_size", "fullwidth", "grid_column_gap", "grid_row_gap" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/button/templates/template.php 0000644 00000001760 15175623007 0014227 0 ustar 00 <?php $el = $this->el('div'); // Grid $grid = $this->el('div', [ 'class' => [ 'uk-flex-middle', $props['grid_column_gap'] == $props['grid_row_gap'] ? 'uk-grid-{grid_column_gap}' : '[uk-grid-column-{grid_column_gap}] [uk-grid-row-{grid_row_gap}]', 'uk-child-width-{0}' => $props['fullwidth'] ? '1-1' : 'auto', 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]] {@!fullwidth}', ], 'uk-grid' => true, ]); ?> <?= $el($props, $attrs) ?> <?php if (count($children) > 1) : ?> <?= $grid($props) ?> <?php endif ?> <?php foreach ($children as $child) : ?> <?php if (count($children) > 1) : ?> <div class="el-item"> <?php endif ?> <?= $builder->render($child, ['element' => $props]) ?> <?php if (count($children) > 1) : ?> </div> <?php endif ?> <?php endforeach ?> <?php if (count($children) > 1) : ?> <?= $grid->end() ?> <?php endif ?> </div> elements/button/templates/content.php 0000644 00000000434 15175623007 0014063 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <p> <?= $builder->render($children[0]) ?> </p> <?php endif ?> elements/subnav/updates.php 0000644 00000000442 15175623007 0012042 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset($node->props['inline_align']); }, '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/subnav/images/iconSmall.svg 0000644 00000000416 15175623007 0013574 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="4" height="1" fill="#444" x="16" y="10" /> <rect width="4" height="1" fill="#444" x="10" y="10" /> <path fill="#444" d="M0,8v5h8V8H0z M7,12H1V9h6V12z" /> </svg> elements/subnav/images/icon.svg 0000644 00000000444 15175623007 0012604 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="6" height="2" fill="#444" x="24" y="14" /> <rect width="6" height="2" fill="#444" x="15" y="14" /> <path fill="#444" d="M0,12v6h11.999L12,12H0z M9.999,16h-8L2,14h7.999V16z" /> </svg> elements/subnav/element.json 0000644 00000012205 15175623007 0012210 0 ustar 00 { "name": "subnav", "title": "Subnav", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "placeholder": { "children": [ { "type": "subnav_item", "props": {} }, { "type": "subnav_item", "props": {} }, { "type": "subnav_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "title": "content", "item": "subnav_item" }, "subnav_style": { "label": "Style", "description": "Select the subnav style.", "type": "select", "options": { "Default": "", "Divider": "divider", "Pill": "pill", "Tab": "tab" } }, "html_element": { "label": "HTML Element", "description": "Define a navigation menu or give it no semantic meaning.", "type": "select", "options": { "div": "", "nav": "nav" } }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-content</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-item", ".el-content", ".el-link"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content"] }, { "title": "Settings", "fields": [ { "label": "Subnav", "type": "group", "divider": true, "fields": ["subnav_style", "html_element"] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/subnav/templates/template.php 0000644 00000001334 15175623007 0014207 0 ustar 00 <?php $el = $this->el($props['html_element'] ?: 'div'); // Subnav $subnav = $this->el('ul', [ 'class' => [ 'uk-margin-remove-bottom', 'uk-subnav {@subnav_style: |divider|pill} [uk-subnav-{subnav_style: divider|pill}]', 'uk-tab {@subnav_style: tab}', 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]]', ], 'uk-margin' => count($children) > 1, ]); ?> <?= $el($props, $attrs) ?> <?= $subnav($props) ?> <?php foreach ($children as $child) : ?> <li class="el-item <?= $child->props['active'] ? 'uk-active' : '' ?>"><?= $builder->render($child, ['element' => $props]) ?></li> <?php endforeach ?> <?= $subnav->end() ?> <?= $el->end() ?> elements/subnav/templates/content.php 0000644 00000000512 15175623007 0014043 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <p> <?= $builder->render($children[0], ['element' => $props]) ?> </p> <?php endif ?> elements/quotation/images/iconSmall.svg 0000644 00000000475 15175623007 0014326 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" d="M9.5,5.5v5c0,3.4-2.5,5-5,5v-1.3c1.8-0.3,2.6-1.7,2.5-3.7H4.5v-5H9.5z" /> <path fill="none" stroke="#444" d="M16.5,5.5v5c0,3.4-2.5,5-5,5v-1.3c1.8-0.3,2.6-1.7,2.5-3.7h-2.5v-5 H16.5z" /> </svg> elements/quotation/images/icon.svg 0000644 00000000510 15175623007 0013323 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="2" d="M13,7v8c0,5.4-4,9-8,9v-3.1c2.9-0.5,4.2-2.7,4-5.9 H5V7H13z" /> <path fill="none" stroke="#444" stroke-width="2" d="M25,7v8c0,5.4-4,9-8,9v-3.1c2.9-0.5,4.2-2.7,4-5.9 h-4V7H25z" /> </svg> elements/quotation/templates/content.php 0000644 00000000771 15175623007 0014577 0 ustar 00 <?php if ($props['content'] != '') : ?> <blockquote> <?= $props['content'] ?> <?php if ($props['footer'] || $props['author']) : ?> <footer> <?= $props['footer'] ?> <?php if ($props['author'] && $props['link']) : ?> <cite><a href="<?= $props['link'] ?>"><?= $props['author'] ?></a></cite> <?php elseif ($props['author']) : ?> <cite><?= $props['author'] ?></cite> <?php endif ?> </footer> <?php endif ?> </blockquote> <?php endif ?> elements/quotation/templates/template.php 0000644 00000001274 15175623007 0014737 0 ustar 00 <?php $el = $this->el('blockquote', [ 'class' => [ 'uk-margin-remove {@position: absolute}', ], ]); // Link $link = $this->el('a', [ 'class' => [ 'uk-link-{link_style}', ], 'href' => ['{link}'], 'target' => ['_blank {@link_target}'], ]); ?> <?= $el($props, $attrs) ?> <?= $props['content'] ?> <?php if ($props['footer'] || $props['author']) : ?> <footer class="el-footer"> <?= $props['footer'] ?> <?php if ($props['author']) : ?> <cite class="el-author"><?= $props['link'] ? $link($props, $props['author']) : $props['author'] ?></cite> <?php endif ?> </footer> <?php endif ?> <?= $el->end() ?> elements/quotation/updates.php 0000644 00000000245 15175623007 0012570 0 ustar 00 <?php namespace YOOtheme; return [ '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/quotation/element.json 0000644 00000013121 15175623007 0012733 0 ustar 00 { "@import": "./element.php", "name": "quotation", "title": "Quotation", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "placeholder": { "props": { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "type": "editor", "source": true }, "author": { "label": "Author", "description": "Enter the author name.", "source": true }, "link": { "label": "Author Link", "attrs": { "placeholder": "http://" }, "source": true, "enable": "author" }, "link_target": { "type": "checkbox", "text": "Open in a new window", "enable": "author && link" }, "footer": { "label": "Footer", "description": "Enter an optional footer text.", "source": true }, "link_style": { "label": "Style", "description": "Select the link style.", "type": "select", "options": { "None": "", "Muted": "muted", "Text": "text", "Reset": "reset" }, "enable": "author && link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-footer</code>, <code>.el-author</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-footer", ".el-author"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "author", "link", "link_target", "footer"] }, { "title": "Settings", "fields": [ { "label": "Link", "type": "group", "divider": true, "fields": ["link_style"] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/quotation/element.php 0000644 00000000352 15175623007 0012553 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return (bool) $node->props['content']; }, ], ]; elements/slideshow/updates.php 0000644 00000021373 15175623007 0012553 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.1' => function ($node) { unset($node->props['nav_color']); unset($node->props['slidenav_outside_color']); }, '4.3.0-beta.0.5' => function ($node, $params) { if ($height = Arr::get($node->props, 'slideshow_height')) { if ($height === 'full' || $height === 'percent') { $node->props['slideshow_height'] = 'viewport'; } if ($height === 'percent') { $node->props['slideshow_height_viewport'] = 80; } if ( ($params['updateContext']['sectionIndex'] ?? 0) < 2 && empty($params['updateContext']['height']) ) { $node->props['slideshow_height_offset_top'] = true; } $params['updateContext']['height'] = true; } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.8.0-beta.0.3' => function ($node) { foreach (['overlay', 'title', 'meta', 'content', 'link'] as $prefix) { foreach (['x', 'y', 'scale', 'rotate', 'opacity'] as $prop) { $key = "{$prefix}_parallax_{$prop}"; $start = implode( ',', array_map('trim', explode(',', Arr::get($node->props, "{$key}_start", ''))), ); $end = implode( ',', array_map('trim', explode(',', Arr::get($node->props, "{$key}_end", ''))), ); if ($start !== '' || $end !== '') { $default = in_array($prop, ['scale', 'opacity']) ? 1 : 0; $values = [ $start !== '' ? $start : $default, $default, $end !== '' ? $end : $default, ]; Arr::set($node->props, $key, implode(',', $values)); } Arr::del($node->props, "{$key}_start"); Arr::del($node->props, "{$key}_end"); } } }, '2.3.0-beta.1.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ($style == 'fjord') { if (Arr::get($node->props, 'overlay_container') === 'default') { $node->props['overlay_container'] = 'large'; } } }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'overlay_width') === 'xxlarge') { $node->props['overlay_width'] = '2xlarge'; } }, '2.0.0-beta.5.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if (!in_array($style, ['jack-baker', 'morgan-consulting', 'vibe'])) { if (Arr::get($node->props, 'overlay_container') === 'large') { $node->props['overlay_container'] = 'xlarge'; } } if ( in_array($style, [ 'craft', 'district', 'florence', 'makai', 'matthew-taylor', 'pinewood-lake', 'summit', 'tomsen-brody', 'trek', 'vision', 'yard', ]) ) { if (Arr::get($node->props, 'overlay_container') === 'default') { $node->props['overlay_container'] = 'large'; } } }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_style') === 'heading-hero') { $node->props['title_style'] = 'heading-xlarge'; } if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } if (in_array($style, ['juno', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-medium'; } } if ( in_array($style, [ 'district', 'florence', 'flow', 'nioh-studio', 'summit', 'vision', ]) ) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-large'; } } if ($style == 'lilian') { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-2xlarge'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, ['thumbnav_inline_svg' => 'thumbnav_svg_inline']); }, '1.18.0' => function ($node) { if ( !isset($node->props['slideshow_box_decoration']) && Arr::get($node->props, 'slideshow_box_shadow_bottom') === true ) { $node->props['slideshow_box_decoration'] = 'shadow'; } if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/slideshow/templates/template-slidenav.php 0000644 00000004635 15175623007 0016524 0 ustar 00 <?php $slidenav = $this->el('a', [ 'class' => [ 'el-slidenav', 'uk-slidenav-large {@slidenav_large}', ], 'href' => '#', // WordPress Preview reloads if `href` is empty ]); $attrs_slidenav_next = [ 'uk-slidenav-next' => true, 'uk-slideshow-item' => 'next', ]; $attrs_slidenav_previous = [ 'uk-slidenav-previous' => true, 'uk-slideshow-item' => 'previous', ]; $slidenav_container = $this->el('div', [ 'class' => [ 'uk-visible@{slidenav_breakpoint}', 'uk-hidden-hover uk-hidden-touch {@slidenav_hover}', // Initial text color 'uk-{text_color} {@!slidenav: outside}', ], 'uk-inverse' => true, ]); if (in_array($props['slidenav'], ['default', 'outside'])) { $slidenav_container->attr([ 'class' => [ 'uk-position-{slidenav_margin}', ], ]); $attrs_slidenav_container_next = [ 'class' => [ 'uk-position-center-right {@slidenav: default}', 'uk-position-center-right-out {@slidenav: outside}', ], 'uk-toggle' => [ 'cls: uk-position-center-right-out uk-position-center-right; mode: media; media: @{slidenav_outside_breakpoint} {@slidenav: outside}', ], ]; $attrs_slidenav_container_previous = [ 'class' => [ 'uk-position-center-left {@slidenav: default}', 'uk-position-center-left-out {@slidenav: outside}', ], 'uk-toggle' => [ 'cls: uk-position-center-left-out uk-position-center-left; mode: media; media: @{slidenav_outside_breakpoint} {@slidenav: outside}', ], ]; } else { $slidenav_container->attr([ 'class' => [ 'uk-slidenav-container uk-position-{slidenav} [uk-position-{slidenav_margin}]', ], ]); } ?> <?php if (!in_array($props['slidenav'], ['default', 'outside'])) : ?> <?= $slidenav_container($props) ?> <?= $slidenav($props, $attrs_slidenav_previous, '') ?> <?= $slidenav($props, $attrs_slidenav_next, '') ?> <?= $slidenav_container->end() ?> <?php else : ?> <?= $slidenav_container($props, $attrs_slidenav_container_previous) ?> <?= $slidenav($props, $attrs_slidenav_previous, '') ?> <?= $slidenav_container->end() ?> <?= $slidenav_container($props, $attrs_slidenav_container_next) ?> <?= $slidenav($props, $attrs_slidenav_next, '') ?> <?= $slidenav_container->end() ?> <?php endif ?> elements/slideshow/templates/content.php 0000644 00000000522 15175623007 0014547 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/slideshow/templates/template.php 0000644 00000012335 15175623007 0014715 0 ustar 00 <?php // Resets if ($props['overlay_link']) { $props['title_link'] = ''; } if ($props['slideshow_height']) { $props['height_expand'] = ''; } if ($props['slideshow_height'] == 'viewport') { if ($props['slideshow_height_viewport'] > 100) { $props['slideshow_height_offset_top'] = false; } elseif (!$props['slideshow_height_viewport']) { $props['slideshow_height_viewport'] = 100; } } if ($props['slideshow_parallax']) { $props['slidenav'] = ''; } $el = $this->el('div', [ 'class' => [ // Expand to column height 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], 'uk-slideshow' => $this->expr([ 'ratio: {0};' => $props['slideshow_height'] ? 'false' : $props['slideshow_ratio'], 'minHeight: {slideshow_min_height}; {@!slideshow_height} {@!height_expand}', 'maxHeight: {slideshow_max_height}; {@!slideshow_height} {@!height_expand}', 'animation: {slideshow_animation};', 'velocity: {slideshow_velocity}; {@!slideshow_parallax}', 'autoplay: {slideshow_autoplay}; [pauseOnHover: false; {!slideshow_autoplay_pause}; ] [autoplayInterval: {slideshow_autoplay_interval}000;] {@!slideshow_parallax}', // Parallax 'parallax: true; {@slideshow_parallax}', 'parallax-easing: {slideshow_parallax_easing}; {@slideshow_parallax}', 'parallax-target: {slideshow_parallax_target}; {@slideshow_parallax}', 'parallax-start: {slideshow_parallax_start}; {@slideshow_parallax}', 'parallax-end: {slideshow_parallax_end}; {@slideshow_parallax}', ], $props) ?: true, ]); // Container $container = $this->el('div', [ 'class' => [ 'uk-position-relative', 'uk-visible-toggle' => ($props['slidenav'] && $props['slidenav_hover']) || ($props['nav'] && $props['nav_hover']), 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], 'tabindex' => ($props['slidenav'] && $props['slidenav_hover']) || ($props['nav'] && $props['nav_hover']) ? '-1' : null, ]); // Box decoration $decoration = $this->el('div', [ 'class' => [ 'uk-box-shadow-bottom [uk-display-block {@!height_expand}] {@slideshow_box_decoration: shadow}', 'tm-mask-default {@slideshow_box_decoration: mask}', 'tm-box-decoration-{slideshow_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@slideshow_box_decoration_inverse} {@slideshow_box_decoration: default|primary|secondary}', 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], ]); // Items $items = $this->el($props['link'] ? 'a' : 'div', [ 'class' => [ 'uk-slideshow-items', 'uk-box-shadow-{slideshow_box_shadow}', 'uk-flex-1 {@height_expand}', ], 'style' => [ 'min-height: max({0}px, {slideshow_height_viewport}vh); {@slideshow_height: viewport} {@!slideshow_height_offset_top}' => [$props['slideshow_min_height'] ?: '0'], ], 'uk-height-viewport' => ($props['slideshow_height'] == 'viewport' && $props['slideshow_height_offset_top']) || $props['slideshow_height'] == 'section' ? [ 'offset-top: true; {@slideshow_height_offset_top}', 'min: {slideshow_min_height};', 'offset-bottom: {0}; {@slideshow_height: viewport}' => $props['slideshow_height_viewport'] && $props['slideshow_height_viewport'] < 100 ? 100 - (int) $props['slideshow_height_viewport'] : false, 'offset-bottom: !:is(.uk-section-default,.uk-section-muted,.uk-section-primary,.uk-section-secondary) +; {@slideshow_height: section}', ] : false, ]); if ($props['link']) { $items->attr([ 'href' => ['{link}'], 'aria-label' => ['{link_aria_label}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), 'class' => ['uk-display-block'], ]); } ?> <?= $el($props, $attrs) ?> <?= $container($props) ?> <?php if ($props['slideshow_box_decoration']) : ?> <?= $decoration($props) ?> <?php endif ?> <?= $items($props) ?> <?php foreach ($children as $i => $child) : $item = $this->el('div', [ 'class' => [ 'el-item', 'uk-inverse-{0}' => $child->props['text_color'] ?: $props['text_color'], ], 'style' => [ 'background-color: {0};' => $child->props['media_background'] ?: false, ], ]); ?> <?= $item($props, $builder->render($child, ['i' => $i, 'element' => $props])) ?> <?php endforeach ?> <?= $items->end() ?> <?php if ($props['slideshow_box_decoration']) : ?> <?= $decoration->end() ?> <?php endif ?> <?php if ($props['slidenav']) : ?> <?= $this->render("{$__dir}/template-slidenav") ?> <?php endif ?> <?php if ($props['nav'] && !$props['nav_below']) : ?> <?= $this->render("{$__dir}/template-nav") ?> <?php endif ?> <?= $container->end() ?> <?php if ($props['nav'] && $props['nav_below']) : ?> <?= $this->render("{$__dir}/template-nav") ?> <?php endif ?> <?= $el->end() ?> elements/slideshow/templates/template-nav.php 0000644 00000004622 15175623007 0015477 0 ustar 00 <?php $nav = $this->el('ul', [ 'class' => [ 'el-nav uk-slideshow-nav', 'uk-{nav} [uk-flex-nowrap {@nav: thumbnav} {@thumbnav_nowrap}]', // Alignment 'uk-flex-{nav_align} {@nav_below}', // Vertical 'uk-{nav}-vertical {@nav_vertical} {@!nav_below}', // Wrapping 'uk-flex-right {@!nav_vertical} {@!nav_below} {@nav_position: .*-right}', 'uk-flex-center {@!nav_vertical} {@!nav_below} {@nav_position: bottom-center}', ], 'uk-margin' => !$props['nav_vertical'] && ($props['nav'] !== 'thumbnav' || !$props['thumbnav_nowrap']), ]); $nav_container = $this->el('div', [ 'class' => [ // Margin 'uk-margin[-{nav_margin}]-top {@nav_below}', // Position 'uk-position-{nav_position} {@!nav_below}', // Margin 'uk-position-{nav_position_margin} {@!nav_below}', // Hover 'uk-hidden-hover uk-hidden-touch {@nav_hover}', // Breakpoint 'uk-visible@{nav_breakpoint}', // Initial text color 'uk-{text_color} {@!nav_below}', ], 'uk-inverse' => true, ]); ?> <?= $nav_container($props) ?> <?= $nav($props) ?> <?php foreach ($children as $i => $child) : // Image $image = $this->el('image', [ 'class' => [ 'uk-text-{thumbnav_svg_color}' => $props['thumbnav_svg_inline'] && $props['thumbnav_svg_color'] && $this->isImage($child->props['thumbnail'] ?: $child->props['image']) == 'svg', ], 'src' => $child->props['thumbnail'] ?: $child->props['image'], 'alt' => $child->props['image_alt'], 'loading' => $props['image_loading'] ? false : null, 'width' => $props['thumbnav_width'], 'height' => $props['thumbnav_height'], 'focal_point' => $child->props['thumbnail'] ? $child->props['thumbnail_focal_point'] : $child->props['image_focal_point'], 'uk-svg' => (bool) $props['thumbnav_svg_inline'], 'thumbnail' => true, ]); $thumbnail = $image->attrs['src'] && $props['nav'] == 'thumbnav' ? $image($props) : ''; ?> <li uk-slideshow-item="<?= $i ?>"> <a href="#"><?= $thumbnail ?: $child->props['title'] ?></a> </li> <?php endforeach ?> <?= $nav->end() ?> <?= $nav_container->end() ?> elements/slideshow/images/icon.svg 0000644 00000001004 15175623007 0013300 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <circle fill="#444" cx="10.5" cy="28.5" r="1.5" /> <circle fill="#444" cx="15.5" cy="28.5" r="1.5" /> <circle fill="#444" cx="20.5" cy="28.5" r="1.5" /> <rect width="28" height="22" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <polyline fill="none" stroke="#444" stroke-width="2" points="22,9 25,12 22,15" /> <polyline fill="none" stroke="#444" stroke-width="2" points="8,9 5,12 8,15" /> </svg> elements/slideshow/images/iconSmall.svg 0000644 00000000700 15175623007 0014273 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <circle fill="#444" cx="7" cy="19" r="1" /> <circle fill="#444" cx="10" cy="19" r="1" /> <circle fill="#444" cx="13" cy="19" r="1" /> <rect width="19" height="15" fill="none" stroke="#444" x="0.5" y="0.5" /> <polyline fill="none" stroke="#444" points="14,5 17,8 14,11" /> <polyline fill="none" stroke="#444" points="6,5 3,8 6,11" /> </svg> elements/slideshow/element.json 0000644 00000164615 15175623007 0012730 0 ustar 00 { "name": "slideshow", "title": "Slideshow", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_link": true, "show_thumbnail": true, "slideshow_min_height": 300, "slideshow_autoplay_pause": true, "nav": "dotnav", "nav_position": "bottom-center", "nav_position_margin": "medium", "nav_align": "center", "nav_breakpoint": "s", "thumbnav_width": "100", "thumbnav_height": "75", "thumbnav_svg_color": "emphasis", "slidenav": "default", "slidenav_margin": "medium", "slidenav_breakpoint": "s", "slidenav_outside_breakpoint": "xl", "overlay_position": "center-left", "overlay_animation": "parallax", "title_hover_style": "reset", "title_element": "h3", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "link_text": "Read more", "link_style": "default", "margin": "default" }, "placeholder": { "children": [ { "type": "slideshow_item", "props": {} }, { "type": "slideshow_item", "props": {} }, { "type": "slideshow_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "slideshow_item", "media": [ { "type": "image", "item": { "title": "title", "image": "src" } }, { "type": "video", "item": { "title": "title", "video": "src" } } ] }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_link": { "type": "checkbox", "text": "Show the link" }, "show_thumbnail": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the navigation thumbnail instead of the image" }, "link": { "label": "Link", "type": "link", "description": "Link the whole slideshow instead of linking items separately.", "attrs": { "placeholder": "http://" }, "source": true }, "slideshow_height": { "type": "select", "options": { "Auto": "", "Viewport": "viewport", "Viewport (Subtract Next Section)": "section" } }, "slideshow_height_viewport": { "type": "number", "attrs": { "placeholder": "100", "min": 0, "max": 100, "step": 10, "class": "uk-form-width-xsmall" }, "enable": "slideshow_height == 'viewport'" }, "height_expand": { "type": "checkbox", "text": "Fill the available column space", "enable": "!slideshow_height" }, "slideshow_height_offset_top": { "type": "checkbox", "text": "Subtract height above", "enable": "slideshow_height == 'viewport' && (slideshow_height_viewport || 0) <= 100 || slideshow_height == 'section'" }, "slideshow_ratio": { "label": "Ratio", "description": "Set the slideshow ratio. It's recommended to use the same ratio as the image or video file. Simply use its width and height, e.g. <code>1600:900</code>.", "attrs": { "placeholder": "16:9" }, "enable": "!slideshow_height" }, "slideshow_min_height": { "label": "Min Height", "description": "Use an optional minimum height to prevent the slideshow from becoming smaller than its content on small devices.", "type": "range", "attrs": { "min": 200, "max": 800, "step": 50 }, "enable": "slideshow_height || (!slideshow_height && !height_expand)" }, "slideshow_max_height": { "label": "Max Height", "description": "Set the maximum height.", "type": "range", "attrs": { "min": 500, "max": 1600, "step": 50 }, "enable": "!slideshow_height" }, "text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" } }, "slideshow_box_shadow": { "label": "Box Shadow", "description": "Select the slideshow box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" } }, "slideshow_box_decoration": { "label": "Box Decoration", "description": "Select the image box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" } }, "slideshow_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "$match(slideshow_box_decoration, '^(default|primary|secondary)$')" }, "slideshow_animation": { "label": "Transition", "description": "Select the transition between two slides.", "type": "select", "options": { "Slide": "", "Pull": "pull", "Push": "push", "Fade": "fade", "Scale": "scale" } }, "slideshow_velocity": { "label": "Velocity", "description": "Set the velocity in pixels per millisecond.", "type": "range", "attrs": { "min": 0.2, "max": 3, "step": 0.1, "placeholder": "1" }, "enable": "!slideshow_parallax" }, "slideshow_autoplay": { "label": "Autoplay", "type": "checkbox", "text": "Enable autoplay", "enable": "!slideshow_parallax" }, "slideshow_autoplay_pause": { "type": "checkbox", "text": "Pause autoplay on hover", "enable": "!slideshow_parallax && slideshow_autoplay" }, "slideshow_autoplay_interval": { "label": "Autoplay Interval", "description": "Set the autoplay interval in seconds.", "type": "range", "attrs": { "min": 5, "max": 15, "step": 1, "placeholder": "7" }, "enable": "!slideshow_parallax && slideshow_autoplay" }, "slideshow_parallax": { "label": "Parallax", "description": "Add a stepless parallax animation based on the scroll position.", "type": "checkbox", "text": "Enable parallax effect" }, "slideshow_parallax_easing": { "label": "Parallax Easing", "description": "Set the animation easing. Zero transitions at an even speed, a negative value starts off quickly while a positive value starts off slowly.", "type": "range", "attrs": { "min": -2, "max": 2, "step": 0.1 }, "enable": "slideshow_parallax" }, "slideshow_parallax_target": { "label": "Parallax Target", "description": "The animation starts and stops depending on the element position in the viewport. Alternatively, use the position of a parent container.", "type": "select", "options": { "Element": "", "Column": "!.tm-grid-expand>*", "Row": "!.tm-grid-expand", "Section": "!.uk-section", "Next Section": "![class*='uk-section-'] ~ [class*='uk-section-']" }, "enable": "slideshow_parallax" }, "slideshow_parallax_start": { "enable": "slideshow_parallax" }, "slideshow_parallax_end": { "enable": "slideshow_parallax" }, "slideshow_kenburns": { "label": "Ken Burns Effect", "description": "Select the transformation origin for the Ken Burns animation.", "type": "select", "options": { "None": "", "Alternate": "alternate", "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "center-center", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" } }, "slideshow_kenburns_duration": { "label": "Ken Burns Duration", "description": "Set the duration for the Ken Burns effect in seconds.", "type": "range", "attrs": { "min": 10, "max": 30, "step": 1, "placeholder": "15" }, "enable": "slideshow_kenburns" }, "nav": { "label": "Navigation", "description": "Select the navigation type.", "type": "select", "options": { "None": "", "Dotnav": "dotnav", "Thumbnav": "thumbnav" } }, "nav_below": { "type": "checkbox", "text": "Show below slideshow", "enable": "nav" }, "nav_hover": { "type": "checkbox", "text": "Show on hover only", "enable": "nav && !nav_below" }, "nav_vertical": { "type": "checkbox", "text": "Vertical navigation", "enable": "nav && !nav_below" }, "nav_position": { "label": "Position", "description": "Select the position of the navigation.", "type": "select", "options": { "Top Left": "top-left", "Top Right": "top-right", "Center Left": "center-left", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "show": "nav && !nav_below" }, "nav_align": { "label": "Position", "description": "Align the navigation items.", "type": "select", "options": { "Left": "left", "Center": "center", "Right": "right" }, "show": "nav && nav_below" }, "nav_position_margin": { "label": "Margin", "description": "Apply a margin between the navigation and the slideshow container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "show": "nav && !nav_below" }, "nav_margin": { "label": "Margin", "description": "Set the vertical margin.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large" }, "show": "nav && nav_below" }, "nav_breakpoint": { "label": "Breakpoint", "description": "Display the navigation only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "nav" }, "thumbnav_width": { "attrs": { "placeholder": "auto" }, "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_height": { "attrs": { "placeholder": "auto" }, "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_nowrap": { "label": "Thumbnav Wrap", "description": "Define whether thumbnails wrap into multiple lines if the container is too small.", "type": "checkbox", "text": "Don't wrap into multiple lines", "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_svg_inline": { "label": "Thumbnav Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_svg_color": { "label": "Thumbnav SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "nav == 'thumbnav' && show_thumbnail && thumbnav_svg_inline" }, "slidenav": { "label": "Position", "description": "Select the position of the slidenav.", "type": "select", "options": { "None": "", "Default": "default", "Outside": "outside", "Top Left": "top-left", "Top Right": "top-right", "Center Left": "center-left", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" } }, "slidenav_hover": { "type": "checkbox", "text": "Show on hover only", "enable": "slidenav" }, "slidenav_large": { "type": "checkbox", "text": "Larger style", "enable": "slidenav" }, "slidenav_margin": { "label": "Margin", "description": "Apply a margin between the slidenav and the slideshow container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "slidenav" }, "slidenav_breakpoint": { "label": "Breakpoint", "description": "Display the slidenav only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "slidenav" }, "slidenav_outside_breakpoint": { "label": "Outside Breakpoint", "description": "Display the slidenav outside only on this device width and larger. Otherwise, display it inside.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "slidenav == 'outside'" }, "overlay_link": { "label": "Link", "description": "Link the whole overlay if a link exists.", "type": "checkbox", "text": "Link overlay", "enable": "show_link && !link" }, "overlay_container": { "label": "Container Width", "description": "Set the maximum content width. Note: The section may already have a maximum width, which you cannot exceed.", "type": "select", "options": { "None": "", "Default": "default", "Small": "small", "Large": "large", "X-Large": "xlarge", "Expand": "expand" } }, "overlay_container_padding": { "label": "Container Padding", "description": "Set the vertical container padding to position the overlay.", "type": "select", "options": { "Default": "", "X-Small": "xsmall", "Small": "small", "Large": "large", "X-Large": "xlarge" }, "enable": "overlay_container" }, "overlay_margin": { "label": "Margin", "description": "Set the margin between the overlay and the slideshow container.", "type": "select", "options": { "Default": "", "Small": "small", "Large": "large", "None": "none" }, "enable": "!overlay_container" }, "overlay_position": { "label": "Position", "description": "Select the content position.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right", "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "center", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" } }, "overlay_style": { "label": "Style", "description": "Select a style for the overlay.", "type": "select", "options": { "None": "", "Overlay Default": "overlay-default", "Overlay Primary": "overlay-primary", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "overlay_padding": { "label": "Padding", "description": "Set the padding between the overlay and its content.", "type": "select", "options": { "Default": "", "Small": "small", "Large": "large" }, "enable": "overlay_style" }, "content_expand": { "label": "Height", "description": "Expand the height of the content to fill the available space in the overlay and push the link to the bottom.", "type": "checkbox", "text": "Expand content" }, "overlay_width": { "label": "Width", "description": "Set a fixed width.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "!$match(overlay_position, '^(top|bottom)$')" }, "overlay_animation": { "label": "Animation", "description": "Choose between a parallax depending on the scroll position or an animation, which is applied once the slide is active.", "type": "select", "options": { "Parallax": "parallax", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" } }, "_slideshow_overlay_parallax": { "type": "button-panel", "panel": "builder-slideshow-overlay-parallax", "text": "Edit Settings", "enable": "overlay_animation == 'parallax'" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "show_title && show_link && !link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "show_title && show_link && !link && (title_link || overlay_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title" }, "_title_parallax": { "label": "Parallax", "description": "Add a parallax effect.", "type": "button-panel", "panel": "builder-slideshow-title-parallax", "text": "Edit Settings", "enable": "show_title && overlay_animation == 'parallax'" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "_meta_parallax": { "label": "Parallax", "description": "Add a parallax effect.", "type": "button-panel", "panel": "builder-slideshow-meta-parallax", "text": "Edit Settings", "enable": "show_meta && overlay_animation == 'parallax'" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content" }, "_content_parallax": { "label": "Parallax", "description": "Add a parallax effect.", "type": "button-panel", "panel": "builder-slideshow-content-parallax", "text": "Edit Settings", "enable": "show_content && overlay_animation == 'parallax'" }, "link_target": { "label": "Target", "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link && !link" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link && !link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && !link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && !link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link && !link" }, "_link_parallax": { "label": "Parallax", "description": "Add a parallax effect.", "type": "button-panel", "panel": "builder-slideshow-link-parallax", "text": "Edit Settings", "enable": "show_link && !link && overlay_animation == 'parallax'" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-nav</code>, <code>.el-slidenav</code>, <code>.el-image</code>, <code>.el-overlay</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-item", ".el-nav", ".el-slidenav", ".el-image", ".el-overlay", ".el-title", ".el-meta", ".el-content", ".el-link" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_link", "show_thumbnail", "link" ] }, { "title": "Settings", "fields": [ { "label": "Slideshow", "type": "group", "divider": true, "fields": [ { "label": "Height", "description": "The slideshow always takes up full width, and the height will adapt automatically based on the defined ratio. Alternatively, the height can adapt to the height of the viewport or to fill the available space in the column.<br><br>Note: Make sure no height is set in the section settings when using one of the viewport options.", "name": "_slideshow_height", "type": "grid", "width": "expand,auto", "gap": "small", "fields": ["slideshow_height", "slideshow_height_viewport"] }, "height_expand", "slideshow_height_offset_top", "slideshow_ratio", "slideshow_min_height", "slideshow_max_height", "text_color", "slideshow_box_shadow", "slideshow_box_decoration", "slideshow_box_decoration_inverse" ] }, { "label": "Animation", "type": "group", "divider": true, "fields": [ "slideshow_animation", "slideshow_velocity", "slideshow_autoplay", "slideshow_autoplay_pause", "slideshow_autoplay_interval", "slideshow_parallax", "slideshow_parallax_easing", "slideshow_parallax_target", { "label": "Parallax Start/End", "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the target's height.", "type": "grid", "width": "1-2", "fields": ["slideshow_parallax_start", "slideshow_parallax_end"] }, "slideshow_kenburns", "slideshow_kenburns_duration" ] }, { "label": "Navigation", "type": "group", "divider": true, "fields": [ "nav", "nav_below", "nav_hover", "nav_vertical", "nav_position", "nav_align", "nav_position_margin", "nav_margin", "nav_breakpoint", { "label": "Thumbnail Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["thumbnav_width", "thumbnav_height"] }, "thumbnav_nowrap", "thumbnav_svg_inline", "thumbnav_svg_color" ] }, { "label": "Slidenav", "type": "group", "divider": true, "fields": [ "slidenav", "slidenav_hover", "slidenav_large", "slidenav_margin", "slidenav_breakpoint", "slidenav_outside_breakpoint" ] }, { "label": "Item", "type": "group", "divider": true, "fields": [ "overlay_link" ] }, { "label": "Overlay", "type": "group", "divider": true, "fields": [ "overlay_container", "overlay_container_padding", "overlay_margin", "overlay_position", "overlay_style", "overlay_padding", "content_expand", "overlay_width", "overlay_animation", "_slideshow_overlay_parallax" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_margin", "_title_parallax" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin", "_meta_parallax" ] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_style", "content_margin", "_content_parallax"] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_text", "link_aria_label", "link_style", "link_size", "link_fullwidth", "link_margin", "_link_parallax" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } }, "panels": { "builder-slideshow-overlay-parallax": { "title": "Overlay Parallax", "width": 500, "fields": { "overlay_parallax_x": { "text": "Translate X", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "overlay_parallax_y": { "text": "Translate Y", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "overlay_parallax_scale": { "text": "Scale", "type": "parallax-stops", "attrs": { "min": 0.3, "max": 4, "step": 0.1 } }, "overlay_parallax_rotate": { "text": "Rotate", "type": "parallax-stops", "attrs": { "min": 0, "max": 360, "step": 10 } }, "overlay_parallax_opacity": { "text": "Opacity", "type": "parallax-stops", "attrs": { "min": 0, "max": 1, "step": 0.1 } } }, "fieldset": { "default": { "fields": [ "overlay_parallax_x", "overlay_parallax_y", "overlay_parallax_scale", "overlay_parallax_rotate", "overlay_parallax_opacity" ] } } }, "builder-slideshow-title-parallax": { "title": "Title Parallax", "width": 500, "fields": { "title_parallax_x": { "text": "Translate X", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "title_parallax_y": { "text": "Translate Y", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "title_parallax_scale": { "text": "Scale", "type": "parallax-stops", "attrs": { "min": 0.3, "max": 4, "step": 0.1 } }, "title_parallax_rotate": { "text": "Rotate", "type": "parallax-stops", "attrs": { "min": 0, "max": 360, "step": 10 } }, "title_parallax_opacity": { "text": "Opacity", "type": "parallax-stops", "attrs": { "min": 0, "max": 1, "step": 0.1 } } }, "fieldset": { "default": { "fields": [ "title_parallax_x", "title_parallax_y", "title_parallax_scale", "title_parallax_rotate", "title_parallax_opacity" ] } } }, "builder-slideshow-meta-parallax": { "title": "Meta Parallax", "width": 500, "fields": { "meta_parallax_x": { "text": "Translate X", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "meta_parallax_y": { "text": "Translate Y", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "meta_parallax_scale": { "text": "Scale", "type": "parallax-stops", "attrs": { "min": 0.3, "max": 4, "step": 0.1 } }, "meta_parallax_rotate": { "text": "Rotate", "type": "parallax-stops", "attrs": { "min": 0, "max": 360, "step": 10 } }, "meta_parallax_opacity": { "text": "Opacity", "type": "parallax-stops", "attrs": { "min": 0, "max": 1, "step": 0.1 } } }, "fieldset": { "default": { "fields": [ "meta_parallax_x", "meta_parallax_y", "meta_parallax_scale", "meta_parallax_rotate", "meta_parallax_opacity" ] } } }, "builder-slideshow-content-parallax": { "title": "Content Parallax", "width": 500, "fields": { "content_parallax_x": { "text": "Translate X", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "content_parallax_y": { "text": "Translate Y", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "content_parallax_scale": { "text": "Scale", "type": "parallax-stops", "attrs": { "min": 0.3, "max": 4, "step": 0.1 } }, "content_parallax_rotate": { "text": "Rotate", "type": "parallax-stops", "attrs": { "min": 0, "max": 360, "step": 10 } }, "content_parallax_opacity": { "text": "Opacity", "type": "parallax-stops", "attrs": { "min": 0, "max": 1, "step": 0.1 } } }, "fieldset": { "default": { "fields": [ "content_parallax_x", "content_parallax_y", "content_parallax_scale", "content_parallax_rotate", "content_parallax_opacity" ] } } }, "builder-slideshow-link-parallax": { "title": "Link Parallax", "width": 500, "fields": { "link_parallax_x": { "text": "Translate X", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "link_parallax_y": { "text": "Translate Y", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "link_parallax_scale": { "text": "Scale", "type": "parallax-stops", "attrs": { "min": 0.3, "max": 4, "step": 0.1 } }, "link_parallax_rotate": { "text": "Rotate", "type": "parallax-stops", "attrs": { "min": 0, "max": 360, "step": 10 } }, "link_parallax_opacity": { "text": "Opacity", "type": "parallax-stops", "attrs": { "min": 0, "max": 1, "step": 0.1 } } }, "fieldset": { "default": { "fields": [ "link_parallax_x", "link_parallax_y", "link_parallax_scale", "link_parallax_rotate", "link_parallax_opacity" ] } } } } } elements/headline/element.php 0000644 00000000351 15175623007 0012300 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['content'] != ''; }, ], ]; elements/headline/element.json 0000644 00000017376 15175623007 0012501 0 ustar 00 { "@import": "./element.php", "name": "headline", "title": "Headline", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "title_element": "h1" }, "placeholder": { "props": { "content": "Headline" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "type": "editor", "root": true, "source": true }, "link": "${builder.link}", "link_target": "${builder.link_target}", "title_style": { "label": "Style", "description": "Headline styles differ in font size and font family.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" } }, "title_decoration": { "label": "Decoration", "description": "Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" } }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" } }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" } }, "link_style": { "type": "checkbox", "text": "Show hover effect if linked.", "enable": "link" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" } }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-link"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "link", "link_target"] }, { "title": "Settings", "fields": [ { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_decoration", "title_font_family", "title_color", "link_style", "title_element" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/headline/templates/content.php 0000644 00000000515 15175623007 0014321 0 ustar 00 <?php if ($props['content'] != '' && $props['link']) : ?> <<?= $props['title_element'] ?>><a href="<?= $props['link'] ?>"><?= $props['content'] ?></a></<?= $props['title_element'] ?>> <?php elseif ($props['content'] != '') : ?> <<?= $props['title_element'] ?>><?= $props['content'] ?></<?= $props['title_element'] ?>> <?php endif ?> elements/headline/templates/template.php 0000644 00000002027 15175623007 0014462 0 ustar 00 <?php $el = $this->el($props['title_element'], [ 'class' => [ 'uk-{title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-margin-remove {@position: absolute}', ], ]); // Link $link = $props['link'] ? $this->el('a', [ 'class' => [ 'el-link', 'uk-link-{0}' => $props['link_style'] ? 'heading' : 'reset', ], 'href' => ['{link}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ], $props['content']) : null; ?> <?= $el($props, $attrs) ?> <?php if ($props['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $link ? $link($props) : $props['content'] ?></span> <?php elseif ($props['title_decoration'] == 'line') : ?> <span><?= $link ? $link($props) : $props['content'] ?></span> <?php else : ?> <?= $link ? $link($props) : $props['content'] ?> <?php endif ?> <?= $el->end() ?> elements/headline/images/iconSmall.svg 0000644 00000000322 15175623007 0014043 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="16" height="1" fill="#444" x="2" y="8" /> <rect width="12" height="1" fill="#444" x="4" y="11" /> </svg> elements/headline/images/icon.svg 0000644 00000000323 15175623007 0013053 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="2" fill="#444" x="2" y="12" /> <rect width="20" height="2" fill="#444" x="5" y="16" /> </svg> elements/headline/updates.php 0000644 00000007743 15175623007 0012330 0 ustar 00 <?php namespace YOOtheme; return [ '2.8.0-beta.0.13' => function ($node) { if (in_array(Arr::get($node->props, 'title_style'), ['meta', 'lead'])) { $node->props['title_style'] = 'text-' . Arr::get($node->props, 'title_style'); } }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if (Arr::get($node->props, 'title_style') === 'heading-hero') { $node->props['title_style'] = 'heading-xlarge'; } if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } if (in_array($style, ['juno', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-medium'; } } if ( in_array($style, [ 'district', 'florence', 'flow', 'nioh-studio', 'summit', 'vision', ]) ) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-large'; } } if ($style == 'lilian') { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-2xlarge'; } } }, ]; elements/overlay-slider/templates/content.php 0000644 00000000522 15175623007 0015507 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/overlay-slider/templates/template.php 0000644 00000013623 15175623007 0015656 0 ustar 00 <?php // Resets if ($props['overlay_link']) { $props['title_link'] = ''; } if (!$props['slider_width']) { $props['slider_height'] = ''; $props['height_expand'] = ''; $props['image_expand'] = true; } if ($props['slider_width'] && $props['slider_height'] ) { $props['height_expand'] = ''; } if ($props['height_expand'] || $props['slider_min_height'] || $props['slider_height']) { $props['image_expand'] = true; } if ($props['slider_height'] == 'viewport') { if ($props['slider_height_viewport'] > 100) { $props['slider_height_offset_top'] = false; } elseif (!$props['slider_height_viewport']) { $props['slider_height_viewport'] = 100; } } if ($props['slider_parallax']) { $props['slidenav'] = ''; } if ($props['content_expand']) { if (in_array($props['overlay_position'], ['top', 'bottom'])) { $props['overlay_position'] = 'cover'; } if (in_array($props['overlay_position'], ['top-center', 'center', 'bottom-center'])) { $props['overlay_position'] = 'center-horizontal'; } if (in_array($props['overlay_position'], ['top-left', 'center-left', 'bottom-left'])) { $props['overlay_position'] = 'left'; } if (in_array($props['overlay_position'], ['top-right', 'center-right', 'bottom-right'])) { $props['overlay_position'] = 'right'; } } // New logic shortcuts $props['overlay_cover'] = $props['overlay_style'] && $props['overlay_mode'] == 'cover'; $el = $this->el('div', [ 'class' => [ 'uk-slider-container {@!slidenav: outside}', // Expand to column height 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], 'uk-slider' => $this->expr([ 'sets: {slider_sets}; {@!slider_parallax}', 'center: {slider_center};', 'finite: {slider_finite};', 'velocity: {slider_velocity}; {@!slider_parallax}', 'autoplay: {slider_autoplay}; [pauseOnHover: false; {@!slider_autoplay_pause}] [autoplayInterval: {slider_autoplay_interval}000;] {@!slider_parallax}', // Parallax 'parallax: true; {@slider_parallax}', 'parallax-easing: {slider_parallax_easing}; {@slider_parallax}', 'parallax-target: {slider_parallax_target}; {@slider_parallax}', 'parallax-start: {slider_parallax_start}; {@slider_parallax}', 'parallax-end: {slider_parallax_end}; {@slider_parallax}', // Overlay active 'clsActivated: uk-transition-active; [active: first; {@overlay_active_first}] {@overlay_display: active}', ], $props) ?: true, ]); // Container $container = $this->el('div', [ 'class' => [ 'uk-position-relative', 'uk-visible-toggle' => ($props['slidenav'] && $props['slidenav_hover']) || ($props['nav'] && $props['nav_hover']), 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], 'tabindex' => ($props['slidenav'] && $props['slidenav_hover']) || ($props['nav'] && $props['nav_hover']) ? '-1' : null, ]); // Slider Container $slider_container = $props['slidenav'] == 'outside' ? $this->el('div', [ 'class' => [ 'uk-slider-container', 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], ]) : null; // Slider Items $slider_items = $this->el('div', [ 'class' => [ 'uk-slider-items', 'uk-grid [uk-grid-{!slider_gap: default}] {@slider_gap}', 'uk-grid-divider {@slider_gap} {@slider_divider}', 'uk-flex-1 {@height_expand}', ], 'style' => [ 'min-height: {slider_min_height}px; {@!slider_height}', 'height: max({0}px, {slider_height_viewport}vh); {@slider_height: viewport} {@!slider_height_offset_top}' => [$props['slider_min_height'] ?: '0'], ], // Height Viewport 'uk-height-viewport' => ($props['slider_height'] == 'viewport' && $props['slider_height_offset_top']) || $props['slider_height'] == 'section' ? [ 'property: height;', 'offset-top: true; {@slider_height_offset_top}', 'min: {slider_min_height};', 'offset-bottom: {0}; {@slider_height: viewport}' => $props['slider_height_viewport'] && $props['slider_height_viewport'] < 100 ? 100 - (int) $props['slider_height_viewport'] : false, 'offset-bottom: !:is(.uk-section-default,.uk-section-muted,.uk-section-primary,.uk-section-secondary) +; {@slider_height: section}', ] : false, ]); $slider_item = $this->el('div', [ 'class' => [ 'uk-width-{slider_width_default} {@slider_width}', 'uk-width-{slider_width_small}@s {@slider_width}', 'uk-width-{slider_width_medium}@m {@slider_width}', 'uk-width-{slider_width_large}@l {@slider_width}', 'uk-width-{slider_width_xlarge}@xl {@slider_width}', // Can't use `uk-grid-match` on the parent because `flex-wrap: warp` creates a multi-line flex container which doesn't shrink the child height if its content is larger 'uk-flex' => $props['image_expand'], 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]] {@image_expand}', ], ]); ?> <?= $el($props, $attrs) ?> <?= $container($props) ?> <?php if ($slider_container) : ?> <?= $slider_container($props) ?> <?php endif ?> <?= $slider_items($props) ?> <?php foreach ($children as $child) : ?> <?= $slider_item($props, $builder->render($child, ['element' => $props])) ?> <?php endforeach ?> <?= $slider_items->end() ?> <?php if ($slider_container) : ?> <?= $slider_container->end() ?> <?php endif ?> <?php if ($props['slidenav']) : ?> <?= $this->render("{$__dir}/template-slidenav") ?> <?php endif ?> <?php if ($props['nav'] && !$props['nav_below']) : ?> <?= $this->render("{$__dir}/template-nav") ?> <?php endif ?> <?= $container->end() ?> <?php if ($props['nav'] && $props['nav_below']) : ?> <?= $this->render("{$__dir}/template-nav") ?> <?php endif ?> <?= $el->end() ?> elements/overlay-slider/templates/template-nav.php 0000644 00000002131 15175623007 0016430 0 ustar 00 <?php $nav = $this->el('ul', [ 'class' => [ 'el-nav uk-slider-nav', 'uk-{nav}', // Alignment 'uk-flex-{nav_align} {@nav_below}', // Vertical 'uk-{nav}-vertical {@nav_vertical} {@!nav_below}', // Wrapping 'uk-flex-right {@!nav_vertical} {@!nav_below} {@nav_position: .*-right}', 'uk-flex-center {@!nav_vertical} {@!nav_below} {@nav_position: bottom-center}', ], 'uk-margin' => !$props['nav_vertical'], ]); $nav_container = $this->el('div', [ 'class' => [ // Margin 'uk-margin[-{nav_margin}]-top {@nav_below}', // Position 'uk-position-{nav_position} {@!nav_below}', // Margin 'uk-position-{nav_position_margin} {@!nav_below}', // Hover 'uk-hidden-hover uk-hidden-touch {@nav_hover}', // Breakpoint 'uk-visible@{nav_breakpoint}', // Initial text color 'uk-{text_color} {@!nav_below}', ], 'uk-inverse' => true, ]); ?> <?= $nav_container($props) ?> <?= $nav($props, '') ?> <?= $nav_container->end() ?> elements/overlay-slider/templates/template-slidenav.php 0000644 00000004627 15175623007 0017465 0 ustar 00 <?php $slidenav = $this->el('a', [ 'class' => [ 'el-slidenav', 'uk-slidenav-large {@slidenav_large}', ], 'href' => '#', // WordPress Preview reloads if `href` is empty ]); $attrs_slidenav_next = [ 'uk-slidenav-next' => true, 'uk-slider-item' => 'next', ]; $attrs_slidenav_previous = [ 'uk-slidenav-previous' => true, 'uk-slider-item' => 'previous', ]; $slidenav_container = $this->el('div', [ 'class' => [ 'uk-visible@{slidenav_breakpoint}', 'uk-hidden-hover uk-hidden-touch {@slidenav_hover}', // Initial text color 'uk-{text_color} {@!slidenav: outside}', ], 'uk-inverse' => true, ]); if (in_array($props['slidenav'], ['default', 'outside'])) { $slidenav_container->attr([ 'class' => [ 'uk-position-{slidenav_margin}', ], ]); $attrs_slidenav_container_next = [ 'class' => [ 'uk-position-center-right {@slidenav: default}', 'uk-position-center-right-out {@slidenav: outside}', ], 'uk-toggle' => [ 'cls: uk-position-center-right-out uk-position-center-right; mode: media; media: @{slidenav_outside_breakpoint} {@slidenav: outside}', ], ]; $attrs_slidenav_container_previous = [ 'class' => [ 'uk-position-center-left {@slidenav: default}', 'uk-position-center-left-out {@slidenav: outside}', ], 'uk-toggle' => [ 'cls: uk-position-center-left-out uk-position-center-left; mode: media; media: @{slidenav_outside_breakpoint} {@slidenav: outside}', ], ]; } else { $slidenav_container->attr([ 'class' => [ 'uk-slidenav-container uk-position-{slidenav} [uk-position-{slidenav_margin}]', ], ]); } ?> <?php if (!in_array($props['slidenav'], ['default', 'outside'])) : ?> <?= $slidenav_container($props) ?> <?= $slidenav($props, $attrs_slidenav_previous, '') ?> <?= $slidenav($props, $attrs_slidenav_next, '') ?> <?= $slidenav_container->end() ?> <?php else : ?> <?= $slidenav_container($props, $attrs_slidenav_container_previous) ?> <?= $slidenav($props, $attrs_slidenav_previous, '') ?> <?= $slidenav_container->end() ?> <?= $slidenav_container($props, $attrs_slidenav_container_next) ?> <?= $slidenav($props, $attrs_slidenav_next, '') ?> <?= $slidenav_container->end() ?> <?php endif ?> elements/overlay-slider/element.json 0000644 00000147451 15175623007 0013667 0 ustar 00 { "name": "overlay-slider", "title": "Overlay Slider", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_link": true, "show_hover_image": true, "show_hover_video": true, "slider_width": "fixed", "slider_width_default": "1-1", "slider_width_medium": "1-3", "slider_gap": "default", "slider_autoplay_pause": true, "nav": "dotnav", "nav_below": true, "nav_position": "bottom-center", "nav_position_margin": "medium", "nav_align": "center", "nav_breakpoint": "s", "slidenav": "default", "slidenav_margin": "medium", "slidenav_breakpoint": "s", "slidenav_outside_breakpoint": "xl", "overlay_mode": "cover", "overlay_position": "center", "overlay_transition": "fade", "title_hover_style": "reset", "title_element": "h3", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "link_text": "Read more", "link_style": "default", "text_align": "center", "margin": "default" }, "placeholder": { "children": [ { "type": "overlay-slider_item", "props": {} }, { "type": "overlay-slider_item", "props": {} }, { "type": "overlay-slider_item", "props": {} }, { "type": "overlay-slider_item", "props": {} }, { "type": "overlay-slider_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "overlay-slider_item", "media": [ { "type": "image", "item": { "title": "title", "image": "src" } }, { "type": "video", "item": { "title": "title", "video": "src" } } ] }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_link": { "type": "checkbox", "text": "Show the link" }, "show_hover_image": { "type": "checkbox", "text": "Show the hover image" }, "show_hover_video": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the hover video" }, "slider_width": { "label": "Item Width Mode", "description": "Define whether the width of the slider items is fixed or automatically expanded by its content widths.", "type": "select", "options": { "Fixed": "fixed", "Auto": "" } }, "slider_height": { "type": "select", "options": { "Auto": "", "Viewport": "viewport", "Viewport (Subtract Next Section)": "section" }, "enable": "slider_width" }, "slider_height_viewport": { "type": "number", "attrs": { "placeholder": "100", "min": 0, "max": 100, "step": 10, "class": "uk-form-width-xsmall" }, "enable": "slider_width && slider_height == 'viewport'" }, "height_expand": { "type": "checkbox", "text": "Fill the available column space", "enable": "slider_width && !slider_height" }, "slider_height_offset_top": { "type": "checkbox", "text": "Subtract height above", "enable": "slider_width && slider_height == 'viewport' && (slider_height_viewport || 0) <= 100 || slider_height == 'section'" }, "slider_min_height": { "label": "Min Height", "description": "Use an optional minimum height to prevent the slider from becoming smaller than its content on small devices.", "type": "range", "attrs": { "min": 200, "max": 800, "step": 50 } }, "slider_gap": { "label": "Column Gap", "description": "Set the size of the gap between the grid columns.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "default", "Large": "large", "None": "" } }, "slider_divider": { "label": "Divider", "description": "Show a divider between grid columns.", "type": "checkbox", "text": "Show dividers", "enable": "slider_gap" }, "slider_width_default": { "label": "Phone Portrait", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_small": { "label": "Phone Landscape", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_medium": { "label": "Tablet Landscape", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_large": { "label": "Desktop", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_xlarge": { "label": "Large Screens", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_sets": { "label": "Sets", "description": "Group items into sets. The number of items within a set depends on the defined item width, e.g. <i>33%</i> means that each set contains 3 items.", "type": "checkbox", "text": "Slide all visible items at once", "enable": "!slider_parallax" }, "slider_center": { "label": "Center", "type": "checkbox", "text": "Center the active slide" }, "slider_finite": { "label": "Finite", "type": "checkbox", "text": "Disable infinite scrolling" }, "slider_velocity": { "label": "Velocity", "description": "Set the velocity in pixels per millisecond.", "type": "range", "attrs": { "min": 0.2, "max": 3, "step": 0.1, "placeholder": "1" }, "enable": "!slider_parallax" }, "slider_autoplay": { "label": "Autoplay", "type": "checkbox", "text": "Enable autoplay", "enable": "!slider_parallax" }, "slider_autoplay_pause": { "type": "checkbox", "text": "Pause autoplay on hover", "enable": "!slider_parallax && slider_autoplay" }, "slider_autoplay_interval": { "label": "Autoplay Interval", "description": "Set the autoplay interval in seconds.", "type": "range", "attrs": { "min": 5, "max": 15, "step": 1, "placeholder": "7" }, "enable": "!slider_parallax && slider_autoplay" }, "slider_parallax": { "label": "Parallax", "description": "Add a stepless parallax animation based on the scroll position.", "type": "checkbox", "text": "Enable parallax effect" }, "slider_parallax_easing": { "label": "Parallax Easing", "description": "Set the animation easing. Zero transitions at an even speed, a negative value starts off quickly while a positive value starts off slowly.", "type": "range", "attrs": { "min": -2, "max": 2, "step": 0.1 }, "enable": "slider_parallax" }, "slider_parallax_target": { "label": "Parallax Target", "description": "The animation starts and stops depending on the element position in the viewport. Alternatively, use the position of a parent container.", "type": "select", "options": { "Element": "", "Column": "!.tm-grid-expand>*", "Row": "!.tm-grid-expand", "Section": "!.uk-section", "Next Section": "![class*='uk-section-'] ~ [class*='uk-section-']" }, "enable": "slider_parallax" }, "slider_parallax_start": { "enable": "slider_parallax" }, "slider_parallax_end": { "enable": "slider_parallax" }, "nav": { "label": "Navigation", "description": "Select the navigation type.", "type": "select", "options": { "None": "", "Dotnav": "dotnav" } }, "nav_below": { "type": "checkbox", "text": "Show below slider", "enable": "nav" }, "nav_hover": { "type": "checkbox", "text": "Show on hover only", "enable": "nav && !nav_below" }, "nav_vertical": { "type": "checkbox", "text": "Vertical navigation", "enable": "nav && !nav_below" }, "nav_position": { "label": "Position", "description": "Select the position of the navigation.", "type": "select", "options": { "Top Left": "top-left", "Top Right": "top-right", "Center Left": "center-left", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "show": "nav && !nav_below" }, "nav_align": { "label": "Position", "description": "Align the navigation items.", "type": "select", "options": { "Left": "left", "Center": "center", "Right": "right" }, "show": "nav && nav_below" }, "nav_position_margin": { "label": "Margin", "description": "Apply a margin between the navigation and the slideshow container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "show": "nav && !nav_below" }, "nav_margin": { "label": "Margin", "description": "Set the vertical margin.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large" }, "show": "nav && nav_below" }, "nav_breakpoint": { "label": "Breakpoint", "description": "Display the navigation only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "nav" }, "slidenav": { "label": "Position", "description": "Select the position of the slidenav.", "type": "select", "options": { "None": "", "Default": "default", "Outside": "outside", "Top Left": "top-left", "Top Right": "top-right", "Center Left": "center-left", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "enable": "!slider_parallax" }, "slidenav_hover": { "type": "checkbox", "text": "Show on hover only", "enable": "slidenav && !slider_parallax" }, "slidenav_large": { "type": "checkbox", "text": "Larger style", "enable": "slidenav && !slider_parallax" }, "slidenav_margin": { "label": "Margin", "description": "Apply a margin between the slidenav and the slider container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "slidenav && !slider_parallax" }, "slidenav_breakpoint": { "label": "Breakpoint", "description": "Display the slidenav only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "slidenav && !slider_parallax" }, "slidenav_outside_breakpoint": { "label": "Outside Breakpoint", "description": "Display the slidenav outside only on this device width and larger. Otherwise, display it inside.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "slidenav == 'outside' && !slider_parallax" }, "image_expand": { "label": "Height", "description": "Expand the height of the image to fill the available space in the item.", "type": "checkbox", "text": "Expand image" }, "overlay_link": { "label": "Link", "description": "Link the whole overlay if a link exists.", "type": "checkbox", "text": "Link overlay", "enable": "show_link" }, "overlay_mode": { "label": "Mode", "description": "When using cover mode, you need to set the text color manually.", "type": "select", "options": { "Cover": "cover", "Caption": "caption" } }, "overlay_display": { "label": "Display", "description": "Show the overlay only on hover or when the slide becomes active.", "type": "select", "options": { "Always": "", "Hover": "hover", "Active": "active" } }, "overlay_active_first": { "type": "checkbox", "text": "Make only first item active", "enable": "overlay_display == 'active'" }, "overlay_transition_background": { "type": "checkbox", "text": "Animate background only", "enable": "overlay_display && overlay_mode == 'cover' && overlay_style" }, "overlay_style": { "label": "Style", "description": "Select the style for the overlay.", "type": "select", "options": { "None": "", "Overlay Default": "overlay-default", "Overlay Primary": "overlay-primary", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "overlay_position": { "label": "Position", "description": "Select the overlay or content position.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right", "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right", "Center": "center", "Center Left": "center-left", "Center Right": "center-right" } }, "overlay_margin": { "label": "Margin", "description": "Apply a margin between the overlay and the image container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "overlay_style" }, "overlay_padding": { "label": "Padding", "description": "Set the padding between the overlay and its content.", "type": "select", "options": { "Default": "", "Small": "small", "Large": "large", "None": "none" } }, "content_expand": { "label": "Height", "description": "Expand the height of the content to fill the available space in the overlay and push the link to the bottom.", "type": "checkbox", "text": "Expand content" }, "overlay_maxwidth": { "label": "Max Width", "description": "Set the maximum content width.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "!$match(overlay_position, '^(top|bottom)$')" }, "text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" } }, "text_color_hover": { "type": "checkbox", "text": "Inverse on hover or when active", "enable": "!overlay_style && (show_hover_image || show_hover_video) || overlay_style && overlay_mode == 'cover' && overlay_display && overlay_transition_background" }, "text_blend": { "type": "checkbox", "text": "Blend with image", "enable": "!overlay_style" }, "overlay_transition": { "label": "Transition", "description": "Select a transition for the overlay when it appears on hover or when active.", "type": "select", "options": { "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "overlay_display" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly" }, "image_transition": { "label": "Transition", "description": "Select an image transition.", "type": "select", "options": { "None": "", "Scale Up": "scale-up", "Scale Down": "scale-down" } }, "title_transition": { "label": "Transition", "description": "Select a transition for the title when the overlay appears on hover or when active.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_title && overlay_display" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "show_title && show_link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "show_title && show_link && (title_link || overlay_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title" }, "meta_transition": { "label": "Transition", "description": "Select a transition for the meta text when the overlay appears on hover or when active.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_meta && overlay_display" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "content_transition": { "label": "Transition", "description": "Select a transition for the content when the overlay appears on hover or when active.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_content && overlay_display" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content" }, "link_target": { "label": "Target", "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "enable": "show_link" }, "link_transition": { "label": "Transition", "description": "Select a transition for the link when the overlay appears on hover or when active.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" }, "enable": "show_link && overlay_display" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-nav</code>, <code>.el-item</code>, <code>.el-slidenav</code>, <code>.el-image</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-link</code>, <code>.el-hover-image</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-item", ".el-nav", ".el-slidenav", ".el-image", ".el-title", ".el-meta", ".el-content", ".el-link", ".el-hover-image" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_link", "show_hover_image", "show_hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Slider", "type": "group", "divider": true, "fields": [ "slider_width", { "label": "Height", "description": "The height will adapt automatically based on its content. Alternatively, the height can adapt to the height of the viewport. <br><br>Note: Make sure no height is set in the section settings when using one of the viewport options.", "name": "_slider_height", "type": "grid", "width": "expand,auto", "gap": "small", "fields": ["slider_height", "slider_height_viewport"] }, "height_expand", "slider_height_offset_top", "slider_min_height", "slider_gap", "slider_divider" ] }, { "label": "Item Width", "type": "group", "divider": true, "fields": [ "slider_width_default", "slider_width_small", "slider_width_medium", "slider_width_large", "slider_width_xlarge" ] }, { "label": "Animation", "type": "group", "divider": true, "fields": [ "slider_sets", "slider_center", "slider_finite", "slider_velocity", "slider_autoplay", "slider_autoplay_pause", "slider_autoplay_interval", "slider_parallax", "slider_parallax_easing", "slider_parallax_target", { "label": "Parallax Start/End", "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the target's height.", "type": "grid", "width": "1-2", "fields": ["slider_parallax_start", "slider_parallax_end"] } ] }, { "label": "Navigation", "type": "group", "divider": true, "fields": [ "nav", "nav_below", "nav_hover", "nav_vertical", "nav_position", "nav_align", "nav_position_margin", "nav_margin", "nav_breakpoint" ] }, { "label": "Slidenav", "type": "group", "divider": true, "fields": [ "slidenav", "slidenav_hover", "slidenav_large", "slidenav_margin", "slidenav_breakpoint", "slidenav_outside_breakpoint" ] }, { "label": "Item", "type": "group", "divider": true, "fields": [ "image_expand", "overlay_link" ] }, { "label": "Overlay", "type": "group", "divider": true, "fields": [ "overlay_mode", "overlay_display", "overlay_active_first", "overlay_transition_background", "overlay_style", "overlay_position", "overlay_margin", "overlay_padding", "content_expand", "overlay_maxwidth", "text_color", "text_color_hover", "text_blend", "overlay_transition" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_transition" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_transition", "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_transition", "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_transition", "content_style", "content_margin"] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_text", "link_aria_label", "link_transition", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/overlay-slider/updates.php 0000644 00000017224 15175623007 0013513 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.1' => function ($node) { if (!Arr::get($node->props, 'text_color') && Arr::get($node->props, 'slidenav_color')) { $node->props['text_color'] = Arr::get($node->props, 'slidenav_color'); } unset( $node->props['nav_color'], $node->props['slidenav_color'], $node->props['slidenav_outside_color'], $node->props['overlay_hover'] ); }, '4.3.0-beta.0.5' => function ($node, $params) { if ($height = Arr::get($node->props, 'slider_height')) { if ($height === 'full' || $height === 'percent') { $node->props['slider_height'] = 'viewport'; } if ($height === 'percent') { $node->props['slider_height_viewport'] = 80; } if ( ($params['updateContext']['sectionIndex'] ?? 0) < 2 && empty($params['updateContext']['height']) ) { $node->props['slider_height_offset_top'] = true; } $params['updateContext']['height'] = true; } }, '4.3.0-beta.0.4' => function ($node) { if (Arr::get($node->props, 'overlay_hover')) { $node->props['overlay_display'] = 'hover'; } unset($node->props['overlay_hover']); }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'overlay_link') && Arr::get($node->props, 'css')) { $node->props['css'] = str_replace( '.el-item', ':has(> .el-item)', $node->props['css'], ); } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.7.0-beta.0.4' => function ($node) { if (empty($node->props['slider_width']) || empty($node->props['slider_height'])) { unset($node->props['slider_min_height']); } }, '2.2.2.1' => function ($node) { Arr::updateKeys($node->props, [ 'link_type' => function ($value) { if ($value === 'content') { return [ 'title_link' => true, 'link_text' => '', ]; } elseif ($value === 'element') { return [ 'overlay_link' => true, 'link_text' => '', ]; } }, ]); }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'overlay_maxwidth') === 'xxlarge') { $node->props['overlay_maxwidth'] = '2xlarge'; } }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, ['slider_gutter' => 'slider_gap']); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_style') === 'heading-hero') { $node->props['title_style'] = 'heading-xlarge'; } if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } if (in_array($style, ['juno', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-medium'; } } if ( in_array($style, [ 'district', 'florence', 'flow', 'nioh-studio', 'summit', 'vision', ]) ) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-large'; } } if ($style == 'lilian') { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-2xlarge'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } $node->props['link_type'] = 'element'; }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.0' => function ($node) { if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/overlay-slider/images/icon.svg 0000644 00000001253 15175623007 0014246 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="12" height="2" fill="#444" x="9" y="10" /> <rect width="8" height="2" fill="#444" x="11" y="13" /> <rect width="28" height="22" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="20" height="14" fill="none" stroke="#444" stroke-width="2" x="5" y="5" /> <path fill="#444" d="M10.504,27A1.5,1.5,0,1,1,9,28.502,1.50206,1.50206,0,0,1,10.504,27Z" /> <path fill="#444" d="M15.504,27A1.5,1.5,0,1,1,14,28.502,1.50206,1.50206,0,0,1,15.504,27Z" /> <path fill="#444" d="M20.504,27A1.5,1.5,0,1,1,19,28.502,1.50206,1.50206,0,0,1,20.504,27Z" /> </svg> elements/overlay-slider/images/iconSmall.svg 0000644 00000000775 15175623007 0015247 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <circle fill="#444" cx="7" cy="19" r="1" /> <circle fill="#444" cx="10" cy="19" r="1" /> <circle fill="#444" cx="13" cy="19" r="1" /> <rect width="19" height="15" fill="none" stroke="#444" x="0.5" y="0.5" /> <rect width="15" height="11" fill="none" stroke="#444" x="2.5" y="2.5" /> <rect width="8" height="1" fill="#444" x="6" y="7" /> <rect width="6" height="1" fill="#444" x="7" y="9" /> </svg> elements/switcher_item/element.json 0000644 00000011051 15175623007 0013556 0 ustar 00 { "@import": "./element.php", "name": "switcher_item", "title": "Item", "width": 500, "placeholder": { "props": { "title": "Title", "meta": "", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "image": "", "label": "", "thumbnail": "" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": "${builder.image}", "image_alt": "${builder.image_alt}", "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "label": { "label": "Navigation Label", "source": true }, "thumbnail": { "label": "Navigation Thumbnail", "description": "This is only used, if the thumbnail navigation is set.", "type": "image", "source": true }, "item_element": "${builder.html_element_item}", "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image" }, "thumbnail_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "thumbnail" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "title", "meta", "content", "image", "image_alt", "link", "link_text", "label", "thumbnail" ] }, { "title": "Settings", "fields": [ { "label": "Item", "type": "group", "divider": true, "fields": [ "item_element" ] }, { "label": "Image", "type": "group", "divider": true, "fields": ["image_focal_point"] }, { "label": "Thumbnail", "type": "group", "fields": ["thumbnail_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/switcher_item/element.php 0000644 00000001663 15175623007 0013404 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['meta', 'content', 'image', 'link', 'label', 'thumbnail'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; } } // Don't render element if content fields are empty // First part checks for title, second part checks for content return ($node->props['title'] != '' || $node->props['label'] != '' || $node->props['thumbnail'] || $node->props['image']) && (($node->props['title'] != '' && $params['parent']->props['show_title']) || $node->props['meta'] != '' || $node->props['content'] != '' || $node->props['image']); }, ], ]; elements/switcher_item/templates/template.php 0000644 00000002773 15175623007 0015567 0 ustar 00 <?php // Display if (!$element['show_title']) { $props['title'] = ''; } // Item $el = $props['item_element'] ? $this->el($props['item_element']) : null; // Image $image = $this->render("{$__dir}/template-image", compact('props')); // Image Align $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand', $element['image_grid_column_gap'] == $element['image_grid_row_gap'] ? 'uk-grid-{image_grid_column_gap}' : '[uk-grid-column-{image_grid_column_gap}] [uk-grid-row-{image_grid_row_gap}]', 'uk-flex-middle {@image_vertical_align}', ], 'uk-grid' => true, ]); $cell_image = $this->el('div', [ 'class' => [ 'uk-width-{image_grid_width}@{image_grid_breakpoint}', 'uk-flex-last@{image_grid_breakpoint} {@image_align: right}', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-margin-remove-first-child', ], ]); ?> <?php if ($el) : ?> <?= $el($element) ?> <?php endif ?> <?php if ($image && in_array($element['image_align'], ['left', 'right'])) : ?> <?= $grid($element) ?> <?= $cell_image($element, $image) ?> <?= $cell_content($element, $this->render("{$__dir}/template-content", compact('props'))) ?> <?= $grid->end() ?> <?php else : ?> <?= $element['image_align'] == 'top' ? $image : '' ?> <?= $this->render("{$__dir}/template-content", compact('props')) ?> <?= $element['image_align'] == 'bottom' ? $image : '' ?> <?php endif ?> <?php if ($el) : ?> <?= $el->end() ?> <?php endif ?> elements/switcher_item/templates/content.php 0000644 00000001101 15175623007 0015406 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/switcher_item/templates/template-content.php 0000644 00000011355 15175623007 0017233 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', ], ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style}', 'uk-dropcap {@content_dropcap}', 'uk-column-{content_column}[@{content_column_breakpoint}]', 'uk-column-divider {@content_column} {@content_column_divider}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), ], ]); // Link $link = $this->el('a', [ 'class' => [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-(muted|text)} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', ], 'href' => $props['link'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', ], ]); // Title Grid $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand', $element['title_grid_column_gap'] == $element['title_grid_row_gap'] ? 'uk-grid-{title_grid_column_gap}' : '[uk-grid-column-{title_grid_column_gap}] [uk-grid-row-{title_grid_row_gap}]', 'uk-margin[-{title_margin}]-top {@!title_margin: remove} {@image_align: top}' => !$props['meta'] || $element['meta_align'] != 'above-title', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove} {@image_align: top} {@meta_align: above-title}' => $props['meta'], ], 'uk-grid' => true, ]); $cell_title = $this->el('div', [ 'class' => [ 'uk-width-{!title_grid_width: expand}[@{title_grid_breakpoint}]', 'uk-margin-remove-first-child', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-width-auto[@{title_grid_breakpoint}] {@title_grid_width: expand}', 'uk-margin-remove-first-child', ], ]); ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $grid($element) ?> <?= $cell_title($element) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $cell_title->end() ?> <?= $cell_content($element) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $cell_content->end() ?> <?= $grid->end() ?> <?php endif ?> elements/switcher_item/templates/template-image.php 0000644 00000003035 15175623007 0016637 0 ustar 00 <?php if (!$props['image']) { return; } $image = $this->el('image', [ 'class' => [ 'el-image', 'uk-border-{image_border}', 'uk-box-shadow-{image_box_shadow}', 'uk-box-shadow-hover-{image_hover_box_shadow} {@link}', 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', 'uk-margin[-{image_margin}]-top {@!image_margin: remove} {@!image_box_decoration} {@image_align: bottom}', ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, ]); $props['image'] = $image($element); // Box decoration if ($element['image_box_decoration']) { $decoration = $this->el('div', [ 'class' => [ 'uk-box-shadow-bottom {@image_box_decoration: shadow}', 'tm-mask-default {@image_box_decoration: mask}', 'tm-box-decoration-{image_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@image_box_decoration_inverse} {@image_box_decoration: default|primary|secondary}', 'uk-inline {@!image_box_decoration: |shadow}', 'uk-margin[-{image_margin}]-top {@!image_margin: remove} {@image_align: bottom}', ], ]); $props['image'] = $decoration($element, $props['image']); } echo $props['image']; elements/description_list_item/element.php 0000644 00000001071 15175623007 0015123 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['title', 'meta', 'content', 'link'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; } } // Don't render element if content fields are empty return $node->props['title'] != '' || $node->props['meta'] != '' || $node->props['content'] != ''; }, ], ]; elements/description_list_item/templates/template-title.php 0000644 00000001465 15175623007 0020431 0 ustar 00 <?php namespace YOOtheme; if ($props['title'] == '') { return; } // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title uk-margin-remove', 'uk-{title_style}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', ], ]); // Leader if ($element['title_leader'] && $element['layout'] == 'grid-2-m' && $element['title_grid_width'] == 'expand') { $title->attr('uk-leader', $element['title_grid_breakpoint'] ? ['media: @{title_grid_breakpoint}'] : true); } // Color if ($element['title_color'] == 'background') { $props['title'] = "<span class=\"uk-text-background\">{$props['title']}</span>"; } // Colon if ($element['title_colon']) { $props['title'] .= ':'; } ?> <?= $title($element, $props['title']) ?> elements/description_list_item/templates/template-meta.php 0000644 00000000434 15175623007 0020231 0 ustar 00 <?php if ($props['meta'] == '') { return; } // Meta $meta = $this->el('div', [ 'class' => [ 'el-meta', 'uk-{meta_style} [uk-margin-remove {@meta_style: h1|h2|h3|h4|h5|h6}]', 'uk-text-{meta_color}', ], ]); echo $meta($element, $props['meta']); elements/description_list_item/templates/template-content.php 0000644 00000001200 15175623007 0020745 0 ustar 00 <?php namespace YOOtheme; if ($props['content'] == '') { return; } // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style} [uk-margin-remove {@content_style: h1|h2|h3|h4|h5|h6}]', ], ]); // Link $link = $this->el('a', [ 'class' => [ 'uk-link-{0}' => $element['link_style'], 'uk-margin-remove-last-child', ], 'href' => ['{link}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); echo $content($element, $props['link'] ? $link($props, $props['content']) : $props['content']); elements/description_list_item/templates/content.php 0000644 00000000576 15175623007 0017153 0 ustar 00 <?php if ($props['title'] != '') : ?> <h3><?= $props['title'] ?></h3> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '' && $props['link']) : ?> <a href="<?= $props['link'] ?>"><?= $props['content'] ?></a> <?php elseif ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> elements/description_list_item/templates/template.php 0000644 00000005502 15175623007 0017306 0 ustar 00 <?php // Layout $grid = $this->el('div', [ 'class' => [ 'uk-child-width-{0}[@{title_grid_breakpoint}]' => $element['title_grid_width'] == 'expand' ? 'auto' : 'expand', $element['title_grid_column_gap'] == $element['title_grid_row_gap'] ? 'uk-grid-{title_grid_column_gap}' : '[uk-grid-column-{title_grid_column_gap}] [uk-grid-row-{title_grid_row_gap}]', $element['layout'] == 'grid-2-m' ? $element['title_leader'] && $element['title_grid_width'] == 'expand' ? 'uk-flex-bottom' : 'uk-flex-middle' : '', ], 'uk-grid' => true, ]); $cell = $this->el('div', [ 'class' => [ 'uk-width-{title_grid_width}[@{title_grid_breakpoint}]', 'uk-text-break {@title_grid_width: small|medium}', ], ]); ?> <?php if ($element['layout'] == 'stacked') : ?> <?php if ($element['meta_align'] == 'above-title') : ?> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> <?php endif ?> <?= $this->render("{$__dir}/template-title", compact('props')) ?> <?php if (in_array($element['meta_align'], ['below-title', 'above-content'])) : ?> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> <?php endif ?> <?= $this->render("{$__dir}/template-content", compact('props')) ?> <?php if ($element['meta_align'] == 'below-content') : ?> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> <?php endif ?> <?php elseif ($element['layout'] == 'grid-2') : ?> <?= $grid($element) ?> <?= $cell($element) ?> <?php if ($element['meta_align'] == 'above-title') : ?> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> <?php endif ?> <?= $this->render("{$__dir}/template-title", compact('props')) ?> <?php if ($element['meta_align'] == 'below-title') : ?> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> <?php endif ?> <?= $cell->end() ?> <div> <?php if ($element['meta_align'] == 'above-content') : ?> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> <?php endif ?> <?= $this->render("{$__dir}/template-content", compact('props')) ?> <?php if ($element['meta_align'] == 'below-content') : ?> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> <?php endif ?> </div> <?= $grid->end() ?> <?php else : ?> <?= $grid($element) ?> <?= $cell($element, $this->render("{$__dir}/template-title", compact('props'))) ?> <div> <?= $this->render("{$__dir}/template-meta", compact('props')) ?> </div> <?= $grid->end() ?> <?= $this->render("{$__dir}/template-content", compact('props')) ?> <?php endif ?> elements/description_list_item/element.json 0000644 00000002254 15175623007 0015311 0 ustar 00 { "@import": "./element.php", "name": "description_list_item", "title": "Item", "width": 500, "placeholder": { "props": { "title": "Title", "meta": "", "content": "Lorem ipsum dolor sit amet." } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "link": "${builder.link}", "link_target": "${builder.link_target}", "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["title", "meta", "content", "link", "link_target"] }, "${builder.advancedItem}" ] } } } elements/video/images/iconSmall.svg 0000644 00000000363 15175623007 0013405 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polygon fill="none" stroke="#444" points="7.5,8 12.2,10.5 7.5,13" /> <rect width="18" height="14" fill="none" stroke="#444" x="0.5" y="3.5" /> </svg> elements/video/images/icon.svg 0000644 00000000422 15175623007 0012410 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polygon fill="none" stroke="#444" stroke-width="2" points="12,10.5 20,15.1 12,19.5" /> <rect width="28" height="22" fill="none" stroke="#444" stroke-width="2" x="1" y="4" /> </svg> elements/video/updates.php 0000644 00000000665 15175623007 0011661 0 ustar 00 <?php namespace YOOtheme; return [ '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.18.0' => function ($node) { if ( !isset($node->props['video_box_decoration']) && Arr::get($node->props, 'video_box_shadow_bottom') === true ) { $node->props['video_box_decoration'] = 'shadow'; } }, ]; elements/video/templates/template.php 0000644 00000007174 15175623007 0014027 0 ustar 00 <?php namespace YOOtheme; use YOOtheme\Http\Uri; /** @var ImageProvider $imageProvider */ $imageProvider = app(ImageProvider::class); $el = $this->el('div', [ 'class' => [ // Expand to column height 'uk-flex-1 uk-flex {@height_expand}', ], ]); // Video if ($iframe = $this->iframeVideo($props['video'], [], false)) { $video = $this->el('iframe', [ 'src' => $iframe, 'allow' => 'autoplay', 'allowfullscreen' => true, 'uk-responsive' => true, 'loading' => ['lazy {@video_lazyload}'], 'title' => $props['video_title'], ]); $ratio = $this->isYouTubeShorts($props['video']) ? 9 / 16 : 16 / 9; if ($props['video_width'] && !$props['video_height']) { $props['video_height'] = round((int) $props['video_width'] / $ratio); } elseif ($props['video_height'] && !$props['video_width']) { $props['video_width'] = round((int) $props['video_height'] * $ratio); } } else { $video = $this->el('video', [ 'src' => $props['video'], 'controls' => $props['video_controls'], 'loop' => $props['video_loop'], 'muted' => $props['video_muted'], 'playsinline' => $props['video_playsinline'], 'preload' => ['none {@video_lazyload}'], $props['video_autoplay'] === 'inview' ? 'uk-video' : 'autoplay' => $props['video_autoplay'], 'class' => [ 'el-image', 'uk-object-cover [uk-object-{image_focal_point}]' => $props['video_viewport_height'] || $props['height_expand'], ], 'style' => [ 'height: 100vh; {@video_viewport_height} {@!height_expand}', ], ]); if ($props['video_poster']) { if ($props['video_width'] || $props['video_height']) { $thumbnail = [$props['video_width'], $props['video_height'], '']; if (!empty($props['video_poster_focal_point'])) { [$y, $x] = explode('-', $props['video_poster_focal_point']); $thumbnail += [3 => $x, 4 => $y]; } $props['video_poster'] = (string) (new Uri($props['video_poster']))->withFragment('thumbnail=' . implode(',', $thumbnail)); } $video->attr([ 'poster' => $imageProvider->getUrl($props['video_poster']), ]); } elseif ($props['video_width'] && $props['video_height']) { if (!$props['height_expand']) { $video->attr(['style' => ["aspect-ratio: {$props['video_width']} / {$props['video_height']};"]]); } else { // Fix bug in Safari not stretching an image beyond its intrinsic height $video->attr(['style' => ["aspect-ratio: auto;"]]); } } } $video->attr([ 'class' => [ 'uk-box-shadow-{video_box_shadow}', 'uk-inverse-{text_color}', ], 'width' => $props['video_width'], 'height' => $props['video_height'], ]); // Box decoration $decoration = $this->el('div', [ 'class' => [ 'uk-box-shadow-bottom {@video_box_decoration: shadow}', 'tm-mask-default {@video_box_decoration: mask}', 'tm-box-decoration-{video_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@video_box_decoration_inverse} {@video_box_decoration: default|primary|secondary}', 'uk-inline {@!video_box_decoration: |shadow}', 'uk-flex {@height_expand}', ], ]); ?> <?= $el($props, $attrs) ?> <?php if ($props['video_box_decoration']) : ?> <?= $decoration($props) ?> <?php endif ?> <?= $video($props, '') ?> <?php if ($props['video_box_decoration']) : ?> <?= $decoration->end() ?> <?php endif ?> <?= $el->end() ?> elements/video/templates/content.php 0000644 00000000407 15175623007 0013656 0 ustar 00 <?php if ($props['video'] && $this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php elseif($props['video']) : ?> <video src="<?= $props['video'] ?>" poster="<?= $props['video_poster'] ?>"></video> <?php endif ?> elements/video/element.json 0000644 00000025774 15175623007 0012037 0 ustar 00 { "@import": "./element.php", "name": "video", "title": "Video", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "video_controls": true, "margin": "default" }, "placeholder": { "props": { "video": "${url:~yootheme/theme/assets/images/element-video-placeholder.mp4}" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true }, "video_width": { "type": "number", "label": "Width" }, "video_height": { "type": "number", "label": "Height" }, "video_title": { "label": "Video Title", "source": true, "show": "video && $match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_controls": { "label": "Options", "type": "checkbox", "text": "Show controls", "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_loop": { "type": "checkbox", "text": "Loop video", "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_muted": { "type": "checkbox", "text": "Mute video", "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_playsinline": { "type": "checkbox", "text": "Play inline on mobile devices", "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_lazyload": { "type": "checkbox", "text": "Lazy load video", "enable": "video" }, "video_autoplay": { "label": "Autoplay", "description": "Disable autoplay, start autoplay immediately or as soon as the video enters the viewport.", "type": "select", "options": { "Off": "", "On": true, "On (If inview)": "inview" }, "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_poster": { "label": "Poster Frame", "description": "Select an optional image which shows up until the video plays. If not selected, the first video frame is shown as the poster frame.", "type": "image", "source": true, "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_box_shadow": { "label": "Box Shadow", "description": "Select the video box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" } }, "video_box_decoration": { "label": "Box Decoration", "description": "Select the video box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" } }, "video_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "$match(video_box_decoration, '^(default|primary|secondary)$')" }, "video_poster_focal_point": { "label": "Poster Frame Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "height_expand": { "label": "Height", "description": "Expand the height of the element to fill the available space in the column or force the height to one viewport. The video will cover the element's content box.", "type": "checkbox", "text": "Fill the available column space", "enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "video_viewport_height": { "type": "checkbox", "text": "Force viewport height", "enable": "!height_expand && video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "video", { "description": "Set the video dimensions.", "name": "_video_dimension", "type": "grid", "width": "1-2", "fields": ["video_width", "video_height"] }, "video_title", "video_controls", "video_loop", "video_muted", "video_playsinline", "video_lazyload", "video_autoplay", "video_poster" ] }, { "title": "Settings", "fields": [ { "label": "Video", "type": "group", "divider": true, "fields": [ "video_box_shadow", "video_box_decoration", "video_box_decoration_inverse", "video_poster_focal_point", "height_expand", "video_viewport_height", "text_color" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/video/element.php 0000644 00000000350 15175623007 0011634 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return (bool) $node->props['video']; }, ], ]; elements/fragment/templates/template.php 0000644 00000001137 15175623007 0014515 0 ustar 00 <?php // Add elements inline css above the content to ensure css is present when rendered if (!empty($props['css'])) { echo $this->el('style', [ 'class' => 'uk-margin-remove-adjacent', 'data-id' => !empty($attrs['data-id']) ? "{$attrs['data-id']}-style" : false, ])([], $props['css']); } $content = $builder->render($children); if (!$props['root']) { $content = $this->el($props['html_element'] ?: 'div', [ 'class' => ['uk-panel'] ])($props, $attrs, $content); } echo $content; if (!empty($props['metadata'])) { echo "\n" . join("\n", $props['metadata']); } elements/fragment/templates/content.php 0000644 00000000051 15175623007 0014346 0 ustar 00 <?php echo $builder->render($children); elements/fragment/element.json 0000644 00000006554 15175623007 0012527 0 ustar 00 { "@import": "./element.php", "name": "fragment", "title": "Sublayout", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "fragment": true, "width": 500, "defaults": { "margin": "default" }, "placeholder": {}, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "type": "builder-fragment" }, "html_element": "${builder.html_element}", "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element"] } } }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content"] }, { "title": "Settings", "fields": [ { "label": "Sublayout", "type": "group", "fields": [ "html_element" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/fragment/images/iconSmall.svg 0000644 00000000467 15175623007 0014107 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="4" height="14" fill="none" stroke="#444" x="2" y="3" /> <rect width="4" height="14" fill="none" stroke="#444" x="8" y="3" /> <rect width="4" height="14" fill="none" stroke="#444" x="14" y="3" /> </svg> elements/fragment/images/icon.svg 0000644 00000000553 15175623007 0013112 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="6" height="22" fill="none" stroke="#444" stroke-width="2" x="2" y="4" /> <rect width="6" height="22" fill="none" stroke="#444" stroke-width="2" x="12" y="4" /> <rect width="6" height="22" fill="none" stroke="#444" stroke-width="2" x="22" y="4" /> </svg> elements/fragment/element.php 0000644 00000002146 15175623007 0012336 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'prerender' => function ($node, $params) { $node->props['isPartial'] = !$params['parent'] && str_starts_with($params['template'] ?? '', '_'); if ($node->props['isPartial']) { $metadata = app(Metadata::class); $node->props['metadata'] = $metadata->all(); } }, 'render' => function ($node, $params) { $node->props['root'] = !$params['parent']; if ($node->props['isPartial']) { $metadata = app(Metadata::class); $node->props['metadata'] = array_diff($metadata->all(), $node->props['metadata']); array_walk($node->props['metadata'], function ($metadata) { if ($metadata->src) { $metadata->attributes['src'] = Url::to($metadata->src); } if ($metadata->href) { $metadata->attributes['href'] = Url::to($metadata->href); } }); } }, ], ]; elements/social_item/element.json 0000644 00000003531 15175623007 0013204 0 ustar 00 { "@import": "./element.php", "name": "social_item", "title": "Item", "width": 500, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "link": { "label": "Link", "attrs": { "placeholder": "https://" }, "source": true, "description": "Enter link to your social profile. A corresponding <a href=\"https://getuikit.com/docs/icon\" target=\"_blank\">UIkit brand icon</a> will be displayed automatically, if available. Links to email addresses and phone numbers, like mailto:info@example.com or tel:+491570156, are also supported." }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true }, "icon": { "label": "Icon", "description": "Pick an alternative icon from the icon library.", "type": "icon", "source": true, "enable": "!image" }, "image": { "label": "Image", "description": "Pick an alternative SVG image from the media manager.", "type": "image", "source": true, "enable": "!icon" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "link", "link_aria_label", "icon", "image" ] }, "${builder.advancedItem}" ] } } } elements/social_item/templates/template.php 0000644 00000002057 15175623007 0015204 0 ustar 00 <?php // Image if ($props['image']) { $icon = $this->el('image', [ 'src' => $props['image'], 'alt' => true, 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, ]); // Icon } else { $icon = $this->el('span', [ 'uk-icon' => [ 'icon: {0};' => $props['icon'] ?: $this->e($props['link'], 'social'), 'width: {icon_width};', 'height: {icon_width};', ], ]); } // Link $link = $this->el('a', [ 'class' => [ 'el-link', 'uk-icon-link {@!link_style}', 'uk-icon-button {@link_style: button}', 'uk-link-{link_style: muted|text|reset}', ], 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], 'target' => ['_blank {@link_target}'], 'rel' => 'noreferrer', ]); ?> <?= $link($element, $icon($element, '')) ?> elements/social_item/templates/content.php 0000644 00000000116 15175623007 0015035 0 ustar 00 <a href="<?= $props['link'] ?>"><?= $this->e($props['link'], 'social') ?></a> elements/social_item/element.php 0000644 00000000340 15175623007 0013015 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['link']; }, ], ]; elements/totop/templates/template.php 0000644 00000002300 15175623007 0014050 0 ustar 00 <?php $el = $this->el('div'); // Link $link = $this->el('a', [ 'href' => '#', // WordPress Preview reloads if `href` is empty 'title' => ['{link_title}'], 'uk-totop' => true, 'uk-scroll' => true, ]); // Title $title = $this->el('div', [ 'class' => [ 'el-title', 'uk-text-{title_style}', ], ]); // Grid $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand[@{title_grid_breakpoint}]', $props['title_grid_column_gap'] == $props['title_grid_row_gap'] ? 'uk-grid-{title_grid_column_gap}' : '[uk-grid-column-{title_grid_column_gap}] [uk-grid-row-{title_grid_row_gap}]', 'uk-flex-inline uk-flex-middle', ], 'uk-grid' => true, ]); $cell_title = $this->el('div', [ 'class' => [ 'uk-flex-first[@{title_grid_breakpoint}] uk-width-auto[@{title_grid_breakpoint}]', ], ]); ?> <?php if ($props['title'] != '') : ?> <?= $el($props, $attrs) ?> <?= $grid($props) ?> <div> <?= $link($props, '') ?> </div> <?= $cell_title($props, $title($props, $props['title'])) ?> <?= $grid->end() ?> <?= $el->end() ?> <?php else : ?> <?= $el($props, $attrs, $link($props, '')) ?> <?php endif ?> elements/totop/updates.php 0000644 00000000245 15175623007 0011712 0 ustar 00 <?php namespace YOOtheme; return [ '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/totop/element.json 0000644 00000014161 15175623007 0012062 0 ustar 00 { "name": "totop", "title": "To Top", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "title_grid_column_gap": "small", "title_grid_row_gap": "small", "margin": "default" }, "updates": "./updates.php", "templates": { "render": "./templates/template.php" }, "fields": { "title": { "label": "Title" }, "link_title": "${builder.link_title}", "title_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Small": "small", "Meta": "meta" }, "enable": "title" }, "title_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the title and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "title" }, "title_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "title" }, "title_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "title" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-title</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-title"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["title", "link_title"] }, { "title": "Settings", "fields": [ { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_grid_column_gap", "title_grid_row_gap", "title_grid_breakpoint" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/totop/images/icon.svg 0000644 00000000477 15175623007 0012461 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="2" points="10,14 15,9 20,14" /> <rect width="2" height="11" fill="#444" x="14" y="10" /> <circle fill="none" stroke="#444" stroke-width="2" cx="15" cy="15" r="13" /> </svg> elements/totop/images/iconSmall.svg 0000644 00000000462 15175623007 0013444 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" points="6.5,9 9.5,6 12.5,9" /> <rect width="1" height="8" fill="#444" x="9" y="6" /> <circle fill="none" stroke="#444" stroke-width="1.1" cx="9.5" cy="9.5" r="8.5" /> </svg> elements/alert/element.php 0000644 00000000410 15175623007 0011632 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['title'] != '' || $node->props['content'] != ''; }, ], ]; elements/alert/templates/content.php 0000644 00000001040 15175623007 0013651 0 ustar 00 <?php if ($props['title'] != '' || $props['content'] != '') : ?> <div> <?php if ($props['title'] != '' && $props['link']) : ?> <<?= $props['title_element'] ?>><a href="<?= $props['link'] ?>"><?= $props['title'] ?></a></<?= $props['title_element'] ?>> <?php elseif ($props['title'] != '') : ?> <<?= $props['title_element'] ?>><?= $props['title'] ?></<?= $props['title_element'] ?>> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> </div> <?php endif ?> elements/alert/templates/template.php 0000644 00000002470 15175623007 0014022 0 ustar 00 <?php $el = $this->el('div', [ 'class' => [ 'uk-alert', 'uk-alert-{alert_style}', 'uk-padding {@alert_size}', ], ]); // Title $title = $this->el($props['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-display-inline uk-text-middle {@title_inline}', ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-text-{content_style}', 'uk-display-inline uk-text-middle {@title_inline}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove} {@!title_inline}', ], ]); // Link $link = $props['link'] ? $this->el('a', [ 'class' => [ 'el-link uk-link-reset', ], 'href' => ['{link}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; ?> <?= $el($props, $attrs) ?> <?php if ($props['link']) : ?> <?= $link($props) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($props, $props['title']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($props, $props['content']) ?> <?php endif ?> <?php if ($props['link']) : ?> <?= $link->end() ?> <?php endif ?> <?= $el->end() ?> elements/alert/element.json 0000644 00000020023 15175623007 0012016 0 ustar 00 { "@import": "./element.php", "name": "alert", "title": "Alert", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "title_element": "h3" }, "placeholder": { "props": { "title": "", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "link": "${builder.link}", "link_target": "${builder.link_target}", "alert_style": { "label": "Style", "type": "select", "options": { "Default": "", "Primary": "primary", "Success": "success", "Warning": "warning", "Danger": "danger" } }, "alert_size": { "type": "checkbox", "text": "Larger padding" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Text Bold": "text-bold", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "title" }, "title_inline": { "label": "Alignment", "description": "Display the title in the same line as the content.", "type": "checkbox", "text": "Inline title", "enable": "title" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Lead": "lead", "Meta": "meta" }, "enable": "content" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "content && !title_inline" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-title</code>, <code>.el-content</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-title", ".el-content", ".el-link"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["title", "content", "link", "link_target"] }, { "title": "Settings", "fields": [ { "label": "Alert", "type": "group", "divider": true, "fields": ["alert_style", "alert_size"] }, { "label": "Title", "type": "group", "divider": true, "fields": ["title_style", "title_element", "title_inline"] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_style", "content_margin"] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/alert/images/iconSmall.svg 0000644 00000000761 15175623007 0013410 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <circle cx="10" cy="14" r="1" /> <circle fill="none" stroke="#444" stroke-width="1.1" cx="10" cy="10" r="9" /> <path d="M10.97,7.72 C10.85,9.54 10.56,11.29 10.56,11.29 C10.51,11.87 10.27,12 9.99,12 C9.69,12 9.49,11.87 9.43,11.29 C9.43,11.29 9.16,9.54 9.03,7.72 C8.96,6.54 9.03,6 9.03,6 C9.03,5.45 9.46,5.02 9.99,5 C10.53,5.01 10.97,5.44 10.97,6 C10.97,6 11.04,6.54 10.97,7.72 L10.97,7.72 Z" /> </svg> elements/alert/images/icon.svg 0000644 00000000777 15175623007 0012426 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="#444" d="M15,19.5c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5s-1.5-0.7-1.5-1.5S14.2,19.5,15,19.5z" /> <path fill="#444" d="M16.5,11.6c-0.2,2.7-0.6,5.4-0.6,5.4c-0.1,0.8-0.5,1-0.9,1c-0.5,0-0.8-0.2-0.8-1.1c0,0-0.4-2.6-0.6-5.4 c-0.1-1.8,0-2.6,0-2.6c0-0.8,0.6-1.5,1.4-1.5s1.5,0.7,1.5,1.5C16.5,9,16.6,9.8,16.5,11.6L16.5,11.6z" /> <circle fill="none" stroke="#444" stroke-width="2" cx="15" cy="15" r="13" /> </svg> elements/alert/updates.php 0000644 00000000245 15175623007 0011654 0 ustar 00 <?php namespace YOOtheme; return [ '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/nav/updates.php 0000644 00000000607 15175623007 0011333 0 ustar 00 <?php namespace YOOtheme; return [ // moved from 4.0.0-beta.9 to 4.3.9 (previously missing @import) // moved from 4.3.9 to 4.5.0-beta.0.4 (ensure to unset prop) '4.5.0-beta.0.4' => function ($node) { if (Arr::get($node->props, 'nav_element') === 'nav') { $node->props['html_element'] = 'nav'; } unset($node->props['nav_element']); }, ]; elements/nav/templates/content.php 0000644 00000000512 15175623007 0013331 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <p> <?= $builder->render($children[0], ['element' => $props]) ?> </p> <?php endif ?> elements/nav/templates/template.php 0000644 00000003625 15175623007 0013502 0 ustar 00 <?php use YOOtheme\Arr; $el = $this->el($props['html_element'] ?: 'div'); // Nav $nav = $this->el('ul', [ 'class' => [ 'uk-margin-remove-bottom', 'uk-nav uk-nav-{!nav_style: navbar-dropdown-nav} [uk-nav-divider {@nav_divider}] [uk-nav-{nav_size} {@nav_style: primary}]', 'uk-nav uk-{nav_style: navbar-dropdown-nav}', 'uk-nav-{text_align: center}', ], 'uk-scrollspy-nav' => ['closest: li; scroll: true; {@scrollspy_nav}'] ]); // Image align $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand[@{grid_breakpoint}]', $props['grid_column_gap'] == $props['grid_row_gap'] ? 'uk-grid-{grid_column_gap}' : '[uk-grid-column-{grid_column_gap}] [uk-grid-row-{grid_row_gap}]', 'uk-grid-divider {@grid_divider} {@!grid_column_gap:collapse} {@!grid_row_gap:collapse}', ], 'uk-grid' => true, ]); ?> <?= $el($props, $attrs) ?> <?php if ($props['grid'] > 1) : ?> <?= $grid($props) ?> <?php endif ?> <?php foreach (Arr::columns($children, $props['grid']) as $items) : ?> <?php if ($props['grid'] > 1) : ?> <div> <?php endif ?> <?= $nav($props) ?> <?php foreach ($items as $child) : ?> <?php if ($child->props['type'] == 'heading') : ?> <li class="uk-nav-header"><?= $child->props['content'] ?></li> <?php elseif ($child->props['type'] == 'divider') : ?> <li class="uk-nav-divider"></li> <?php else : ?> <li class="el-item <?= $child->props['active'] ? 'uk-active' : '' ?>"><?= $builder->render($child, ['element' => $props]) ?></li> <?php endif ?> <?php endforeach ?> <?= $nav->end() ?> <?php if ($props['grid'] > 1) : ?> </div> <?php endif ?> <?php endforeach ?> <?php if ($props['grid'] > 1) : ?> <?= $grid->end() ?> <?php endif ?> <?= $el->end() ?> elements/nav/element.php 0000644 00000000767 15175623007 0011326 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { $node->props['scrollspy_nav'] = array_any( $params['path'] ?? [], fn($parent) => $parent->type === 'column' && $parent->props['position_sticky'] ) && array_any( $node->children ?? [], fn($child) => str_contains((string) $child->props['link'], '#') ); }, ], ]; elements/nav/element.json 0000644 00000030422 15175623007 0011477 0 ustar 00 { "@import": "./element.php", "name": "nav", "title": "Nav", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_meta": true, "show_image": true, "nav_style": "default", "grid": "1", "image_vertical_align": true }, "placeholder": { "children": [ { "type": "nav_item", "props": {} }, { "type": "nav_item", "props": {} }, { "type": "nav_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "title": "content", "item": "nav_item" }, "show_meta": { "label": "Display", "type": "checkbox", "text": "Show the subtitle" }, "show_image": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the image" }, "nav_style": { "label": "Style", "description": "Select the nav style.", "type": "select", "options": { "Default": "default", "Primary": "primary", "Secondary": "secondary", "Navbar Dropdown": "navbar-dropdown-nav" } }, "nav_divider": { "type": "checkbox", "text": "Show dividers", "enable": "nav_style != 'navbar-dropdown-nav'" }, "nav_size": { "label": "Primary Size", "description": "Select the primary nav size.", "type": "select", "options": { "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "nav_style == 'primary'" }, "html_element": { "label": "HTML Element", "description": "Define a navigation menu or give it no semantic meaning.", "type": "select", "options": { "div": "", "nav": "nav" } }, "grid": { "label": "Grid", "description": "Set the number of grid columns.", "type": "select", "options": { "1 Column": "1", "2 Columns": "2", "3 Columns": "3", "4 Columns": "4", "5 Columns": "5", "6 Columns": "6" } }, "grid_divider": { "description": "Show a divider between grid columns.", "type": "checkbox", "text": "Show dividers", "enable": "grid" }, "grid_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the nav columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "grid" }, "grid_column_gap": { "label": "Column Gap", "description": "Set the size of the gap between the grid columns.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "grid_row_gap": { "label": "Row Gap", "description": "Set the size of the gap between the grid rows.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "show_image" }, "image_margin": { "label": "Margin", "type": "checkbox", "text": "Add margin between", "enable": "show_image" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "image_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center the image.", "type": "checkbox", "text": "Center" }, "icon_width": { "label": "Icon Width", "description": "Set the icon width.", "enable": "show_image" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-item", ".el-content", ".el-image", ".el-link"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "show_meta", "show_image"] }, { "title": "Settings", "fields": [ { "label": "Nav", "type": "group", "divider": true, "fields": [ "nav_style", "nav_divider", "nav_size", "html_element", "grid", "grid_divider", "grid_breakpoint", "grid_column_gap", "grid_row_gap" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "icon_width", "image_margin", "image_border", "image_svg_inline", "image_svg_animate", "image_svg_color", "image_vertical_align" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/nav/images/icon.svg 0000644 00000000536 15175623007 0012074 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <line fill="none" stroke="#444" stroke-width="2" x1="6" y1="15" x2="24" y2="15" /> <line fill="none" stroke="#444" stroke-width="2" x1="6" y1="9" x2="24" y2="9" /> <line fill="none" stroke="#444" stroke-width="2" x1="6" y1="21" x2="24" y2="21" /> </svg> elements/nav/images/iconSmall.svg 0000644 00000000453 15175623007 0013063 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <line fill="none" stroke="#444" x1="3" y1="10" x2="17" y2="10" /> <line fill="none" stroke="#444" x1="3" y1="6" x2="17" y2="6" /> <line fill="none" stroke="#444" x1="3" y1="14" x2="17" y2="14" /> </svg> elements/popover_item/templates/template-link.php 0000644 00000003135 15175623007 0016355 0 ustar 00 <?php $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $element['card_link']) { $link_container->attr($link->attrs + [ 'class' => [ 'uk-display-block uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $element['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($element); } } if ($link && $props['title'] != '' && $element['title_link']) { $props['title'] = $link($element, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && $props['image'] && $element['image_link']) { $props['image'] = $link($element, $props['image']); } if ($link && ($props['link_text'] || $element['link_text'])) { if ($element['card_link']) { $link = $this->el('div'); } $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', ]); } return $link; elements/popover_item/templates/content.php 0000644 00000001101 15175623007 0015250 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/popover_item/templates/template-content.php 0000644 00000005172 15175623007 0017075 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-card-title {@!title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', ], ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', ], ]); ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, [], $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> elements/popover_item/templates/template-image.php 0000644 00000001156 15175623007 0016503 0 ustar 00 <?php if (!$props['image']) { return; } echo $this->el('image', [ 'class' => [ 'el-image', 'uk-margin-auto', 'uk-display-block', 'uk-border-{image_border} {@!image_card_padding}', 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, ])->render($element); elements/popover_item/templates/template.php 0000644 00000003663 15175623007 0015430 0 ustar 00 <?php // Resets if ($element['card_link']) { $element['title_link'] = ''; $element['image_link'] = ''; } // Image $props['image'] = $this->render("{$__dir}/template-image", compact('props')); // New logic shortcuts $element['has_link'] = $props['link'] && $element['card_link']; // Item $el = $this->el($props['item_element'] ?: 'div', [ 'class' => [ 'el-item', // Match link container height 'uk-grid-item-match {@has_link}', ], ]); // Link Container $link_container = $element['has_link'] ? $this->el('a') : null; ($element['has_link'] ? $link_container : $el)->attr([ 'class' => [ 'uk-card uk-card-{card_style}', 'uk-card-{card_size}', 'uk-card-hover {@link_type: element}' => $props['link'], 'uk-card-body' => !($props['image'] && $element['image_card_padding']), 'uk-margin-remove-first-child' => !($props['image'] && $element['image_card_padding']), ], ]); // Content $content = $this->el('div', [ 'class' => [ 'uk-card-body uk-margin-remove-first-child' => $props['image'] && $element['image_card_padding'], ], ]); // Link $link = include "{$__dir}/template-link.php"; // Card media if ($props['image'] && $element['image_card_padding']) { $props['image'] = $this->el('div', ['class' => [ 'uk-card-media-top', ]], $props['image'])->render($element); } ?> <?= $el($element) ?> <?php if ($link_container) : ?> <?= $link_container($element) ?> <?php endif ?> <?= $props['image'] ?> <?php if ($this->expr($content->attrs['class'], $element)) : ?> <?= $content($element, $this->render("{$__dir}/template-content", compact('props', 'link'))) ?> <?php else : ?> <?= $this->render("{$__dir}/template-content", compact('props', 'link')) ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container->end() ?> <?php endif ?> <?= $el->end() ?> elements/popover_item/element.json 0000644 00000011267 15175623007 0013431 0 ustar 00 { "@import": "./element.php", "name": "popover_item", "title": "Item", "width": 500, "placeholder": { "props": { "title": "Title", "meta": "", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "image": "" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": "${builder.image}", "image_alt": "${builder.image_alt}", "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true, "enable": "link" }, "position_x": { "label": "Left", "description": "Enter the horizontal position of the marker in percent.", "type": "range", "attrs": { "min": 0, "max": 100, "step": 1 }, "source": true }, "position_y": { "label": "Top", "description": "Enter the vertical position of the marker in percent.", "type": "range", "attrs": { "min": 0, "max": 100, "step": 1 }, "source": true }, "drop_position": { "label": "Position", "description": "Select a different position for this item.", "type": "select", "options": { "None": "", "Top": "top-center", "Bottom": "bottom-center", "Left": "left-center", "Right": "right-center" }, "source": true }, "item_element": "${builder.html_element_item}", "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "title", "meta", "content", "image", "image_alt", "link", "link_text", "link_aria_label" ] }, { "title": "Settings", "fields": [ { "label": "Marker", "type": "group", "divider": true, "fields": ["position_x", "position_y"] }, { "label": "Popover", "type": "group", "divider": true, "fields": ["drop_position", "item_element"] }, { "label": "Image", "type": "group", "fields": ["image_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/popover_item/element.php 0000644 00000001153 15175623007 0013240 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['title', 'meta', 'content', 'link', 'image'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; } } // Don't render element if content fields are empty return $node->props['title'] != '' || $node->props['meta'] != '' || $node->props['content'] != '' || $node->props['image']; }, ], ]; elements/gallery_item/updates.php 0000644 00000001077 15175623007 0013226 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'image') && Arr::get($node->props, 'video')) { unset($node->props['video']); } }, '2.5.0-beta.1.3' => function ($node) { if (!empty($node->props['tags'])) { $node->props['tags'] = ucwords($node->props['tags']); } }, '1.18.0' => function ($node) { if (!isset($node->props['hover_image'])) { $node->props['hover_image'] = Arr::get($node->props, 'image2'); } }, ]; elements/gallery_item/element.json 0000644 00000024115 15175623007 0013372 0 ustar 00 { "@import": "./element.php", "name": "gallery_item", "title": "Item", "width": 500, "placeholder": { "props": { "image": "${url:~yootheme/theme/assets/images/element-image-placeholder.png}", "video": "", "title": "Title", "meta": "", "content": "", "hover_image": "", "hover_video": "" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "image": { "label": "Image", "type": "image", "source": true, "show": "!video", "altRef": "%name%_alt" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "_media": { "type": "button-panel", "panel": "builder-gallery-item-media", "text": "Edit Settings", "show": "image || video" }, "video_title": { "label": "Video Title", "source": true, "show": "video && $match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "image_alt": { "label": "Image Alt", "source": true, "show": "image && !video" }, "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true, "enable": "link" }, "hover_image": { "label": "Hover Image", "description": "Select an optional image that appears on hover.", "type": "image", "source": true, "show": "!hover_video" }, "hover_video": { "label": "Hover Video", "description": "Select an optional video that appears on hover.", "type": "video", "source": true, "show": "!hover_image" }, "tags": { "label": "Tags", "description": "Enter a comma-separated list of tags, for example, <code>blue, white, black</code>.", "source": true }, "item_element": "${builder.html_element_item}", "text_color": { "label": "Text Color", "description": "Set a different text color for this item.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "text_color_hover": { "type": "checkbox", "text": "Inverse the text color on hover" }, "lightbox_image_focal_point": { "label": "Image Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "lightbox_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "hover_image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "image", "video", "_media", "video_title", "image_alt", "title", "meta", "content", "link", "link_text", "link_aria_label", "hover_image", "hover_video", "tags" ] }, { "title": "Settings", "fields": [ { "label": "Item", "type": "group", "divider": true, "fields": [ "item_element" ] }, { "label": "Overlay", "type": "group", "divider": true, "fields": ["text_color", "text_color_hover"] }, { "label": "Lightbox", "type": "group", "divider": true, "fields": [ "lightbox_image_focal_point", "lightbox_text_color" ] }, { "label": "Image", "type": "group", "divider": true, "fields": ["image_focal_point"] }, { "label": "Hover Image", "type": "group", "fields": ["hover_image_focal_point"] } ] }, "${builder.advancedItem}" ] } }, "panels": { "builder-gallery-item-media": { "title": "Media", "width": 500, "fields": { "media_background": { "label": "Background Color", "description": "Use the background color in combination with blend modes.", "type": "color" }, "media_blend_mode": { "label": "Blend Mode", "description": "Determine how the image or video will blend with the background color.", "type": "select", "options": { "Normal": "", "Multiply": "multiply", "Screen": "screen", "Overlay": "overlay", "Darken": "darken", "Lighten": "lighten", "Color-dodge": "color-dodge", "Color-burn": "color-burn", "Hard-light": "hard-light", "Soft-light": "soft-light", "Difference": "difference", "Exclusion": "exclusion", "Hue": "hue", "Saturation": "saturation", "Color": "color", "Luminosity": "luminosity" }, "enable": "media_background" }, "media_overlay": { "label": "Overlay Color", "description": "Set an additional transparent overlay to soften the image or video.", "type": "color" } }, "fieldset": { "default": { "fields": ["media_background", "media_blend_mode", "media_overlay"] } } } } } elements/gallery_item/templates/template-image.php 0000644 00000000601 15175623007 0016442 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $focal, 'thumbnail' => [$element['image_width'], $element['image_height'], $element['image_orientation']], ]); return $image; elements/gallery_item/templates/template-content.php 0000644 00000006454 15175623007 0017046 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-transition-{title_transition} {@overlay_hover}', 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', 'uk-flex-1 {@content_expand}' => !$props['content'] && (!$props['meta'] || $element['meta_align'] == 'above-title'), ], ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-transition-{meta_transition} {@overlay_hover}', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', 'uk-flex-1 {@content_expand}' => $element['meta_align'] == 'below-content' || (!$props['content'] && ($element['meta_align'] == 'above-content' || ($element['meta_align'] == 'below-title' ))), ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-transition-{content_transition} {@overlay_hover}', 'uk-{content_style}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), 'uk-flex-1 {@content_expand}' => !($props['meta'] && $element['meta_align'] == 'below-content'), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', 'uk-transition-{link_transition} {@overlay_hover}', // Not on link element to prevent conflicts with link style ], ]); ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> elements/gallery_item/templates/template-media.php 0000644 00000005256 15175623007 0016452 0 ustar 00 <?php if ($props['video']) { $src = $props['video']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-video.php"; } elseif ($props['image']) { $src = $props['image']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-image.php"; } elseif ($props['hover_video']) { $src = $props['hover_video']; $focal = $props['hover_image_focal_point']; $media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $media = include "{$__dir}/template-image.php"; } // Media $media->attr([ 'class' => [ 'el-image', 'uk-blend-{0}' => $props['media_blend_mode'], 'uk-transition-{image_transition}', 'uk-transition-opaque' => $props['image'] || $props['video'], 'uk-transition-fade {@!image_transition}' => ($props['hover_image'] || $props['hover_video']) && !($props['image'] || $props['video']), 'uk-flex-1 {@image_expand}' ], 'style' => [ 'min-height: {image_min_height}px;', ], ]); if ($element['image_expand'] || $element['image_min_height'] || ($media->name == 'video' && $element['image_width'] && $element['image_height'])) { $media->attr([ 'class' => [ 'uk-object-cover', 'uk-object-{0}' => $focal, ], 'style' => [ // Keep video responsiveness but with new proportions (because video isn't cropped like an image) 'aspect-ratio: {image_width} / {image_height};' => $media->name == 'video', ], ]); } // Hover Media $hover_media = ''; if (($props['hover_image'] || $props['hover_video']) && ($props['image'] || $props['video'])) { if ($props['hover_video']) { $src = $props['hover_video']; $hover_media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $hover_media = include "{$__dir}/template-image.php"; } $hover_media->attr([ 'class' => [ 'el-hover-image', 'uk-transition-{image_transition}', 'uk-transition-fade {@!image_transition}', 'uk-object-{0}' => $props['hover_image_focal_point'], // `uk-cover` already sets object-fit to cover ], 'uk-cover' => true, 'uk-video' => false, // Resets 'alt' => true, // Image 'loading' => false, // Image + Iframe 'preload' => false, // Video ]); } ?> <?= $media($element, '') ?> <?php if ($hover_media) : ?> <?= $hover_media($element, '') ?> <?php endif ?> elements/gallery_item/templates/template-video.php 0000644 00000001422 15175623007 0016470 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'uk-responsive' => true, 'loading' => ['lazy {@image_loading}'], 'title' => $props['video_title'], 'class' => [ 'uk-disabled', ], 'uk-video' => [ 'automute: true;', ], ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'preload' => ['none {@image_loading}'], 'uk-video' => true, ]); } $video->attr([ 'width' => $element['image_width'], 'height' => $element['image_height'], ]); return $video; elements/gallery_item/templates/template.php 0000644 00000013127 15175623007 0015371 0 ustar 00 <?php // If link is not set use image/video field for the lightbox if (!$props['link'] && $element['lightbox']) { $props['link'] = $props['video'] ?: $props['image']; } // Override default settings $element['text_color'] = $props['text_color'] ?: $element['text_color']; if ($element['grid_masonry']) { $element['image_expand'] = ''; } // New logic shortcuts $element['has_transition'] = $element['overlay_hover'] || $element['image_transition'] || $element['image_transition_border'] || $props['hover_image'] || $props['hover_video']; $element['text_color_inverse'] = $element['text_color'] === 'light' ? 'dark' : 'light'; $el = $this->el($props['item_element'] ?: 'div', [ 'class' => [ 'el-item', 'uk-margin-auto uk-width-{item_maxwidth}', 'uk-flex uk-flex-column {@image_expand} {@overlay_link}' => $props['link'], // Needs to be parent of `uk-link-toggle` 'uk-{0}' => !$element['overlay_style'] || $element['overlay_cover'] ? $element['text_color'] : false, // Only for transparent navbar 'uk-inverse-{0}' => $element['overlay_style'] && !$element['overlay_cover'] ? $element['text_color'] : false, ], ]); // Link Container $link_container = $props['link'] && $element['overlay_link'] ? $this->el('a', [ 'class' => [ 'uk-flex-1', ], ]) : null; ($link_container ?: $el)->attr([ 'class' => [ 'uk-box-shadow-{image_box_shadow}', 'uk-box-shadow-hover-{image_hover_box_shadow}', 'uk-border-{image_border} {@!image_box_decoration} {@!image_transition_border}', 'uk-box-shadow-bottom {@image_box_decoration: shadow}', 'tm-mask-default {@image_box_decoration: mask}', 'tm-box-decoration-{image_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@image_box_decoration_inverse} {@image_box_decoration: default|primary|secondary}', 'tm-transition-border {@image_transition_border}', 'uk-inline' => $element['image_box_decoration'] || $element['image_transition_border'], 'uk-transition-toggle {@has_transition}', 'uk-flex uk-flex-column {@image_expand}', ], 'style' => [ "background-color: {$props['media_background']};" => $props['media_background'], ], 'tabindex' => $element['has_transition'] && !($props['link'] && $element['overlay_link']) ? 0 : null, // Needs to be on anchor to have just one focusable toggle when using keyboard navigation 'uk-toggle' => ($props['text_color_hover'] || $element['text_color_hover']) && ((!$element['overlay_style'] && ($props['hover_image'] || $props['hover_video'])) || ($element['overlay_cover'] && $element['overlay_hover'] && $element['overlay_transition_background'])) ? [ 'cls: uk-{text_color_inverse} [uk-{text_color}];', 'mode: hover;', 'target: !*; {@overlay_link}' => $props['link'], ] : false, ]); // Box Decoration / Transition Border $image_container = $element['image_box_decoration'] || $element['image_transition_border'] ? $this->el('div', [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@image_expand}', ], ]) : null; ($image_container ?: $link_container ?: $el)->attr('class', [ 'uk-inline-clip', ]); $overlay = $this->el('div', [ 'class' => [ 'uk-{overlay_style}', 'uk-transition-{overlay_transition} {@overlay_hover} {@overlay_cover}', 'uk-position-cover {@overlay_cover}', 'uk-position-{overlay_margin} {@overlay_cover}', ], ]); $position = $this->el('div', [ 'class' => [ 'uk-position-{overlay_position} [uk-position-{overlay_margin} {@overlay_style}]', 'uk-transition-{overlay_transition} {@overlay_hover}' => !$element['overlay_transition_background'] || !$element['overlay_cover'], 'uk-blend-difference {@text_blend} {@!overlay_style}', 'uk-flex {@content_expand}' ], ]); $content = $this->el('div', [ 'class' => [ $element['overlay_style'] ? 'uk-overlay' : 'uk-panel', 'uk-padding {@!overlay_padding} {@!overlay_style}', 'uk-padding-{!overlay_padding: |none}', 'uk-padding-remove {@overlay_padding: none} {@overlay_style}', 'uk-width-{overlay_maxwidth} {@!overlay_position: top|bottom}', 'uk-margin-remove-first-child', 'uk-flex-1 uk-flex uk-flex-column {@content_expand}' ], ]); if (!$element['overlay_cover']) { $position->attr($overlay->attrs); } // Link $link = include "{$__dir}/template-link.php"; ?> <?= $el($element, $attrs) ?> <?php if ($link_container) : ?> <?= $link_container($element) ?> <?php endif ?> <?php if ($image_container) : ?> <?= $image_container($element) ?> <?php endif ?> <?= $this->render("{$__dir}/template-media", compact('props', 'element')) ?> <?php if ($props['media_overlay']) : ?> <div class="uk-position-cover" style="background-color:<?= $props['media_overlay'] ?>"></div> <?php endif ?> <?php if ($element['overlay_cover']) : ?> <?= $overlay($element, '') ?> <?php endif ?> <?php if ($props['title'] != '' || $props['meta'] != '' || $props['content'] != '' || ($props['link'] && ($props['link_text'] || $element['link_text']))) : ?> <?= $position($element, $content($element, $this->render("{$__dir}/template-content", compact('props', 'element', 'link')))) ?> <?php endif ?> <?php if ($image_container) : ?> <?= $image_container->end() ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container->end() ?> <?php endif ?> <?= $el->end() ?> elements/gallery_item/templates/template-link.php 0000644 00000007440 15175623007 0016325 0 ustar 00 <?php namespace YOOtheme; use YOOtheme\Http\Uri; /** @var ImageProvider $imageProvider */ $imageProvider = app(ImageProvider::class); $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], ]) : null; // Lightbox if ($link && $element['lightbox']) { if ($type = $this->isImage($props['link'])) { if ($type !== 'svg' && ($element['lightbox_image_width'] || $element['lightbox_image_height'])) { $thumbnail = [$element['lightbox_image_width'], $element['lightbox_image_height'], $element['lightbox_image_orientation']]; if (!empty($props['lightbox_image_focal_point'])) { [$y, $x] = explode('-', $props['lightbox_image_focal_point']); $thumbnail += [3 => $x, 4 => $y]; } $props['link'] = (string) (new Uri($props['link']))->withFragment('thumbnail=' . implode(',', $thumbnail)); } $link->attr([ 'href' => $imageProvider->getUrl($props['link']), 'data-alt' => $props['image_alt'], 'data-type' => 'image', ]); } elseif ($this->isVideo($props['link'])) { $link->attr('data-type', 'video'); } elseif (!$this->iframeVideo($props['link'])) { $link->attr('data-type', 'iframe'); } else { $link->attr('data-type', true); } // Caption $caption = ''; if ($props['title'] != '' && $element['title_display'] != 'item') { $caption .= "<h4 class='uk-margin-remove'>{$props['title']}</h4>"; if ($element['title_display'] == 'lightbox') { $props['title'] = ''; } } if ($props['content'] != '' && $element['content_display'] != 'item') { $caption .= $props['content']; if ($element['content_display'] == 'lightbox') { $props['content'] = ''; } } if ($caption) { $link->attr('data-caption', $caption); } // Text Color $element['lightbox_text_color'] = $props['lightbox_text_color'] ?: $element['lightbox_text_color']; if ($element['lightbox_text_color']) { $link->attr('data-attrs', "class: uk-inverse-{$element['lightbox_text_color']}"); } } elseif ($link) { $link->attr([ 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); } if ($link && $element['overlay_link']) { $link_container->attr($link->attrs + [ 'class' => [ // Needs to be child of `uk-light` or `uk-dark` 'uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $element['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($element); } } if ($link && $props['title'] != '' && $element['title_link']) { $props['title'] = $link($element, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && ($props['link_text'] || $element['link_text'])) { if ($element['overlay_link']) { $link = $this->el('div'); } $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', // Keep link style if overlay link 'uk-link {@link_style:} {@overlay_link}', 'uk-text-muted {@link_style: link-muted} {@overlay_link}', ]); } return $link; elements/gallery_item/templates/content.php 0000644 00000002270 15175623007 0015225 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['video']) : ?> <?php if ($this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['hover_image']) : ?> <img src="<?= $props['hover_image'] ?>" alt> <?php endif ?> <?php if ($props['hover_video']) : ?> <?php if ($this->iframeVideo($props['hover_video'], [], false)) : ?> <iframe src="<?= $props['hover_video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['hover_video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/gallery_item/element.php 0000644 00000002507 15175623007 0013211 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['title', 'meta', 'content', 'link', 'hover_image', 'hover_video'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; } } /** * Auto-correct media rendering for dynamic content * * @var View $view */ $view = app(View::class); foreach (['', 'hover_'] as $prefix) { if ($node->props["{$prefix}image"] && $view->isVideo($node->props["{$prefix}image"])) { $node->props["{$prefix}video"] = $node->props["{$prefix}image"]; $node->props["{$prefix}image"] = null; } elseif ($node->props["{$prefix}video"] && $view->isImage($node->props["{$prefix}video"])) { $node->props["{$prefix}image"] = $node->props["{$prefix}video"]; $node->props["{$prefix}video"] = null; } } // Don't render element if content fields are empty return $node->props['image'] || $node->props['video'] || $node->props['hover_image'] || $node->props['hover_video']; }, ], ]; elements/list_item/element.php 0000644 00000001157 15175623007 0012525 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['image', 'link'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; if ($key === 'image') { $node->props['icon'] = ''; } } } // Don't render element if content fields are empty return $node->props['content'] != '' || $node->props['image'] || $node->props['icon']; }, ], ]; elements/list_item/templates/content.php 0000644 00000000512 15175623007 0014536 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['content'] != '' && $props['link']) : ?> <a href="<?= $props['link'] ?>"><?= $props['content'] ?></a> <?php elseif ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> elements/list_item/templates/template.php 0000644 00000007472 15175623007 0014713 0 ustar 00 <?php // Image Align $grid = $this->el('div', [ 'class' => [ 'uk-grid uk-grid-small uk-child-width-expand uk-flex-nowrap', 'uk-flex-middle {@image_vertical_align}', ], ]); $cell_image = $this->el('div', [ 'class' => [ 'uk-width-auto', 'uk-flex-last {@image_align: right}', ], ]); // Image if ($props['image']) { $image = $this->el('image', [ 'class' => [ 'el-image', 'uk-border-{image_border}', 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, ]); $props['image'] = $image($element); } elseif ($props['icon'] || $element['icon']) { $icon = $this->el('span', [ 'class' => [ 'el-image', 'uk-text-{icon_color}', ], 'uk-icon' => [ 'icon: {icon};', 'width: {icon_width};', 'height: {icon_width};', ], ]); $props['image'] = $icon(array_merge($element, array_filter($props)), ''); } // Content $content = $this->el($element['list_type'] == 'vertical' ? 'div' : 'span', [ 'class' => [ 'el-content', 'uk-panel {@list_type: vertical}', 'uk-{content_style}', ], ]); // Horizontal List: Image is content if ($props['image'] && $element['list_type'] == 'horizontal') { $text = $this->el('span', [ 'class' => [ 'uk-text-middle uk-margin-remove-last-child', ], ]); $props['content'] = $text($element, $props['content'] ?? ''); if ($element['image_align'] == 'left') { $props['content'] = "{$props['image']} {$props['content']}"; } else { $props['content'] = "{$props['content']} {$props['image']}"; } $props['image'] = ''; } // Link $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $props['image']) { $link->attr([ 'class' => [ 'uk-link-toggle', ], ]); $props['content'] = $this->striptags($props['content']); if ($element['link_style'] != 'reset') { $props['content'] = $this->el('span', [ 'class' => [ 'uk-link-{link_style: muted|text|heading}', 'uk-link {!link_style}', 'uk-margin-remove-last-child', ], ], $props['content'])->render($element); $cell_image->attr([ 'class' => [ 'uk-link-{link_style: muted|text|heading}', 'uk-link {!link_style}', ], ]); } } if ($link && !$props['image']) { $props['content'] = $link($props, ['class' => [ 'el-link', 'uk-link-{0}' => $element['link_style'], 'uk-margin-remove-last-child', ]], $this->striptags($props['content'])); } // No white space for horizontal lists ?> <?php if ($props['image']) : ?> <?php if ($props['link']) : ?> <?= $link($props) ?> <?php endif ?> <?= $grid($element) ?> <?= $cell_image($element, $props['image']) ?> <div> <?= $content($element, $props['content'] ?: '') ?> </div> <?= $grid->end() ?> <?php if ($props['link']) : ?> <?= $link->end() ?> <?php endif ?> <?php else : // No white space for horizontal lists ?> <?= $content($element, $props['content'] ?: '') ?> <?php endif ?> elements/list_item/element.json 0000644 00000006164 15175623007 0012712 0 ustar 00 { "@import": "./element.php", "name": "list_item", "title": "Item", "width": 500, "placeholder": { "props": { "content": "Lorem ipsum dolor sit amet.", "image": "", "icon": "" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "type": "editor", "root": true, "source": true }, "image": "${builder.image}", "image_alt": "${builder.image_alt}", "icon": { "label": "Icon", "description": "Instead of using a custom image, you can click on the pencil to pick an icon from the icon library.", "type": "icon", "source": true, "enable": "!image" }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image" }, "icon_color": { "label": "Icon Color", "description": "Set the icon color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "!image" }, "link": "${builder.link}", "link_target": "${builder.link_target}", "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "image", "image_alt", "icon", "link", "link_target"] }, { "title": "Settings", "fields": [ { "label": "Image", "type": "group", "divider": true, "fields": ["image_focal_point"] }, { "label": "Icon", "type": "group", "fields": ["icon_color"] } ] }, "${builder.advancedItem}" ] } } } elements/nav_item/element.json 0000644 00000007276 15175623007 0012530 0 ustar 00 { "@import": "./element.php", "name": "nav_item", "title": "Item", "width": 500, "placeholder": { "props": { "content": "Item" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "source": true }, "meta": { "label": "Subtitle", "source": true }, "image": "${builder.image}", "image_alt": "${builder.image_alt}", "icon": { "label": "Icon", "description": "Instead of using a custom image, you can click on the pencil to pick an icon from the icon library.", "type": "icon", "source": true, "enable": "!image" }, "link": { "label": "Link", "type": "link", "description": "Enter or pick a link, an image or a video file.", "attrs": { "placeholder": "http://" }, "source": true }, "link_target": { "type": "checkbox", "text": "Open the link in a new window" }, "type": { "label": "Type", "description": "Select the item type.", "type": "select", "options": { "Item": "", "Heading": "heading", "Divider": "divider" }, "source": true }, "active": { "label": "Active", "description": "Highlight the item as the active item.", "type": "checkbox", "text": "Enable active state", "source": true, "enable": "!$match(type, 'divider|header')" }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "meta", "image", "image_alt", "icon", "link", "link_target" ] }, { "title": "Settings", "fields": [ { "label": "Item", "type": "group", "divider": true, "fields": ["type", "active"] }, { "label": "Image", "type": "group", "fields": ["image_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/nav_item/element.php 0000644 00000001076 15175623007 0012336 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['meta', 'image'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; if ($key === 'image') { $node->props['icon'] = ''; } } } // Don't render element if content fields are empty return $node->props['content'] != ''; }, ], ]; elements/nav_item/templates/content.php 0000644 00000000634 15175623007 0014354 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['content'] != '' && $props['link']) : ?> <a href="<?= $props['link'] ?>"><?= $props['content'] ?></a> <?php elseif ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> elements/nav_item/templates/template.php 0000644 00000005250 15175623007 0014514 0 ustar 00 <?php // Link $link = $this->el('a', [ 'class' => [ 'uk-flex-{text_align: left|right}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]]', ], ]); if ($props['link']) { $link->attr([ 'class' => [ 'el-link', 'uk-link-{link_style}', ], 'href' => $props['link'], 'target' => $props['link_target'] ? '_blank' : '', ]); } else { $link->attr([ 'class' => [ 'el-content uk-disabled', ], ]); } // Subtitle $meta = $this->el('div', [ 'class' => [ 'uk-nav-subtitle', ], ]); // Image Align $grid = $this->el('div', [ 'class' => [ 'uk-grid uk-grid-small uk-child-width-expand uk-flex-nowrap', 'uk-flex-middle {@image_vertical_align}', ], ]); $cell_image = $this->el('div', [ 'class' => [ 'uk-width-auto' ], ]); // Image if ($props['image']) { $image = $this->el('image', [ 'class' => [ 'el-image', 'uk-border-{image_border}', 'uk-margin-small-right {@image_margin}' => !$props['meta'], 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, ]); $props['image'] = $image($element); } elseif ($props['icon']) { $icon = $this->el('span', [ 'class' => [ 'el-image', 'uk-margin-small-right {@image_margin}' => !$props['meta'], ], 'uk-icon' => [ 'icon: {0};' => $props['icon'], 'width: {icon_width};', 'height: {icon_width};', ], ]); $props['image'] = $icon($element, ''); } ?> <?= $link($element) ?> <?php if ($props['image'] && $props['meta'] != '') : ?> <?= $grid($element) ?> <?= $cell_image($element, $props['image']) ?> <div> <?= $props['content'] ?> <?= $meta($element, $props['meta']) ?> </div> <?= $grid->end() ?> <?php else : ?> <?= $props['image'] ?> <?php if ($props['meta'] != '') : ?> <div> <?= $props['content'] ?> <?= $meta($element, $props['meta']) ?> </div> <?php else : ?> <?= $props['content'] ?> <?php endif ?> <?php endif ?> <?= $link->end() ?> elements/nav_item/updates.php 0000644 00000000307 15175623007 0012346 0 ustar 00 <?php namespace YOOtheme; return [ '3.0.10.1' => function ($node) { if (Arr::get($node->props, 'type') === 'header') { $node->props['type'] = 'heading'; } }, ]; elements/section/updates.php 0000644 00000016556 15175623007 0012225 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset( $node->props['header_overlay'], $node->props['image_fixed'], $node->props['media'], $node->props['media_advanced'], $node->props['media_size'], ); }, '4.4.0-beta.0.3' => function ($node) { if ( Arr::get($node->props, 'vertical_align') && !( (Arr::get($node->props, 'height') == 'viewport' && Arr::get($node->props, 'height_viewport') <= 100) || in_array(Arr::get($node->props, 'height'), ['section', 'pixels']) ) ) { Arr::set($node->props, 'vertical_align', ''); } }, '4.3.1' => function ($node) { if ( Arr::get($node->props, 'header_transparent_noplaceholder') && Arr::get($node->props, 'header_transparent_text_color') ) { $element = $node->children[0]->children[0]->children[0] ?? null; if ( $element && in_array($element->type ?? '', ['slideshow', 'slider']) && ($element->props->text_color ?? '') !== Arr::get($node->props, 'header_transparent_text_color') ) { $element->props->css = trim( str_replace( "\n\n.el-item { --uk-inverse: dark !important; }", '', $element->props->css ?? '', ), ); } } }, '4.3.0-beta.0.5' => function ($node, $params) { if ($height = Arr::get($node->props, 'height')) { $rename = [ 'full' => 'viewport', 'percent' => 'viewport', 'section' => 'section', 'expand' => 'page', ]; if (isset($rename[$height])) { $node->props['height'] = $rename[$height]; if ( $height !== 'expand' && ($params['i'] ?? 0) < 2 && empty($params['updateContext']['height']) ) { $node->props['height_offset_top'] = true; } if ($height === 'percent') { $node->props['height_viewport'] = 80; } } elseif (preg_match('/viewport-([2-4])/', $height, $match)) { $node->props['height'] = 'viewport'; $node->props['height_viewport'] = ((int) $match[1]) * 100; } $params['updateContext']['height'] = true; } $params['updateContext']['sectionIndex'] = $params['i'] ?? 0; }, '4.3.0-beta.0.3' => function ($node, $params) { if (Arr::get($node->props, 'header_transparent')) { if ( Arr::get($node->props, 'text_color') != Arr::get($node->props, 'header_transparent') || !(Arr::get($node->props, 'image') || Arr::get($node->props, 'video')) ) { $node->props['header_transparent_text_color'] = $node->props['header_transparent']; } $node->props['header_transparent'] = true; } Arr::updateKeys($node->props, ['image_focal_point' => 'media_focal_point']); }, '3.0.5.1' => function ($node) { if ( Arr::get($node->props, 'image_effect') == 'parallax' && !is_numeric(Arr::get($node->props, 'image_parallax_easing')) ) { Arr::set($node->props, 'image_parallax_easing', '1'); } }, '2.8.0-beta.0.12' => function ($node) { if (Arr::get($node->props, 'image_position') === '') { $node->props['image_position'] = 'center-center'; } }, '2.8.0-beta.0.3' => function ($node) { foreach (['bgx', 'bgy'] as $prop) { $key = "image_parallax_{$prop}"; $start = Arr::get($node->props, "{$key}_start", ''); $end = Arr::get($node->props, "{$key}_end", ''); if ($start != '' || $end != '') { Arr::set( $node->props, $key, implode(',', [$start != '' ? $start : 0, $end != '' ? $end : 0]), ); } Arr::del($node->props, "{$key}_start"); Arr::del($node->props, "{$key}_end"); } }, '2.8.0-beta.0.2' => function ($node) { if (isset($node->props['sticky'])) { $node->props['sticky'] = 'cover'; } }, '2.4.12.1' => function ($node) { if (Arr::get($node->props, 'animation_delay') === true) { $node->props['animation_delay'] = '200'; } }, '2.4.0-beta.0.2' => function ($node) { Arr::updateKeys($node->props, ['image_visibility' => 'media_visibility']); }, '2.3.0-beta.1.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ($style == 'fjord') { if (Arr::get($node->props, 'width') === 'default') { $node->props['width'] = 'large'; } } }, '2.1.0-beta.2.1' => function ($node) { if (in_array(Arr::get($node->props, 'style'), ['primary', 'secondary'])) { $node->props['text_color'] = ''; } }, '2.0.0-beta.5.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if (!in_array($style, ['jack-baker', 'morgan-consulting', 'vibe'])) { if (Arr::get($node->props, 'width') === 'large') { $node->props['width'] = 'xlarge'; } } if ( in_array($style, [ 'craft', 'district', 'florence', 'makai', 'matthew-taylor', 'pinewood-lake', 'summit', 'tomsen-brody', 'trek', 'vision', 'yard', ]) ) { if (Arr::get($node->props, 'width') === 'default') { $node->props['width'] = 'large'; } } }, '1.18.10.2' => function ($node) { if (!empty($node->props['image']) && !empty($node->props['video'])) { unset($node->props['video']); } }, '1.18.0' => function ($node) { if (!isset($node->props['image_effect'])) { $node->props['image_effect'] = Arr::get($node->props, 'image_fixed') ? 'fixed' : ''; } if ( !isset($node->props['vertical_align']) && in_array(Arr::get($node->props, 'height'), ['full', 'percent', 'section']) ) { $node->props['vertical_align'] = 'middle'; } if (Arr::get($node->props, 'style') === 'video') { $node->props['style'] = 'default'; } if (Arr::get($node->props, 'width') === 0) { $node->props['width'] = 'default'; } elseif (Arr::get($node->props, 'width') === 2) { $node->props['width'] = 'small'; } elseif (Arr::get($node->props, 'width') === 3) { $node->props['width'] = 'expand'; } }, ]; elements/section/element.json 0000644 00000052640 15175623010 0012357 0 ustar 00 { "@import": "./element.php", "name": "section", "title": "Section", "container": true, "width": 500, "defaults": { "style": "default", "width": "default", "vertical_align": "middle", "title_position": "top-left", "title_rotation": "left", "title_breakpoint": "xl", "image_position": "center-center" }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "image": { "label": "Image", "type": "image", "source": true, "show": "!video" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "_media": { "type": "button-panel", "panel": "builder-section-media", "text": "Edit Settings", "show": "image || video" }, "video_title": { "label": "Video Title", "source": true, "show": "video && $match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "title": { "label": "Title", "description": "Enter a decorative section title which is aligned to the section edge.", "source": true }, "style": { "label": "Style", "type": "select", "options": { "Default": "default", "Muted": "muted", "Primary": "primary", "Secondary": "secondary" } }, "preserve_color": { "type": "checkbox", "text": "Preserve text color", "enable": "style" }, "overlap": { "description": "Preserve the text color, for example when using cards. Section overlap is not supported by all styles and may have no visual effect.", "type": "checkbox", "text": "Overlap the following section", "enable": "style" }, "background_color": { "label": "Background Color", "type": "color", "enable": "!style && !background_parallax_background" }, "_background_parallax_button": { "description": "Define a custom background color or a color parallax animation instead of using a predefined style.", "type": "button-panel", "text": "Edit Parallax", "panel": "background-parallax", "enable": "!style" }, "text_color": { "label": "Text Color", "description": "Force a light or dark color for text, buttons and controls on the image or video background.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "!style || image || video" }, "width": { "label": "Max Width", "type": "select", "options": { "Default": "default", "X-Small": "xsmall", "Small": "small", "Large": "large", "X-Large": "xlarge", "Expand": "expand", "None": "" } }, "padding_remove_horizontal": { "description": "Set the maximum content width.", "type": "checkbox", "text": "Remove horizontal padding", "enable": "width && width != 'expand'" }, "width_expand": { "label": "Expand One Side", "description": "Expand the width of one side to the left or right while the other side keeps within the constraints of the max width.", "type": "select", "options": { "Don't expand": "", "To left": "left", "To right": "right" }, "enable": "width && width != 'expand'" }, "height": { "type": "select", "options": { "None": "", "Pixels": "pixels", "Viewport": "viewport", "Viewport (Subtract Next Section)": "section", "Expand Page to Viewport": "page" } }, "height_viewport": { "type": "number", "attrs": { "placeholder": "100", "min": 0, "step": 10 }, "enable": "height == 'viewport' || height == 'pixels'" }, "height_offset_top": { "description": "Set a fixed height, and optionally subtract the header height to fill the first visible viewport. Alternatively, expand the height so the next section also fits the viewport, or on smaller pages to fill the viewport.", "type": "checkbox", "text": "Subtract height above section", "enable": "height == 'viewport' && (height_viewport || 0) <= 100 || height == 'section'" }, "vertical_align": { "label": "Vertical Alignment", "description": "Align the section content vertically, if the section height is larger than the content itself.", "type": "select", "options": { "Top": "", "Middle": "middle", "Bottom": "bottom" }, "enable": "height" }, "padding": { "label": "Padding", "description": "Set the vertical padding.", "type": "select", "options": { "Default": "", "X-Small": "xsmall", "Small": "small", "Large": "large", "X-Large": "xlarge", "None": "none" } }, "padding_remove_top": { "type": "checkbox", "text": "Remove top padding", "enable": "padding != 'none'" }, "padding_remove_bottom": { "type": "checkbox", "text": "Remove bottom padding", "enable": "padding != 'none'" }, "html_element": "${builder.html_element}", "sticky": { "label": "Sticky Effect", "description": "Sticky section will be covered by the following section while scrolling. Reveal section by previous section.", "type": "select", "options": { "None": "", "Cover": "cover", "Reveal": "reveal" } }, "header_transparent": { "label": "Transparent Header", "type": "checkbox", "text": "Make header transparent" }, "header_transparent_noplaceholder": { "description": "Make the header transparent and overlay this section if it directly follows the header.", "type": "checkbox", "text": "Pull content behind header", "enable": "header_transparent" }, "header_transparent_text_color": { "label": "Header Text Color", "description": "Force a light or dark color for text, buttons and controls on the image or video background.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "header_transparent" }, "animation": { "label": "Animation", "description": "Apply an animation to elements once they enter the viewport. Slide animations can come into effect with a fixed offset or at 100% of the element size.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" } }, "animation_delay": { "label": "Animation Delay", "description": "Delay the element animations in milliseconds, e.g. <code>200</code>.", "attrs": { "placeholder": "0" }, "enable": "animation", "divider": true }, "title_position": { "label": "Position", "description": "Define the title position within the section.", "type": "select", "options": { "Left Top": "top-left", "Left Center": "center-left", "Left Bottom": "bottom-left", "Right Top": "top-right", "Right Center": "center-right", "Right Bottom": "bottom-right" }, "enable": "title" }, "title_rotation": { "label": "Rotation", "description": "Rotate the title 90 degrees clockwise or counterclockwise.", "type": "select", "options": { "Left": "left", "Right": "right" }, "enable": "title" }, "title_breakpoint": { "label": "Breakpoint", "description": "Display the section title on the defined screen size and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "title" }, "status": { "label": "Status", "description": "Disable the section and publish it later.", "type": "checkbox", "text": "Disable section", "attrs": { "true-value": "disabled", "false-value": "" } }, "source": "${builder.source}", "name": "${builder.name}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-section</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-section"] } } }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "image", "video", "_media", "video_title", "title" ] }, { "title": "Settings", "fields": [ "style", "preserve_color", "overlap", "text_color", "width", "padding_remove_horizontal", "width_expand", { "label": "Height", "name": "_height", "type": "grid", "width": "3-4,1-4", "gap": "small", "fields": ["height", "height_viewport"] }, "height_offset_top", "vertical_align", "padding", "padding_remove_top", "padding_remove_bottom", "html_element", "sticky", "header_transparent", "header_transparent_noplaceholder", "header_transparent_text_color", "animation", "animation_delay", { "label": "Title", "type": "group", "fields": ["title_position", "title_rotation", "title_breakpoint"] } ] }, "${builder.advanced}" ] } }, "panels": { "builder-section-media": { "title": "Image/Video", "width": 500, "fields": { "image_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" } }, "image_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" } }, "video_width": { "label": "Width", "type": "number" }, "video_height": { "label": "Height", "type": "number" }, "media_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "show": "image && !video" }, "image_size": { "label": "Image Size", "description": "Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color.", "type": "select", "options": { "Auto": "", "Cover": "cover", "Contain": "contain", "Width 100%": "width-1-1", "Height 100%": "height-1-1" }, "show": "image && !video" }, "image_position": { "label": "Image Position", "description": "Set the initial background position, relative to the section layer.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "center-center", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "show": "image && !video" }, "image_effect": { "label": "Image Effect", "type": "select", "options": { "None": "", "Parallax": "parallax", "Fixed": "fixed" }, "show": "image && !video" }, "_image_parallax_button": { "description": "Add a parallax effect or fix the background with regard to the viewport while scrolling.", "type": "button-panel", "text": "Edit Parallax", "panel": "image-parallax", "show": "image && !video", "enable": "image_effect == 'parallax'" }, "media_visibility": { "label": "Visibility", "description": "Display the image or video only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" } }, "media_background": { "label": "Background Color", "description": "Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn't cover the whole section.", "type": "color" }, "media_blend_mode": { "label": "Blend Mode", "description": "Determine how the image or video will blend with the background color.", "type": "select", "options": { "Normal": "", "Multiply": "multiply", "Screen": "screen", "Overlay": "overlay", "Darken": "darken", "Lighten": "lighten", "Color-dodge": "color-dodge", "Color-burn": "color-burn", "Hard-light": "hard-light", "Soft-light": "soft-light", "Difference": "difference", "Exclusion": "exclusion", "Hue": "hue", "Saturation": "saturation", "Color": "color", "Luminosity": "luminosity" } }, "media_overlay": { "label": "Overlay Color", "type": "gradient", "internal": "media_overlay_gradient" }, "_media_overlay_parallax_button": { "description": "Set an additional transparent overlay to soften the image or video.", "type": "button-panel", "text": "Edit Parallax", "panel": "media-overlay-parallax", "enable": "media_overlay" } }, "fieldset": { "default": { "fields": [ { "description": "Set the width and height in pixels. Setting just one value preserves the original proportions. The image will be resized and cropped automatically.", "name": "_image_dimension", "type": "grid", "width": "1-2", "show": "image && !video", "fields": ["image_width", "image_height"] }, { "description": "Set the video dimensions.", "name": "_video_dimension", "type": "grid", "width": "1-2", "show": "video && !image", "fields": ["video_width", "video_height"] }, "media_focal_point", "image_loading", "image_size", "image_position", "image_effect", "_image_parallax_button", "media_visibility", "media_background", "media_blend_mode", "media_overlay", "_media_overlay_parallax_button" ] } } } } } elements/section/templates/template-video.php 0000644 00000001423 15175623010 0015452 0 ustar 00 <?php if ($iframe = $this->iframeVideo($props['video'])) { $video = $this->el('iframe', [ 'class' => [ 'uk-disabled', ], 'src' => $iframe, 'title' => $props['video_title'], ]); } else { $video = $this->el('video', [ 'src' => $props['video'], 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'class' => [ 'uk-object-{media_focal_point}', ], ]); } $video->attr([ 'width' => $props['video_width'], 'height' => $props['video_height'], 'class' => [ 'uk-blend-{media_blend_mode}', 'uk-visible@{media_visibility}', ], 'uk-cover' => true, ]); return $video; elements/section/templates/template.php 0000644 00000017122 15175623010 0014351 0 ustar 00 <?php // Initialize prop if not set $props += [ 'media_overlay_gradient' => null, 'background_parallax_background' => null, ]; // Resets if (!($props['image'] || $props['video'])) { $props['media_overlay'] = false; $props['media_overlay_gradient'] = false; } if (!($props['height'] == 'viewport' && $props['height_viewport'] <= 100 || $props['height'] == 'section')) { $props['height_offset_top'] = false; } if (!$props['height']) { $props['vertical_align'] = false; } if ($props['image']) { $props['video'] = false; } $el = $this->el($props['html_element'] ?: 'div', $attrs); $el->attr([ 'class' => [ 'uk-section-{style}', 'uk-section-overlap {@overlap}', 'uk-position-z-index-negative {@sticky}', 'uk-preserve-color {@style}' => $props['preserve_color'] || ($props['text_color'] && ($props['image'] || $props['video'])), 'uk-{text_color}' => !$props['style'] || $props['image'] || $props['video'], 'uk-inverse-{header_transparent_text_color}' => $props['header_transparent'] && ($props['text_color'] != $props['header_transparent_text_color'] || !($props['style'] || $props['image'] || $props['video'])), 'uk-position-relative {@!sticky}' => ($props['image'] && ($props['media_overlay'] || $props['media_overlay_gradient'])) || ($props['video'] && !$this->iframeVideo($props['video'])), // uk-sticky already sets a position context 'uk-cover-container {@video}' => $this->iframeVideo($props['video']), ], 'style' => [ 'background-color: {media_background}; {@video}', 'background-color: {background_color}; {@!media_background} {@!video} {@!style}' ], 'tm-header-transparent-noplaceholder' => $props['header_transparent_noplaceholder'], ]); if (!$props['style'] && $bgParallax = $this->parallaxOptions($props, 'background_', ['background'])) { $el->attr('uk-parallax', $bgParallax); } if ($props['sticky']) { $el->attr([ 'uk-sticky' => [ 'overflow-flip: true; end: 100%; {@sticky: cover}', 'position: bottom; overflow-flip: true; start: -100%; end: 0; {@sticky: reveal}', ], 'style' => ['z-index: calc(var(--tm-reveal, 0) - {0}); {@sticky: reveal}' => 1 + ($i ?? 0)], ]); } if ($props['animation']) { $el->attr('uk-scrollspy', [ 'target: [uk-scrollspy-class];', 'cls: uk-animation-{animation};', 'delay: {0};' => $props['animation_delay'] ?: 'false', ]); } // Section $attrs_section = [ 'class' => [ 'uk-section', 'uk-section-{!padding: |none}' , 'uk-padding-remove-vertical {@padding: none}', 'uk-padding-remove-top {@!padding: none} {@padding_remove_top}', 'uk-padding-remove-bottom {@!padding: none} {@padding_remove_bottom}', 'uk-flex [uk-flex-{vertical_align} {@!title}] {@vertical_align}', // Height Viewport 'uk-height-viewport {@height: viewport} {@!height_offset_top} {@height_viewport: |100}', 'uk-height-viewport-{0} {@height: viewport} {@!height_offset_top} {@height_viewport: 200|300|400}' => (int) $props['height_viewport'] / 100, ], 'style' => [ // Height Viewport 'min-height: {!height_viewport: |100|200|300|400}vh {@height: viewport} {@!height_offset_top}', 'min-height: {0}px {@height: pixels}' => $props['height_viewport'] ?: 100, ], // Height Viewport 'uk-height-viewport' => $props['height'] !== 'pixels' ? [ 'offset-top: true; {@height: viewport|section} {@height_offset_top}', 'offset-bottom: {0}; {@height: viewport} {@height_offset_top}' => $props['height_viewport'] && $props['height_viewport'] < 100 ? 100 - (int) $props['height_viewport'] : false, 'offset-bottom: {0}; {@height: section}' => $props['image'] ? '! +' : 'true', 'expand: true; {@height: page}', ] : false, ]; // Image $image = $props['image'] ? $this->el('div', $this->bgImage($props['image'], [ 'width' => $props['image_width'], 'height' => $props['image_height'], 'focal_point' => $props['media_focal_point'], 'loading' => $props['image_loading'] ? 'eager' : null, 'size' => $props['image_size'], 'position' => $props['image_position'], 'visibility' => $props['media_visibility'], 'blend_mode' => $props['media_blend_mode'], 'background' => $props['media_background'], 'effect' => $props['image_effect'] != 'parallax' ? $props['image_effect'] : '', ])) : null; if ($image && $props['image_effect'] == 'parallax' && $imageParallax = $this->parallaxOptions($props, 'image_', ['bgx', 'bgy'])) { $image->attr('uk-parallax', $imageParallax); } // Video $video = $props['video'] ? include "{$__dir}/template-video.php" : null; $overlay = ($props['media_overlay'] || $props['media_overlay_gradient']) && ($props['image'] || $props['video']) ? $this->el('div', [ 'class' => ['uk-position-cover'], 'style' => [ 'background-color: {media_overlay};', // `background-clip` fixes sub-pixel issue 'background-image: {media_overlay_gradient}; background-clip: padding-box;', ], ]) : null; if (($props['media_overlay'] || $props['media_overlay_gradient']) && ($props['image'] || $props['video']) && $mediaOverlayParallax = $this->parallaxOptions($props, 'media_overlay_', ['opacity'])) { $overlay->attr('uk-parallax', $mediaOverlayParallax); } $container = $props['width'] || $props['video'] || $overlay ? $this->el('div', [ 'class' => [ 'uk-container {@width}', 'uk-container-{width: xsmall|small|large|xlarge|expand}', 'uk-padding-remove-horizontal {@padding_remove_horizontal} {@width} {@!width:expand}', 'uk-container-expand-{width_expand} {@width} {@!width:expand}', // Make sure overlay and video is always below content 'uk-position-relative [{@!width} uk-panel]' => $overlay || $props['video'], ], ]) : null; $title = $this->el('div', [ 'class' => [ 'tm-section-title', 'uk-position-{title_position} uk-position-medium', !in_array($props['title_position'], ['center-left', 'center-right']) ? 'uk-margin-remove-vertical' : 'uk-text-nowrap', 'uk-visible@{title_breakpoint}', ], ]); ?> <?= $el($props, !$image ? $attrs_section : []) ?> <?php if ($props['image']) : ?> <?= $image($props, $attrs_section) ?> <?php endif ?> <?php if ($video) : ?> <?= $video($props, '') ?> <?php endif ?> <?php if ($overlay) : ?> <?= $overlay($props, '') ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $this->el('div', ['class' => [ 'uk-position-relative', 'uk-width-1-1 uk-flex uk-flex-{vertical_align}', ]])->render($props) ?> <?php endif ?> <?php if ($props['vertical_align']) : ?> <div class="uk-width-1-1"> <?php endif ?> <?php if ($container) : ?> <?= $container($props) ?> <?php endif ?> <?= $builder->render($children) ?> <?php if ($container) : ?> <?= $container->end() ?> <?php endif ?> <?php if ($props['vertical_align']) : ?> </div> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($props) ?> <div class="<?= $props['title_rotation'] == 'left' ? 'tm-rotate-180' : '' ?>"><?= $props['title'] ?></div> <?= $title->end() ?> </div> <?php endif ?> <?php if ($props['image']) : ?> </div> <?php endif ?> <?= $el->end() ?> elements/section/templates/content.php 0000644 00000000051 15175623010 0014201 0 ustar 00 <?php echo $builder->render($children); elements/section/element.php 0000644 00000000762 15175623010 0012173 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { /** @var Config $config */ $config = app(Config::class); // Set section transparent header if (is_null($config('header.section.transparent'))) { $config->set( 'header.section.transparent', (bool) $node->props['header_transparent'], ); } }, ], ]; elements/social/updates.php 0000644 00000005451 15175623010 0012015 0 ustar 00 <?php namespace YOOtheme; return [ '4.4.6' => function ($node) { // Previous version still had grid_gap as default unset($node->props['grid_gap']); if (!Arr::has($node->props, 'grid_column_gap')) { $node->props['grid_column_gap'] = ''; } if (!Arr::has($node->props, 'grid_row_gap')) { $node->props['grid_row_gap'] = ''; } // Remove deprecated prop unset($node->props['inline_align']); }, '4.4.0-beta.4' => function ($node) { Arr::updateKeys($node->props, [ 'grid_gap' => fn($value) => ['grid_column_gap' => $value, 'grid_row_gap' => $value], ]); }, '4.4.0-beta.0.1' => function ($node) { if (!empty($node->props['icon_width'])) { $node->props['image_width'] = $node->props['icon_width']; $node->props['image_height'] = $node->props['icon_width']; } }, '2.8.0-beta.0.3' => function ($node) { Arr::del($node->props, 'gap'); }, '2.4.14.1' => function ($node) { Arr::updateKeys($node->props, ['gap' => 'grid_gap']); }, '2.2.0-beta.0.1' => function ($node) { $props = (array) ($node->source->props ?? []); for ($i = 1; $i <= 5; $i++) { if (!empty($props["link_{$i}"])) { $node->children[] = (object) [ 'type' => 'social_item', 'props' => (object) ['link' => ''], 'source' => (object) [ 'query' => $node->source->query, 'props' => (object) ['link' => $props["link_{$i}"]], ], ]; } elseif (!empty($node->props["link_{$i}"])) { $node->children[] = (object) [ 'type' => 'social_item', 'props' => (object) ['link' => $node->props["link_{$i}"]], ]; } unset($node->props["link_{$i}"]); } unset($node->source); }, '2.1.0-beta.0.1' => function ($node) { if (!empty($node->props['icon_ratio'])) { $node->props['icon_width'] = round(20 * $node->props['icon_ratio']); unset($node->props['icon_ratio']); } }, '2.0.5.1' => function ($node) { $links = !empty($node->props['links']) ? (array) $node->props['links'] : []; for ($i = 0; $i <= 4; $i++) { if (isset($links[$i])) { $node->props['link_' . ($i + 1)] = $links[$i]; } } unset($node->props['links']); }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, ['gutter' => 'gap']); }, '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/social/templates/content.php 0000644 00000000224 15175623010 0014011 0 ustar 00 <ul> <?php foreach ($children as $child) : ?> <li><?= $builder->render($child, ['element' => $props]) ?></li> <?php endforeach ?> </ul> elements/social/templates/template.php 0000644 00000002620 15175623010 0014154 0 ustar 00 <?php $el = $this->el('div'); // Grid $grid = $this->el('ul', [ 'class' => [ 'uk-{link_style: iconnav|thumbnav} [uk-{link_style: iconnav|thumbnav}-vertical {@grid: vertical}]', 'uk-child-width-auto {@!link_style: iconnav|thumbnav}', 'uk-flex-column {@grid: vertical} {@!link_style: iconnav|thumbnav}', !in_array($props['link_style'], ['iconnav', 'thumbnav']) || (in_array($props['link_style'], ['iconnav', 'thumbnav']) && $props['grid'] == 'horizontal') ? $props['grid_column_gap'] == $props['grid_row_gap'] ? 'uk-grid-{grid_column_gap}' : '[uk-grid-column-{grid_column_gap}] [uk-grid-row-{grid_row_gap}]' : '', 'uk-flex-inline', // allow text alignment 'uk-flex-middle', // center images with different heights ], 'uk-grid' => !in_array($props['link_style'], ['iconnav', 'thumbnav']) || (in_array($props['link_style'], ['iconnav', 'thumbnav']) && $props['grid'] == 'horizontal'), 'uk-toggle' => [ 'cls: uk-flex-column; mode: media; media: @{grid_vertical_breakpoint} {@grid: vertical} {@!link_style: iconnav|thumbnav}', ], ]); ?> <?= $el($props, $attrs) ?> <?= $grid($props) ?> <?php foreach ($children as $child) : ?> <li class="el-item"><?= $builder->render($child, ['element' => $props]) ?></li> <?php endforeach ?> <?= $grid->end() ?> <?= $el->end() ?> elements/social/images/iconSmall.svg 0000644 00000001222 15175623010 0013536 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" d="M17.8,14.8c0,1.2-1,2.2-2.3,2.2c-1.2,0-2.3-1-2.3-2.2 c0-1.2,1-2.3,2.3-2.3C16.7,12.5,17.8,13.5,17.8,14.8z" /> <path fill="none" stroke="#444" d="M17.8,4.8c0,1.2-1,2.2-2.3,2.2c-1.2,0-2.3-1-2.3-2.2 c0-1.2,1-2.3,2.3-2.3C16.7,2.5,17.8,3.5,17.8,4.8z" /> <path fill="none" stroke="#444" d="M6.8,9.8c0,1.2-1,2.2-2.3,2.2s-2.3-1-2.3-2.2c0-1.2,1-2.3,2.3-2.3 S6.8,8.5,6.8,9.8z" /> <line fill="none" stroke="#444" x1="13.4" y1="14" x2="6.3" y2="10.7" /> <line fill="none" stroke="#444" x1="13.5" y1="5.5" x2="6.5" y2="8.8" /> </svg> elements/social/images/icon.svg 0000644 00000001644 15175623010 0012555 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="2" d="M27.371,23.013c0,1.897-1.588,3.486-3.646,3.486 c-1.906,0-3.648-1.589-3.648-3.486c0-1.904,1.588-3.648,3.648-3.648C25.627,19.364,27.371,20.947,27.371,23.013z" /> <path fill="none" stroke="#444" stroke-width="2" d="M27.371,7.148c0,1.906-1.588,3.489-3.646,3.489 c-1.906,0-3.648-1.583-3.648-3.489c0-1.901,1.588-3.647,3.648-3.647C25.627,3.501,27.371,5.09,27.371,7.148z" /> <path fill="none" stroke="#444" stroke-width="2" d="M9.924,15.08c0,1.901-1.589,3.491-3.648,3.491 c-2.059,0-3.647-1.59-3.647-3.491c0-1.905,1.589-3.647,3.647-3.647C8.335,11.433,9.924,13.017,9.924,15.08z" /> <line fill="none" stroke="#444" stroke-width="2" x1="20.393" y1="21.742" x2="9.129" y2="16.507" /> <line fill="none" stroke="#444" stroke-width="2" x1="20.553" y1="8.259" x2="9.446" y2="13.491" /> </svg> elements/social/element.json 0000644 00000023407 15175623010 0012164 0 ustar 00 { "name": "social", "title": "Social", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "link_style": "button", "grid": "horizontal", "grid_column_gap": "small", "grid_row_gap": "small", "image_svg_inline": true, "margin": "default" }, "placeholder": { "children": [ { "type": "social_item", "props": { "link": "https://twitter.com" } }, { "type": "social_item", "props": { "link": "https://facebook.com" } }, { "type": "social_item", "props": { "link": "https://www.youtube.com" } } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "title": "link", "item": "social_item" }, "link_style": { "label": "Style", "type": "select", "options": { "Icon Link": "", "Icon Button": "button", "Link": "link", "Link Muted": "muted", "Link Text": "text", "Link Reset": "reset", "Iconnav": "iconnav", "Thumbnav": "thumbnav" } }, "grid": { "label": "Grid", "type": "select", "options": { "Horizontal": "horizontal", "Vertical": "vertical" } }, "grid_vertical_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will align side by side.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "grid == 'vertical' && !$match(link_style, 'iconnav|thumbnav')" }, "grid_column_gap": { "label": "Column Gap", "description": "Set the size of the gap between the grid columns.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "!$match(link_style, 'iconnav|thumbnav') || ($match(link_style, 'iconnav|thumbnav') && grid == 'horizontal')" }, "grid_row_gap": { "label": "Row Gap", "description": "Set the size of the gap between the grid rows.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "!$match(link_style, 'iconnav|thumbnav') || ($match(link_style, 'iconnav|thumbnav') && grid == 'horizontal')" }, "icon_width": { "label": "Icon Width", "description": "Set the icon width." }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" } }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly" }, "link_target": { "label": "Link Target", "type": "checkbox", "text": "Open in a new window" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text." }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-item", ".el-link"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content"] }, { "title": "Settings", "fields": [ { "label": "Social Icons", "type": "group", "divider": true, "fields": [ "link_style", "grid", "grid_vertical_breakpoint", "grid_column_gap", "grid_row_gap" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ "icon_width", { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_svg_inline" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_aria_label" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/button_item/updates.php 0000644 00000001133 15175623010 0013065 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'lightbox_width' => 'image_width', 'lightbox_height' => 'image_height', 'lightbox_image_focal_point' => 'image_focal_point', ]); }, '1.18.0' => function ($node) { if (Arr::get($node->props, 'link_target') === true) { $node->props['link_target'] = 'blank'; } if (Arr::get($node->props, 'button_style') === 'muted') { $node->props['button_style'] = 'link-muted'; } }, ]; elements/button_item/templates/template-offcanvas.php 0000644 00000001666 15175623010 0017210 0 ustar 00 <?php // Offcanvas $offcanvas = $this->el('div', [ 'id' => ['{id}'], 'uk-offcanvas' => [ 'container: true;', 'flip: {dialog_offcanvas_flip};', 'overlay: {dialog_offcanvas_overlay};', ], ]); $offcanvas_content = $this->el('div', [ 'class' => [ 'uk-offcanvas-bar', 'uk-padding-remove {@link}', ], ]); $offcanvas_close = $this->el('button', [ 'class' => [ 'uk-offcanvas-close', 'uk-close-large {@dialog_close_large}', ], 'uk-close' => true, 'uk-toggle' => $props['dialog_close_large'] ? [ 'cls: uk-close-large {@dialog_close_large};', 'mode: media;', 'media: @s;', ] : false, 'type' => 'button', ]); ?> <?= $offcanvas($props) ?> <?= $offcanvas_content($props) ?> <?= $offcanvas_close($props, '') ?> <?= $props['dialog'] ?> <?= $offcanvas_content->end() ?> <?= $offcanvas->end() ?> elements/button_item/templates/template-image.php 0000644 00000000372 15175623010 0016315 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => true, 'width' => $props['image_width'], 'height' => $props['image_height'], 'focal_point' => $props['image_focal_point'], 'thumbnail' => true, ]); return $image; elements/button_item/templates/template.php 0000644 00000004060 15175623010 0015233 0 ustar 00 <?php $props['id'] = "js-{$this->uid()}"; // Button $button = $this->el('a', [ 'class' => $this->expr([ 'el-content', 'uk-width-1-1 {@fullwidth}', 'uk-{button_style: link-\w+}' => ['button_style' => $props['button_style']], 'uk-button uk-button-{!button_style: |link-\w+} [uk-button-{button_size}]' => ['button_style' => $props['button_style']], 'uk-flex-inline uk-flex-center uk-flex-middle' => $props['content'] && $props['icon'], ], $element), 'title' => ['{link_title}'], 'aria-label' => ['{link_aria_label}'], ]); if (($props['link'] && $props['link_target'] == 'modal') || (!$props['link'] && $props['dialog'] && in_array($props['dialog_layout'], ['modal', 'offcanvas']))) { $button->attr([ 'href' => ['#{id}'], 'uk-toggle' => true, ]); } else { $button->attr([ 'href' => ['{link}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); } // Icon $icon = $this->el('span', [ 'class' => [ 'uk-margin-small-right' => $props['content'] && $props['icon_align'] == 'left', 'uk-margin-small-left' => $props['content'] && $props['icon_align'] == 'right', ], 'uk-icon' => $props['icon'], ]); ?> <?= $button($props, $attrs) ?> <?php if ($props['icon'] && $props['icon_align'] == 'left') : ?> <?= $icon($props, '') ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $props['content'] ?> <?php endif ?> <?php if ($props['icon'] && $props['icon_align'] == 'right') : ?> <?= $icon($props, '') ?> <?php endif ?> <?= $button->end() ?> <?php if (($props['link'] && $props['link_target'] == 'modal') || (!$props['link'] && $props['dialog'] && $props['dialog_layout'] == 'modal')) : ?> <?= $this->render("{$__dir}/template-modal", compact('props')) ?> <?php endif ?> <?php if (!$props['link'] && $props['dialog'] && $props['dialog_layout'] == 'offcanvas') : ?> <?= $this->render("{$__dir}/template-offcanvas", compact('props')) ?> <?php endif ?> elements/button_item/templates/content.php 0000644 00000000474 15175623010 0015077 0 ustar 00 <?php if ($props['content'] != '') : ?> <p> <?php if ($props['link']) : ?> <a href="<?= $props['link'] ?>"><?= $props['content'] ?></a> <?php else : ?> <?= $props['content'] ?> <?php endif ?> </p> <?php endif ?> <?php if ($props['dialog']) : ?> <div><?= $props['dialog'] ?></div> <?php endif ?> elements/button_item/templates/template-media.php 0000644 00000001601 15175623010 0016306 0 ustar 00 <?php $src = $props['link']; if ($this->isImage($src)) { $media = include "{$__dir}/template-image.php"; } elseif ($this->isVideo($src) || $this->iframeVideo($src)) { $media = include "{$__dir}/template-video.php"; } else { // Open linked page in modal $media = $this->el('iframe', [ 'src' => $src, 'width' => $props['image_width'], 'height' => $props['image_height'], 'allow' => 'autoplay', 'allowfullscreen' => true, 'uk-responsive' => true, 'loading' => 'lazy', ]); } // Media $media->attr([ 'class' => [ 'el-dialog', 'uk-object-cover [uk-object-{image_focal_point}] {@link_target: offcanvas}' => $this->isImage($src), ], 'style' => [ 'width: 100%; height: 100%; {@link_target: offcanvas}', ], ]); ?> <?php if ($media) : ?> <?= $media($props, '') ?> <?php endif ?> elements/button_item/templates/template-modal.php 0000644 00000002563 15175623010 0016333 0 ustar 00 <?php // Modal $modal = $this->el('div', [ 'id' => ['{id}'], 'uk-modal' => true, 'class' => [ 'uk-modal', 'uk-modal-{dialog_modal_width: container} {@!link}', ], ]); $modal_dialog = $this->el('div', [ 'class' => [ 'uk-modal-dialog uk-margin-auto-vertical', 'uk-width-auto {@link}', 'uk-modal-body {@!link}', 'uk-width-1-1 {@dialog_modal_width: expand} {@!link}', ], ]); $modal_close = $this->el('button', [ 'class' => [ 'uk-close-large {@dialog_close_large}', 'uk-modal-close-default {@!dialog_close_outside}', 'uk-modal-close-outside {@dialog_close_outside}', ], 'uk-close' => true, 'uk-toggle' => ($props['dialog_close_large'] || $props['dialog_close_outside']) ? [ 'cls: [uk-close-large {@dialog_close_large}] [uk-modal-close-outside uk-modal-close-default {@dialog_close_outside}];', 'mode: media;', 'media: @s;', ] : false, 'type' => 'button', ]); ?> <?= $modal($props) ?> <?= $modal_dialog($props) ?> <?= $modal_close($props, '') ?> <?php if ($props['link']) : ?> <?= $this->render("{$__dir}/template-media", compact('props', 'element')) ?> <?php elseif ($props['dialog']) : ?> <?= $props['dialog'] ?> <?php endif ?> <?= $modal_dialog->end() ?> <?= $modal->end() ?> elements/button_item/templates/template-video.php 0000644 00000001515 15175623010 0016341 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'allowfullscreen' => true, 'uk-responsive' => true, 'loading' => 'lazy', ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => true, 'class' => [ // Imitate cropping like an image 'uk-object-cover [uk-object-{image_focal_point}] {@image_width} {@image_height}', ], 'style' => [ // Keep video responsiveness but with new proportions (because video isn't cropped like an image) 'aspect-ratio: {image_width} / {image_height};', ], ]); } $video->attr([ 'width' => $props['image_width'], 'height' => $props['image_height'], 'uk-video' => true, ]); return $video; elements/button_item/element.php 0000644 00000001431 15175623010 0013052 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { $config = app(Config::class); // Force reload, otherwise Modal/Offcanvas might be orphaned in the DOM if ($config('app.isCustomizer') && ( ($node->props['link'] && $node->props['link_target'] == 'modal') || (!$node->props['link'] && $node->props['dialog'] && in_array($node->props['dialog_layout'], ['modal', 'offcanvas'])) )) { $node->attrs['data-preview'] = 'reload'; } // Don't render element if content fields are empty return ($node->props['link'] || $node->props['dialog']) && ($node->props['content'] != '' || $node->props['icon']); }, ], ]; elements/button_item/element.json 0000644 00000016311 15175623010 0013237 0 ustar 00 { "@import": "./element.php", "name": "button_item", "title": "Item", "width": 500, "defaults": { "button_style": "default", "icon_align": "left", "dialog_layout": "modal", "dialog_offcanvas_flip": true }, "placeholder": { "props": { "content": "Button", "icon": "", "link": "#" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "source": true }, "icon": { "label": "Icon", "description": "Pick an optional icon from the icon library.", "type": "icon", "source": true }, "link": "${builder.link}", "link_title": "${builder.link_title}", "link_aria_label": "${builder.link_aria_label}", "dialog": { "label": "Dialog", "description": "Instead of opening a link, display an alternative content in a modal or an offcanvas sidebar.", "type": "editor", "source": true, "enable": "!link" }, "button_style": { "label": "Style", "description": "Set the button style.", "type": "select", "options": { "Default": "default", "Primary": "primary", "Secondary": "secondary", "Danger": "danger", "Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" } }, "icon_align": { "label": "Alignment", "description": "Choose the icon position.", "type": "select", "options": { "Left": "left", "Right": "right" }, "enable": "icon" }, "link_target": { "label": "Target", "type": "select", "options": { "Same Window": "", "New Window": "blank", "Modal": "modal" }, "enable": "link" }, "image_width": { "attrs": { "placeholder": "auto" }, "enable": "link && link_target == 'modal'" }, "image_height": { "attrs": { "placeholder": "auto" }, "enable": "link && link_target == 'modal'" }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "link && link_target == 'modal'" }, "dialog_layout": { "label": "Target", "type": "select", "options": { "Modal": "modal", "Offcanvas": "offcanvas" }, "enable": "dialog && !link" }, "dialog_close_large": { "label": "Close", "type": "checkbox", "text": "Display large icon", "enable": "dialog && !link && dialog_layout" }, "dialog_close_outside": { "type": "checkbox", "text": "Display outside", "enable": "dialog && !link && dialog_layout == 'modal'" }, "dialog_modal_width": { "label": "Modal Width", "type": "select", "options": { "Default": "", "Container": "container", "Expand": "expand" }, "enable": "dialog && !link && dialog_layout == 'modal'" }, "dialog_offcanvas_flip": { "label": "Offcanvas", "type": "checkbox", "text": "Display on the right", "enable": "dialog && !link && dialog_layout == 'offcanvas'" }, "dialog_offcanvas_overlay": { "type": "checkbox", "text": "Overlay the site", "enable": "dialog && !link && dialog_layout == 'offcanvas'" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "icon", "link", "link_title", "link_aria_label", "dialog" ] }, { "title": "Settings", "fields": [ { "label": "Button", "type": "group", "divider": true, "fields": ["button_style"] }, { "label": "Icon", "type": "group", "divider": true, "fields": ["icon_align"] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", { "label": "Width/Height", "description": "Set the width and height for the content the link is linking to, i.e. image, video or iframe.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_focal_point" ] }, { "label": "Dialog", "type": "group", "divider": true, "fields": [ "dialog_layout", "dialog_close_large", "dialog_close_outside", "dialog_modal_width", "dialog_offcanvas_flip", "dialog_offcanvas_overlay" ] } ] }, "${builder.advancedItem}" ] } } } elements/popover/updates.php 0000644 00000011033 15175623010 0012226 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.4' => function ($node) { unset($node->props['icon']); }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'panel_link') && Arr::get($node->props, 'css')) { $node->props['css'] = str_replace('.el-item', '.el-item > *', $node->props['css']); } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.0.0-beta.5.1' => function ($node) { Arr::updateKeys($node->props, [ 'link_type' => function ($value) { if ($value === 'content') { return [ 'title_link' => true, 'image_link' => true, 'link_text' => '', ]; } elseif ($value === 'element') { return [ 'card_link' => true, 'link_text' => '', ]; } }, ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } if (Arr::get($node->props, 'link_style') === 'card') { $node->props['link_type'] = 'element'; $node->props['link_style'] = 'default'; } Arr::updateKeys($node->props, ['image_card' => 'image_card_padding']); }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_inline_svg' => 'image_svg_inline', 'image_animate_svg' => 'image_svg_animate', ]); }, '1.18.0' => function ($node) { if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/popover/images/icon.svg 0000644 00000000703 15175623010 0012770 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="2" points="5,13 5,4 28,4 28,25 17,25" /> <rect width="12" height="12" fill="none" stroke="#444" stroke-width="2" x="2" y="16" /> <line fill="none" stroke="#444" stroke-width="2" x1="5" y1="22" x2="11" y2="22" /> <line fill="none" stroke="#444" stroke-width="2" x1="8" y1="19" x2="8" y2="25" /> </svg> elements/popover/images/iconSmall.svg 0000644 00000000627 15175623010 0013766 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" points="2.5,9 2.5,1.5 18.5,1.5 18.5,16.5 10,16.5" /> <rect width="8" height="8" fill="none" stroke="#444" x="0.5" y="10.5" /> <line fill="none" stroke="#444" x1="2" y1="14.5" x2="7" y2="14.5" /> <line fill="none" stroke="#444" x1="4.5" y1="12" x2="4.5" y2="17" /> </svg> elements/popover/element.json 0000644 00000065523 15175623010 0012411 0 ustar 00 { "@import": "./element.php", "name": "popover", "title": "Popover", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_image": true, "show_link": true, "drop_mode": "hover", "drop_position": "top-center", "card_style": "default", "title_hover_style": "reset", "title_element": "h3", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "image_card_padding": true, "image_svg_color": "emphasis", "link_text": "Read more", "link_style": "default", "margin": "default" }, "placeholder": { "children": [ { "type": "popover_item", "props": { "position_x": 20, "position_y": 50 } }, { "type": "popover_item", "props": { "position_x": 50, "position_y": 20 } }, { "type": "popover_item", "props": { "position_x": 70, "position_y": 70 } } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "background_image": { "label": "Image", "type": "image", "source": true }, "background_image_width": { "label": "Image Width", "attrs": { "placeholder": "auto" }, "enable": "background_image" }, "background_image_height": { "label": "Image Height", "attrs": { "placeholder": "auto" }, "enable": "background_image" }, "background_image_alt": { "label": "Image Alt", "source": true, "enable": "background_image" }, "content": { "label": "Items", "type": "content-items", "item": "popover_item", "media": { "type": "image", "item": { "title": "title", "image": "src" } } }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_image": { "type": "checkbox", "text": "Show the image" }, "show_link": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the link" }, "background_image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "background_image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly" }, "marker_color": { "label": "Color", "description": "Set light or dark color mode.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" } }, "drop_mode": { "label": "Mode", "description": "Display the popover on click or hover.", "type": "select", "options": { "Click": "click", "Hover": "hover" } }, "drop_position": { "label": "Position", "description": "Select the popover alignment to its marker. If the popover doesn't fit its container, it will flip automatically.", "type": "select", "options": { "Top": "top-center", "Bottom": "bottom-center", "Left": "left-center", "Right": "right-center" } }, "drop_width": { "label": "Width", "type": "number", "description": "Enter a width for the popover in pixels.", "attrs": { "placeholder": "300" } }, "card_style": { "label": "Style", "description": "Select a card style.", "type": "select", "options": { "Default": "default", "Primary": "primary", "Secondary": "secondary" } }, "card_link": { "label": "Link", "description": "Link the whole card if a link exists.", "type": "checkbox", "text": "Link card", "enable": "show_link" }, "card_size": { "label": "Padding", "description": "Set the padding between the card's edge and its content.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" } }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "show_title && show_link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "show_title && show_link && (title_link || card_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_card_padding": { "label": "Padding", "description": "Attach the image to the drop's edge.", "type": "checkbox", "text": "Align image without padding", "enable": "show_image" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "show_image && !image_card_padding" }, "image_link": { "label": "Link", "description": "Link the image if a link exists.", "type": "checkbox", "text": "Link image", "enable": "show_image && show_link" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "link_target": { "label": "Target", "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-marker</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-marker", ".el-item", ".el-title", ".el-meta", ".el-content", ".el-image", ".el-link" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "background_image", { "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "name": "_background_image_dimension", "type": "grid", "width": "1-2", "fields": ["background_image_width", "background_image_height"] }, "background_image_alt", "content", "show_title", "show_meta", "show_content", "show_image", "show_link" ] }, { "title": "Settings", "fields": [ { "label": "Background Image", "type": "group", "divider": true, "fields": ["background_image_focal_point", "background_image_loading"] }, { "label": "Marker", "type": "group", "divider": true, "fields": ["marker_color", "drop_mode"] }, { "label": "Popover", "type": "group", "divider": true, "fields": [ "drop_position", "drop_width", "card_style", "card_link", "card_size" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_style", "content_margin"] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_card_padding", "image_border", "image_link", "image_svg_inline", "image_svg_animate", "image_svg_color" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_text", "link_aria_label", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/popover/element.php 0000644 00000000542 15175623010 0012215 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { if (empty($node->props['background_image'])) { $node->props['background_image'] = Url::to( '~yootheme/theme/assets/images/element-image-placeholder.png', ); } }, ], ]; elements/popover/templates/template.php 0000644 00000002417 15175623010 0014400 0 ustar 00 <?php $el = $this->el('div', [ 'class' => [ // Fix stacking context for drops if parallax is enabled 'uk-position-relative uk-position-z-index {@animation: parallax}', ], ]); $inline = $this->el('div', [ 'class' => [ 'uk-inline', 'uk-inverse-{marker_color}', ], ]); // Image $image = $this->el('image', [ 'class' => [ 'uk-text-{image_svg_color}' => $props['image_svg_inline'] && $props['image_svg_color'] && $this->isImage($props['background_image']) == 'svg', ], 'src' => $props['background_image'], 'alt' => $props['background_image_alt'], 'loading' => $props['background_image_loading'] ? false : null, 'width' => $props['background_image_width'], 'height' => $props['background_image_height'], 'focal_point' => $props['background_image_focal_point'], 'uk-svg' => $props['image_svg_inline'], 'thumbnail' => true, ]); ?> <?= $el($props, $attrs) ?> <?= $inline($props) ?> <?= $props['background_image'] ? $image($props) : '' ?> <?php foreach ($children as $child) : ?> <?= $this->render("{$__dir}/template-marker", ['child' => $child, 'props' => $child->props, 'element' => $props]) ?> <?php endforeach ?> <?= $inline->end() ?> <?= $el->end() ?> elements/popover/templates/template-marker.php 0000644 00000002400 15175623010 0015647 0 ustar 00 <?php // Marker $marker = $this->el('a', [ 'class' => [ 'el-marker uk-position-absolute uk-transform-center uk-preserve-width', ], 'style' => [ 'top: {0};' => (is_numeric(rtrim($props['position_y'] ?: '', '%')) ? (float) $props['position_y'] : 50) . '%', 'left: {0};' => (is_numeric(rtrim($props['position_x'] ?: '', '%')) ? (float) $props['position_x'] : 50) . '%', ], 'href' => '#', // WordPress Preview reloads if `href` is empty 'uk-marker' => true, ]); // Marker Container $marker_container = $this->el('div', [ 'class' => [ 'uk-{marker_color}', ], ]); // Drop $drop = $this->el('div', [ 'style' => [ 'width: {0}px;' => rtrim($element['drop_width'] ?: '', 'px') ?: 300, ], 'uk-drop' => [ 'pos: {0};' => $props['drop_position'] ?: $element['drop_position'], 'mode: click;' => $element['drop_mode'] == 'click', 'toggle: - * > *; {@marker_color}', 'auto-update: false;', ], ]); ?> <?php if ($element['marker_color']) : ?> <?= $marker_container($element) ?> <?php endif ?> <?= $marker($element, '') ?> <?php if ($element['marker_color']) : ?> <?= $marker_container->end() ?> <?php endif ?> <?= $drop($element, $builder->render($child)) ?> elements/popover/templates/content.php 0000644 00000000747 15175623010 0014243 0 ustar 00 <?php if ($props['background_image']) : ?> <img src="<?= $props['background_image'] ?>" alt="<?= $props['background_image_alt'] ?>"> <?php endif ?> <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/slideshow_item/templates/template-link.php 0000644 00000003524 15175623010 0016660 0 ustar 00 <?php $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $element['overlay_link']) { $link_container->attr($link->attrs + [ 'class' => [ 'uk-display-block', // Needs to be child of `uk-light` or `uk-dark` 'uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $element['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($element); } } if ($link && $props['title'] != '' && $element['title_link']) { $props['title'] = $link($element, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && ($props['link_text'] || $element['link_text'])) { if ($element['overlay_link']) { $link = $this->el('div'); } $link->attr([ 'class' => [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-(muted|text)} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', // Keep link style if overlay link 'uk-link {@link_style:} {@overlay_link}', 'uk-text-muted {@link_style: link-muted} {@overlay_link}', ], 'uk-slideshow-parallax' => $this->parallaxOptions($element, 'link_'), ]); } return $link; elements/slideshow_item/templates/content.php 0000644 00000001477 15175623010 0015571 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['video']) : ?> <?php if ($this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/slideshow_item/templates/template.php 0000644 00000012534 15175623010 0015726 0 ustar 00 <?php // Override default settings $element['text_color'] = $props['text_color'] ?: $element['text_color']; if ($element['link']) { $props['link'] = ''; } // Item $el = $props['item_element'] ? $this->el($props['item_element']) : null; // Link Container $link_container = $props['link'] && $element['overlay_link'] ? $this->el('a', [ 'class' => [ 'uk-position-cover', ], ]) : null; // Image $props['image'] = $this->render("{$__dir}/template-media", compact('props', 'element')); // Extra effect for pull/push $opacity = $element['text_color'] === 'light' ? '0.5' : '0.2'; $pull_push = $this->el('div', [ 'class' => [ 'uk-position-cover', ], 'uk-slideshow-parallax' => $element['slideshow_animation'] == 'push' ? 'scale: 1.2,1.2,1' : 'scale: 1,1.2,1.2', ]); $pull_push_overlay = $this->el('div', [ 'class' => [ 'uk-position-cover', ], 'uk-slideshow-parallax' => $element['slideshow_animation'] == 'push' ? "opacity: 0,0,{$opacity}; backgroundColor: #000,#000" : "opacity: {$opacity},0,0; backgroundColor: #000,#000", ]); // Kenburns $kenburns_alternate = [ 'center-left', 'top-right', 'bottom-left', 'top-center', '', // center-center 'bottom-right', ]; $kenburns = $this->el('div', [ 'class' => [ 'uk-position-cover uk-animation-kenburns uk-animation-reverse', 'uk-transform-origin-{0}' => $element['slideshow_kenburns'] == 'alternate' ? $kenburns_alternate[$i % count($kenburns_alternate)] : ($element['slideshow_kenburns'] == 'center-center' ? '' : $element['slideshow_kenburns']), ], 'style' => [ '-webkit-animation-duration: {slideshow_kenburns_duration}s;', 'animation-duration: {slideshow_kenburns_duration}s;', ], ]); // Blend mode if ($props['media_blend_mode']) { if (in_array($element['slideshow_animation'], ['push', 'pull'])) { $pull_push->attr('class', ["uk-blend-{$props['media_blend_mode']}"]); } elseif ($element['slideshow_kenburns']) { $kenburns->attr('class', ["uk-blend-{$props['media_blend_mode']}"]); } } // Overlay Position $position = $this->el('div', [ 'class' => [ 'uk-position-cover uk-flex', 'uk-container {@overlay_container}', 'uk-container-{!overlay_container: |default}', 'uk-section[-{overlay_container_padding}] {@overlay_container}', 'uk-padding[-{overlay_margin}] {@!overlay_margin: none} {@!overlay_container}', ], ]); if (!$element['content_expand']) { $position->attr([ 'class' => [ 'uk-flex-top {@overlay_position: .*top.*}', 'uk-flex-bottom {@overlay_position: .*bottom.*}', 'uk-flex-left {@overlay_position: .*left.*}', 'uk-flex-right {@overlay_position: .*right.*}', 'uk-flex-center {@overlay_position: (|.*-)center}', 'uk-flex-middle {@overlay_position: center(|-.*)}', ], ]); } else { $position->attr([ 'class' => [ 'uk-flex-left {@overlay_position: .*left.*}', 'uk-flex-right {@overlay_position: .*right.*}', 'uk-flex-center {@overlay_position: center|(.*-)center}', ], ]); } // Overlay $overlay = $this->el('div', [ 'class' => [ 'el-overlay', 'uk-flex-1 {@overlay_position: top|bottom}', 'uk-panel {@!overlay_style}', 'uk-overlay uk-{overlay_style}', 'uk-padding-{overlay_padding} {@overlay_style}', 'uk-width-{overlay_width} {@!overlay_position: top|bottom}', 'uk-transition-{overlay_animation} {@!overlay_animation: |parallax}', 'uk-{text_color} {@!overlay_style}', 'uk-margin-remove-first-child', 'uk-flex uk-flex-column {@content_expand}' ], 'uk-slideshow-parallax' => $this->parallaxOptions($element, 'overlay_'), ]); // Link $link = include "{$__dir}/template-link.php"; ?> <?php if ($el) : ?> <?= $el($element) ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container($element) ?> <?php endif ?> <?php if (in_array($element['slideshow_animation'], ['push', 'pull'])) : ?> <?= $pull_push($element) ?> <?php endif ?> <?php if ($element['slideshow_kenburns']) : ?> <?= $kenburns($element) ?> <?php endif ?> <?= $props['image'] ?> <?php if ($element['slideshow_kenburns']) : ?> <?= $kenburns->end() ?> <?php endif ?> <?php if (in_array($element['slideshow_animation'], ['push', 'pull'])) : ?> <?= $pull_push->end() ?> <?= $pull_push_overlay($element, '') ?> <?php endif ?> <?php if ($props['media_overlay']) : ?> <div class="uk-position-cover" style="background-color:<?= $props['media_overlay'] ?>"></div> <?php endif ?> <?php if ($props['title'] != '' || $props['meta'] != '' || $props['content'] != '' || $props['link']) : ?> <?= $position($element) ?> <?= $overlay($element) ?> <?= $this->render("{$__dir}/template-content", compact('props', 'link')) ?> <?= $overlay->end() ?> <?= $position->end() ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container->end() ?> <?php endif ?> <?php if ($el) : ?> <?= $el->end() ?> <?php endif ?> elements/slideshow_item/templates/template-content.php 0000644 00000006336 15175623010 0017401 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', 'uk-flex-1 {@content_expand}' => !$props['content'] && (!$props['meta'] || $element['meta_align'] == 'above-title'), ], 'uk-slideshow-parallax' => $this->parallaxOptions($element, 'title_'), ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', 'uk-flex-1 {@content_expand}' => $element['meta_align'] == 'below-content' || (!$props['content'] && ($element['meta_align'] == 'above-content' || ($element['meta_align'] == 'below-title' ))), ], 'uk-slideshow-parallax' => $this->parallaxOptions($element, 'meta_'), ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), 'uk-flex-1 {@content_expand}' => !($props['meta'] && $element['meta_align'] == 'below-content'), ], 'uk-slideshow-parallax' => $this->parallaxOptions($element, 'content_'), ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', ], ]); ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> elements/slideshow_item/templates/template-video.php 0000644 00000001562 15175623010 0017031 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'loading' => $element['image_loading'] && $i === 0 ? 'lazy' : null, 'title' => $props['video_title'], 'class' => [ 'uk-disabled', ], 'uk-video' => [ 'automute: true;', ], ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'preload' => $element['image_loading'] && $i === 0 ? 'none' : null, 'uk-video' => true, 'class' => [ 'uk-object-{0}' => $focal, ], ]); } $video->attr([ 'width' => $element['image_width'], 'height' => $element['image_height'], ]); return $video; elements/slideshow_item/templates/template-image.php 0000644 00000000477 15175623010 0017011 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] && $i === 0 ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $focal, 'thumbnail' => true, ]); return $image; elements/slideshow_item/templates/template-media.php 0000644 00000001125 15175623010 0016775 0 ustar 00 <?php if ($props['video']) { $src = $props['video']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-video.php"; } elseif ($props['image']) { $src = $props['image']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-image.php"; } else { return; } // Media $media->attr([ 'class' => [ 'el-image', 'uk-blend-{0} {@!slideshow_animation: push|pull} {@!slideshow_kenburns}' => $props['media_blend_mode'], ], 'uk-cover' => true, 'uk-video' => false, ]); ?> <?= $media($element, '') ?> elements/slideshow_item/element.php 0000644 00000002102 15175623010 0013534 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['title', 'meta', 'content', 'link', 'thumbnail'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; } } /** * Auto-correct media rendering for dynamic content * * @var View $view */ $view = app(View::class); if ($node->props['image'] && $view->isVideo($node->props['image'])) { $node->props['video'] = $node->props["image"]; $node->props['image'] = null; } elseif ($node->props['video'] && $view->isImage($node->props['video'])) { $node->props['image'] = $node->props['video']; $node->props['video'] = null; } // Don't render element if content fields are empty return $node->props['image'] || $node->props['video']; }, ], ]; elements/slideshow_item/updates.php 0000644 00000000340 15175623010 0013552 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'image') && Arr::get($node->props, 'video')) { unset($node->props['video']); } }, ]; elements/slideshow_item/element.json 0000644 00000017327 15175623010 0013735 0 ustar 00 { "@import": "./element.php", "name": "slideshow_item", "title": "Item", "width": 500, "placeholder": { "props": { "image": "${url:~yootheme/theme/assets/images/element-image-placeholder.png}", "video": "", "title": "", "meta": "", "content": "", "thumbnail": "" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "image": { "label": "Image", "type": "image", "source": true, "show": "!video", "altRef": "%name%_alt" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "_media": { "type": "button-panel", "panel": "builder-slideshow-item-media", "text": "Edit Settings", "show": "image || video" }, "video_title": { "label": "Video Title", "source": true, "show": "video && $match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')" }, "image_alt": { "label": "Image Alt", "source": true, "show": "image && !video" }, "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true, "enable": "link" }, "thumbnail": { "label": "Navigation Thumbnail", "description": "This option is only used if the thumbnail navigation is set.", "type": "image", "source": true }, "text_color": { "label": "Text Color", "description": "Set a different text color for this item.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "item_element": "${builder.html_element_item}", "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "thumbnail_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "thumbnail" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "image", "video", "_media", "image_alt", "title", "meta", "content", "link", "link_text", "link_aria_label", "thumbnail" ] }, { "title": "Settings", "fields": [ { "label": "Item", "type": "group", "divider": true, "fields": ["text_color", "item_element"] }, { "label": "Image", "type": "group", "divider": true, "fields": ["image_focal_point"] }, { "label": "Thumbnail", "type": "group", "fields": ["thumbnail_focal_point"] } ] }, "${builder.advancedItem}" ] } }, "panels": { "builder-slideshow-item-media": { "title": "Image/Video", "width": 500, "fields": { "media_background": { "label": "Background Color", "description": "Use the background color in combination with blend modes.", "type": "color" }, "media_blend_mode": { "label": "Blend Mode", "description": "Determine how the image or video will blend with the background color.", "type": "select", "options": { "Normal": "", "Multiply": "multiply", "Screen": "screen", "Overlay": "overlay", "Darken": "darken", "Lighten": "lighten", "Color-dodge": "color-dodge", "Color-burn": "color-burn", "Hard-light": "hard-light", "Soft-light": "soft-light", "Difference": "difference", "Exclusion": "exclusion", "Hue": "hue", "Saturation": "saturation", "Color": "color", "Luminosity": "luminosity" }, "enable": "media_background" }, "media_overlay": { "label": "Overlay Color", "description": "Set an additional transparent overlay to soften the image or video.", "type": "color" } }, "fieldset": { "default": { "fields": ["media_background", "media_blend_mode", "media_overlay"] } } } } } elements/map/updates.php 0000644 00000003001 15175623010 0011305 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset($node->props['width_max']); }, '4.3.0-beta.0.5' => function ($node, $params) { if ($height = Arr::get($node->props, 'viewport_height')) { if ($height === 'full' || $height === 'percent') { $node->props['viewport_height'] = 'viewport'; } if ($height === 'percent') { $node->props['viewport_height_viewport'] = 80; } if ( ($params['updateContext']['sectionIndex'] ?? 0) < 2 && empty($params['updateContext']['height']) ) { $node->props['viewport_height_offset_top'] = true; } $params['updateContext']['height'] = true; } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.18.0' => function ($node) { if ( !isset($node->props['width_breakpoint']) && Arr::get($node->props, 'width_max') === false ) { $node->props['width_breakpoint'] = true; } }, ]; elements/map/element.json 0000644 00000106731 15175623010 0011471 0 ustar 00 { "@import": "./element.php", "name": "map", "title": "Map", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_image": true, "show_link": true, "type": "roadmap", "zoom": 10, "controls": true, "poi": false, "zooming": false, "dragging": false, "min_zoom": 0, "max_zoom": 18, "title_hover_style": "reset", "title_element": "h3", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "image_svg_color": "emphasis", "link_text": "Read more", "link_style": "default", "margin": "default" }, "placeholder": { "children": [{ "type": "list_item", "props": {} }] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "title": "title", "button": "Add Item", "item": "map_item" }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_image": { "type": "checkbox", "text": "Show the image" }, "show_link": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the link" }, "marker_icon": { "label": "Marker Icon", "type": "image" }, "marker_icon_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "marker_icon" }, "marker_icon_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "marker_icon" }, "cluster_icon_1": { "label": "Cluster Icon (< 10 Markers)", "type": "image" }, "cluster_icon_1_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "cluster_icon_1" }, "cluster_icon_1_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "cluster_icon_1" }, "cluster_icon_1_text_color": { "label": "Text Color", "type": "color", "enable": "cluster_icon_1" }, "cluster_icon_2": { "label": "Cluster Icon (< 100 Markers)", "type": "image" }, "cluster_icon_2_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "cluster_icon_2" }, "cluster_icon_2_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "cluster_icon_2" }, "cluster_icon_2_text_color": { "label": "Text Color", "type": "color", "enable": "cluster_icon_2" }, "cluster_icon_3": { "label": "Cluster Icon (100+ Markers)", "type": "image" }, "cluster_icon_3_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "cluster_icon_3" }, "cluster_icon_3_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "cluster_icon_3" }, "cluster_icon_3_text_color": { "label": "Text Color", "type": "color", "enable": "cluster_icon_3" }, "type": { "label": "Type", "description": "Choose a map type.", "type": "select", "options": { "Roadmap": "roadmap", "Satellite": "satellite" } }, "zoom": { "label": "Zoom", "description": "Set the initial resolution at which to display the map. 0 is fully zoomed out and 18 is at the highest resolution zoomed in. Alternatively, set the viewport to contain the given markers.", "type": "range", "attrs": { "min": 0, "max": 18, "step": 1 }, "enable": "!fit_bounds" }, "fit_bounds": { "type": "checkbox", "text": "Fit markers" }, "controls": { "label": "Controls", "description": "Display the map controls and define whether the map can be zoomed or dragged using the mouse wheel or touch.", "type": "checkbox", "text": "Show map controls" }, "poi": { "type": "checkbox", "text": "Show points of interest", "show": "yootheme.config.google_maps_api_key" }, "zooming": { "type": "checkbox", "text": "Enable map zooming" }, "dragging": { "type": "checkbox", "text": "Enable map dragging" }, "min_zoom": { "label": "Minimum Zoom", "description": "Minimum zoom level of the map.", "type": "range", "attrs": { "min": 0, "max": 18, "step": 1 }, "enable": "zooming" }, "max_zoom": { "label": "Maximum Zoom", "description": "Maximum zoom level of the map.", "type": "range", "attrs": { "min": 0, "max": 18, "step": 1 }, "enable": "zooming" }, "viewport_height": { "type": "select", "options": { "None": "", "Viewport": "viewport", "Viewport (Subtract Next Section)": "section" } }, "viewport_height_viewport": { "type": "number", "attrs": { "placeholder": "100", "min": 0, "max": 100, "step": 10, "class": "uk-form-width-xsmall" }, "enable": "viewport_height == 'viewport'" }, "viewport_height_offset_top": { "type": "checkbox", "text": "Subtract height above", "enable": "viewport_height == 'viewport' && (viewport_height_viewport || 0) <= 100 || viewport_height == 'section'" }, "height": { "label": "Height", "description": "Set the height in pixels.", "type": "number", "enable": "!viewport_height" }, "width": { "label": "Width", "description": "Set the width in pixels. If no width is set, the map takes the full width. If both width and height are set, the map is responsive like an image. Additionally, the width can be used as a breakpoint. The map takes the full width, but below the breakpoint it will start to shrink preserving the aspect ratio.", "type": "number", "enable": "!viewport_height" }, "width_breakpoint": { "type": "checkbox", "text": "Use as breakpoint only", "enable": "width && !viewport_height" }, "text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "styler_hue": { "label": "Hue", "description": "Set the hue, e.g. <i>#ff0000</i>.", "type": "color", "alpha": false, "fields": false, "saturation": false, "enable": "yootheme.config.google_maps_api_key" }, "styler_lightness": { "label": "Lightness", "description": "Set percentage change in lightness (Between -100 and 100).", "type": "range", "attrs": { "min": -100, "max": 100, "step": 1 }, "enable": "yootheme.config.google_maps_api_key" }, "styler_invert_lightness": { "type": "checkbox", "text": "Invert lightness", "enable": "yootheme.config.google_maps_api_key" }, "styler_saturation": { "label": "Saturation", "description": "Set percentage change in saturation (Between -100 and 100).", "type": "range", "attrs": { "min": -100, "max": 100, "step": 1 }, "enable": "yootheme.config.google_maps_api_key" }, "styler_gamma": { "label": "Gamma", "description": "Set percentage change in the amount of gamma correction (Between 0.01 and 10.0, where 1.0 applies no correction).", "type": "range", "attrs": { "min": 0.5, "max": 2, "step": 0.1 }, "enable": "yootheme.config.google_maps_api_key" }, "clustering": { "label": "Clustering", "type": "checkbox", "text": "Enable marker clustering" }, "popup_max_width": { "label": "Max Width", "description": "Set the maximum width.", "type": "number" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "show_title && show_link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "show_title && show_link && title_link" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "show_image" }, "image_link": { "label": "Link", "description": "Link the image if a link exists.", "type": "checkbox", "text": "Link image", "enable": "show_image && show_link" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "link_target": { "label": "Target", "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "item_text_align": { "label": "Text Alignment", "description": "Center, left and right alignment may depend on a breakpoint and require a fallback.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right", "Justify": "justify" } }, "item_text_align_breakpoint": { "label": "Text Alignment Breakpoint", "description": "Define the device width from which the alignment will apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "item_text_align && item_text_align != 'justify'" }, "item_text_align_fallback": { "label": "Text Alignment Fallback", "description": "Define an alignment fallback for device widths below the breakpoint.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right", "Justify": "justify" }, "enable": "item_text_align && item_text_align != 'justify' && item_text_align_breakpoint" }, "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-item", ".el-title", ".el-meta", ".el-content", ".el-image", ".el-link" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_image", "show_link", "marker_icon", { "name": "_marker_icon_dimension", "type": "grid", "width": "1-2", "fields": ["marker_icon_width", "marker_icon_height"] }, "cluster_icon_1", { "name": "_cluster_icon_1_dimensions", "type": "grid", "width": "1-3", "fields": [ "cluster_icon_1_width", "cluster_icon_1_height", "cluster_icon_1_text_color" ] }, "cluster_icon_2", { "name": "_cluster_icon_2_dimensions", "type": "grid", "width": "1-3", "fields": [ "cluster_icon_2_width", "cluster_icon_2_height", "cluster_icon_2_text_color" ] }, "cluster_icon_3", { "name": "_cluster_icon_3_dimensions", "type": "grid", "width": "1-3", "fields": [ "cluster_icon_3_width", "cluster_icon_3_height", "cluster_icon_3_text_color" ] } ] }, { "title": "Settings", "fields": [ { "label": "Map", "type": "group", "divider": true, "fields": [ "type", "zoom", "fit_bounds", "controls", "poi", "zooming", "dragging", "min_zoom", "max_zoom", { "label": "Viewport Height", "description": "The height can adapt to the height of the viewport. <br><br>Note: Make sure no height is set in the section settings when using one of the viewport options.", "name": "_viewport_height", "type": "grid", "width": "expand,auto", "gap": "small", "fields": ["viewport_height", "viewport_height_viewport"] }, "viewport_height_offset_top", "height", "width", "width_breakpoint", "text_color" ] }, { "label": "Style", "description": "Only available for Google Maps.", "type": "group", "divider": true, "fields": [ "styler_hue", "styler_lightness", "styler_invert_lightness", "styler_saturation", "styler_gamma" ] }, { "label": "Marker", "type": "group", "divider": true, "fields": ["clustering"] }, { "label": "Popup", "type": "group", "divider": true, "fields": ["popup_max_width"] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_style", "content_margin"] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_border", "image_link", "image_svg_inline", "image_svg_animate", "image_svg_color" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_text", "link_aria_label", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "item_text_align", "item_text_align_breakpoint", "item_text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/map/app/map-google.min.js 0000644 00000010427 15175623010 0013070 0 ustar 00 /*! YOOtheme Pro v4.5.33 | https://yootheme.com */ (function(z,I){"use strict";function W(e,n){e.src=n}const J=e=>{var n,t,i,s="The Google Maps JavaScript API",y="google",w="importLibrary",M="__ib__",l=document,T=window,u=T[y]||(T[y]={}),a=u.maps||(u.maps={}),b=new Set,m=new URLSearchParams,p=()=>n||(n=new Promise(async(f,v)=>{var S;await(t=l.createElement("script")),m.set("libraries",[...b]+"");for(i in e)m.set(i.replace(/[A-Z]/g,L=>"_"+L[0].toLowerCase()),e[i]);m.set("callback",y+".maps."+M),W(t,"https://maps.googleapis.com/maps/api/js?"+m),a[M]=f,t.onerror=()=>n=v(Error(s+" could not load.")),t.nonce=((S=l.querySelector("script[nonce]"))==null?void 0:S.nonce)||"",l.head.append(t)}));a[w]?console.warn(s+" only loads once. Ignoring:",e):a[w]=(f,...v)=>b.add(f)&&p().then(()=>a[w](f,...v))},U=e=>`The setOptions() function should only be called once. The options passed to the additional call (${JSON.stringify(e)}) will be ignored.`,Z=e=>`The google.maps.importLibrary() function is already defined, and @googlemaps/js-api-loader will use the existing function instead of overwriting it. The options passed to setOptions (${JSON.stringify(e)}) will be ignored.`,X=()=>{},j=()=>{};let P=!1;function H(e){if(P){X(U(e));return}Y(e),P=!0}async function K(e){var n,t;if(!((t=(n=window==null?void 0:window.google)==null?void 0:n.maps)!=null&&t.importLibrary))throw new Error("google.maps.importLibrary is not installed.");return await google.maps.importLibrary(e)}function Y(e){var t,i;const n=!!((i=(t=window.google)==null?void 0:t.maps)!=null&&i.importLibrary);n&&j(Z(e)),n||J(e)}async function C(e,{apiKey:n,type:t,center:i,zoom:s,fit_bounds:y,min_zoom:w,max_zoom:M,zooming:l,dragging:T,clustering:u,cluster_icons:a,controls:b,poi:m,markers:p,styler_invert_lightness:f,styler_hue:v,styler_saturation:S,styler_lightness:L,styler_gamma:q,popup_max_width:N,clustererUrl:F}){H({key:n,version:"weekly"});const[{event:Q,LatLng:E,LatLngBounds:V,Size:x,Point:k},{Map:ee,MapTypeId:te,InfoWindow:ne,StyledMapType:ie},{Marker:_},{MarkerClusterer:ae}]=await Promise.all(["core","maps","marker"].map(o=>K(o)).concat(u?import(F).then(o=>o.default):{})),c=new ee(e,{zoom:Number(s),minZoom:Number(l?w:s),maxZoom:Number(l?M:s),zoomControl:l&&b?null:!1,scrollwheel:l?null:!1,center:new E(i.lat,i.lng),mapTypeId:te[t.toUpperCase()],disableDefaultUI:!b,gestureHandling:T||l?"auto":"none",mapTypeControlOptions:{mapTypeIds:["styled_map","satellite"]}});c.getMapCapabilities=()=>({...c.mapCapabilities,isAdvancedMarkersAvailable:!1});let $;const O=new ne({maxWidth:N?parseInt(N,10):300});let A;if(u){const o={map:c};Array.isArray(a)&&(o.renderer={render({count:d,position:h}){let r;return d<10?r=a[0]:d<100?r=a[1]||a[0]:r=a[2]||a[1]||a[0],new _({position:h,icon:{url:r.url,scaledSize:r.size?new x(...r.size):null},label:{text:String(d),color:r.textColor?r.textColor:null,fontSize:"11px",fontWeight:"bold"},zIndex:Number(_.MAX_ZINDEX)+d})}}),A=new ae(o)}p==null||p.forEach(({lat:o,lng:d,content:h,show_popup:r,icon:R,iconSize:D,iconAnchor:B,title:se})=>{const g=new _({map:c,title:se,position:new E(o,d)});if(R&&g.setIcon({url:R,scaledSize:D?new x(...D):null,anchor:B?new k(...B):null}),A&&A.addMarker(g),h){const G=()=>{if(O.getMap()&&$===g){O.close();return}O.setContent(h),O.open(c,g),$=g};Q.addListener(g,"click",G),r&&G()}});const oe=new ie([{featureType:"all",elementType:"all",stylers:[{invert_lightness:f},{hue:v},{saturation:S},{lightness:L},{gamma:q}]},{featureType:"poi",stylers:[{visibility:m?"on":"off"}]}],{name:"Map"});if(c.mapTypes.set("styled_map",oe),t.toUpperCase()==="ROADMAP"&&c.setMapTypeId("styled_map"),y&&(p!=null&&p.length)){const o=new V;for(const{lat:d,lng:h}of p)o.extend(new E(d,h));c.fitBounds(o)}}z.component("Map",{connected(){var e,n,t;this.script||(this.script=I.$("script",this.$el)),this.script&&((e=this.map)!=null||(this.map=JSON.parse(this.script.textContent)),(n=this.templates)!=null||(this.templates=I.$$("template",this.$el)),(t=this.map.markers)==null||t.forEach((i,s)=>{i.content=I.html(this.templates[s]).trim(),!i.icon&&this.map.icon&&(i.icon=this.map.icon,i.iconSize=this.map.iconSize,i.iconAnchor=this.map.iconAnchor)}),this.map.lazyload&&"IntersectionObserver"in window?I.observeIntersection(this.$el,(i,s)=>{C(this.$el,this.map),s.disconnect()},{rootMargin:`${window.innerHeight/2}px 0px`}):C(this.$el,this.map))}})})(UIkit,UIkit.util); elements/map/app/map-google-markerclusterer.min.js 0000644 00000137211 15175623010 0016301 0 ustar 00 /*! YOOtheme Pro v4.5.33 | https://yootheme.com */ var wi=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function hs(V){return V&&V.__esModule&&Object.prototype.hasOwnProperty.call(V,"default")?V.default:V}var nt={exports:{}},ps=nt.exports,bi;function ds(){return bi||(bi=1,(function(V,Ei){(function(O,H){H(Ei)})(ps,function(O){var H,Yt,Xt=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof wi<"u"?wi:typeof self<"u"?self:{},ki={};function A(){if(Yt)return H;Yt=1;var e=function(t){return t&&t.Math===Math&&t};return H=e(typeof globalThis=="object"&&globalThis)||e(typeof window=="object"&&window)||e(typeof self=="object"&&self)||e(typeof Xt=="object"&&Xt)||e(typeof H=="object"&&H)||(function(){return this})()||Function("return this")()}var Jt,Qt,tr,rr,er,nr,mt,or,gt={};function I(){return Qt?Jt:(Qt=1,Jt=function(e){try{return!!e()}catch{return!0}})}function R(){if(rr)return tr;rr=1;var e=I();return tr=!e(function(){return Object.defineProperty({},1,{get:function(){return 7}})[1]!==7})}function ot(){if(nr)return er;nr=1;var e=I();return er=!e(function(){var t=(function(){}).bind();return typeof t!="function"||t.hasOwnProperty("prototype")})}function Z(){if(or)return mt;or=1;var e=ot(),t=Function.prototype.call;return mt=e?t.bind(t):function(){return t.apply(t,arguments)},mt}var ir,sr,ar,vt,ur,cr,fr,lr,hr,pr,dr,mr,gr,vr,yr,wr,br,Er,kr,yt,xr,Mr,Or,Pr,jr,Cr,Sr,Ar,_r,Ir,Tr,Lr,qr,Rr,Zr,zr,Dr,Fr,Nr,Ur,Br,wt={};function bt(){return ar?sr:(ar=1,sr=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}})}function z(){if(ur)return vt;ur=1;var e=ot(),t=Function.prototype,r=t.call,n=e&&t.bind.bind(r,r);return vt=e?n:function(o){return function(){return r.apply(o,arguments)}},vt}function Et(){if(fr)return cr;fr=1;var e=z(),t=e({}.toString),r=e("".slice);return cr=function(n){return r(t(n),8,-1)}}function kt(){return dr?pr:(dr=1,pr=function(e){return e==null})}function $r(){if(gr)return mr;gr=1;var e=kt(),t=TypeError;return mr=function(r){if(e(r))throw new t("Can't call method on "+r);return r}}function it(){if(yr)return vr;yr=1;var e=(function(){if(hr)return lr;hr=1;var r=z(),n=I(),o=Et(),i=Object,s=r("".split);return lr=n(function(){return!i("z").propertyIsEnumerable(0)})?function(u){return o(u)==="String"?s(u,""):i(u)}:i})(),t=$r();return vr=function(r){return e(t(r))}}function S(){if(br)return wr;br=1;var e=typeof document=="object"&&document.all;return wr=e===void 0&&e!==void 0?function(t){return typeof t=="function"||t===e}:function(t){return typeof t=="function"}}function K(){if(kr)return Er;kr=1;var e=S();return Er=function(t){return typeof t=="object"?t!==null:e(t)}}function xt(){if(xr)return yt;xr=1;var e=A(),t=S();return yt=function(r,n){return arguments.length<2?(o=e[r],t(o)?o:void 0):e[r]&&e[r][n];var o},yt}function Mt(){if(Or)return Mr;Or=1;var e=z();return Mr=e({}.isPrototypeOf)}function xi(){if(Sr)return Cr;Sr=1;var e,t,r=A(),n=(function(){if(jr)return Pr;jr=1;var a=A().navigator,l=a&&a.userAgent;return Pr=l?String(l):""})(),o=r.process,i=r.Deno,s=o&&o.versions||i&&i.version,u=s&&s.v8;return u&&(t=(e=u.split("."))[0]>0&&e[0]<4?1:+(e[0]+e[1])),!t&&n&&(!(e=n.match(/Edge\/(\d+)/))||e[1]>=74)&&(e=n.match(/Chrome\/(\d+)/))&&(t=+e[1]),Cr=t}function Wr(){if(_r)return Ar;_r=1;var e=xi(),t=I(),r=A().String;return Ar=!!Object.getOwnPropertySymbols&&!t(function(){var n=Symbol("symbol detection");return!r(n)||!(Object(n)instanceof Symbol)||!Symbol.sham&&e&&e<41})}function Gr(){if(Tr)return Ir;Tr=1;var e=Wr();return Ir=e&&!Symbol.sham&&typeof Symbol.iterator=="symbol"}function Vr(){if(qr)return Lr;qr=1;var e=xt(),t=S(),r=Mt(),n=Gr(),o=Object;return Lr=n?function(i){return typeof i=="symbol"}:function(i){var s=e("Symbol");return t(s)&&r(s.prototype,o(i))}}function Ot(){if(Zr)return Rr;Zr=1;var e=String;return Rr=function(t){try{return e(t)}catch{return"Object"}}}function W(){if(Dr)return zr;Dr=1;var e=S(),t=Ot(),r=TypeError;return zr=function(n){if(e(n))return n;throw new r(t(n)+" is not a function")}}function st(){if(Nr)return Fr;Nr=1;var e=W(),t=kt();return Fr=function(r,n){var o=r[n];return t(o)?void 0:e(o)}}function Mi(){if(Br)return Ur;Br=1;var e=Z(),t=S(),r=K(),n=TypeError;return Ur=function(o,i){var s,u;if(i==="string"&&t(s=o.toString)&&!r(u=e(s,o))||t(s=o.valueOf)&&!r(u=e(s,o))||i!=="string"&&t(s=o.toString)&&!r(u=e(s,o)))return u;throw new n("Can't convert object to primitive value")}}var Hr,Kr,Yr,Xr,Jr,Qr,te,re,ee,ne,oe,ie,se,ae,ue,ce,fe,le,he,pe,de,me,ge,ve,Pt={exports:{}};function X(){return Kr?Hr:(Kr=1,Hr=!1)}function jt(){if(Xr)return Yr;Xr=1;var e=A(),t=Object.defineProperty;return Yr=function(r,n){try{t(e,r,{value:n,configurable:!0,writable:!0})}catch{e[r]=n}return n}}function Ct(){if(Jr)return Pt.exports;Jr=1;var e=X(),t=A(),r=jt(),n="__core-js_shared__",o=Pt.exports=t[n]||r(n,{});return(o.versions||(o.versions=[])).push({version:"3.44.0",mode:e?"pure":"global",copyright:"\xA9 2014-2025 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.44.0/LICENSE",source:"https://github.com/zloirock/core-js"}),Pt.exports}function ye(){if(te)return Qr;te=1;var e=Ct();return Qr=function(t,r){return e[t]||(e[t]=r||{})}}function we(){if(ee)return re;ee=1;var e=$r(),t=Object;return re=function(r){return t(e(r))}}function D(){if(oe)return ne;oe=1;var e=z(),t=we(),r=e({}.hasOwnProperty);return ne=Object.hasOwn||function(n,o){return r(t(n),o)}}function be(){if(se)return ie;se=1;var e=z(),t=0,r=Math.random(),n=e(1.1.toString);return ie=function(o){return"Symbol("+(o===void 0?"":o)+")_"+n(++t+r,36)}}function F(){if(ue)return ae;ue=1;var e=A(),t=ye(),r=D(),n=be(),o=Wr(),i=Gr(),s=e.Symbol,u=t("wks"),a=i?s.for||s:s&&s.withoutSetter||n;return ae=function(l){return r(u,l)||(u[l]=o&&r(s,l)?s[l]:a("Symbol."+l)),u[l]}}function Oi(){if(fe)return ce;fe=1;var e=Z(),t=K(),r=Vr(),n=st(),o=Mi(),i=F(),s=TypeError,u=i("toPrimitive");return ce=function(a,l){if(!t(a)||r(a))return a;var c,f=n(a,u);if(f){if(l===void 0&&(l="default"),c=e(f,a,l),!t(c)||r(c))return c;throw new s("Can't convert object to primitive value")}return l===void 0&&(l="number"),o(a,l)}}function Ee(){if(he)return le;he=1;var e=Oi(),t=Vr();return le=function(r){var n=e(r,"string");return t(n)?n:n+""}}function ke(){if(de)return pe;de=1;var e=A(),t=K(),r=e.document,n=t(r)&&t(r.createElement);return pe=function(o){return n?r.createElement(o):{}}}function xe(){if(ge)return me;ge=1;var e=R(),t=I(),r=ke();return me=!e&&!t(function(){return Object.defineProperty(r("div"),"a",{get:function(){return 7}}).a!==7})}function Me(){if(ve)return gt;ve=1;var e=R(),t=Z(),r=(function(){if(ir)return wt;ir=1;var l={}.propertyIsEnumerable,c=Object.getOwnPropertyDescriptor,f=c&&!l.call({1:2},1);return wt.f=f?function(d){var h=c(this,d);return!!h&&h.enumerable}:l,wt})(),n=bt(),o=it(),i=Ee(),s=D(),u=xe(),a=Object.getOwnPropertyDescriptor;return gt.f=e?a:function(l,c){if(l=o(l),c=i(c),u)try{return a(l,c)}catch{}if(s(l,c))return n(!t(r.f,l,c),l[c])},gt}var Oe,Pe,je,Ce,Se,Ae,_e,St={};function Ie(){if(Pe)return Oe;Pe=1;var e=R(),t=I();return Oe=e&&t(function(){return Object.defineProperty(function(){},"prototype",{value:42,writable:!1}).prototype!==42})}function _(){if(Ce)return je;Ce=1;var e=K(),t=String,r=TypeError;return je=function(n){if(e(n))return n;throw new r(t(n)+" is not an object")}}function Y(){if(Se)return St;Se=1;var e=R(),t=xe(),r=Ie(),n=_(),o=Ee(),i=TypeError,s=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a="enumerable",l="configurable",c="writable";return St.f=e?r?function(f,d,h){if(n(f),d=o(d),n(h),typeof f=="function"&&d==="prototype"&&"value"in h&&c in h&&!h[c]){var g=u(f,d);g&&g[c]&&(f[d]=h.value,h={configurable:l in h?h[l]:g[l],enumerable:a in h?h[a]:g[a],writable:!1})}return s(f,d,h)}:s:function(f,d,h){if(n(f),d=o(d),n(h),t)try{return s(f,d,h)}catch{}if("get"in h||"set"in h)throw new i("Accessors not supported");return"value"in h&&(f[d]=h.value),f},St}function At(){if(_e)return Ae;_e=1;var e=R(),t=Y(),r=bt();return Ae=e?function(n,o,i){return t.f(n,o,r(1,i))}:function(n,o,i){return n[o]=i,n}}var Te,Le,qe,Re,Ze,ze,De,Fe,Ne,Ue,Be,$e,We,Ge,Ve,_t={exports:{}};function Pi(){if(Re)return qe;Re=1;var e=z(),t=S(),r=Ct(),n=e(Function.toString);return t(r.inspectSource)||(r.inspectSource=function(o){return n(o)}),qe=r.inspectSource}function It(){if(Fe)return De;Fe=1;var e=ye(),t=be(),r=e("keys");return De=function(n){return r[n]||(r[n]=t(n))}}function Tt(){return Ue?Ne:(Ue=1,Ne={})}function He(){if($e)return Be;$e=1;var e,t,r,n=(function(){if(ze)return Ze;ze=1;var p=A(),v=S(),y=p.WeakMap;return Ze=v(y)&&/native code/.test(String(y))})(),o=A(),i=K(),s=At(),u=D(),a=Ct(),l=It(),c=Tt(),f="Object already initialized",d=o.TypeError,h=o.WeakMap;if(n||a.state){var g=a.state||(a.state=new h);g.get=g.get,g.has=g.has,g.set=g.set,e=function(p,v){if(g.has(p))throw new d(f);return v.facade=p,g.set(p,v),v},t=function(p){return g.get(p)||{}},r=function(p){return g.has(p)}}else{var m=l("state");c[m]=!0,e=function(p,v){if(u(p,m))throw new d(f);return v.facade=p,s(p,m,v),v},t=function(p){return u(p,m)?p[m]:{}},r=function(p){return u(p,m)}}return Be={set:e,get:t,has:r,enforce:function(p){return r(p)?t(p):e(p,{})},getterFor:function(p){return function(v){var y;if(!i(v)||(y=t(v)).type!==p)throw new d("Incompatible receiver, "+p+" required");return y}}}}function Ke(){if(We)return _t.exports;We=1;var e=z(),t=I(),r=S(),n=D(),o=R(),i=(function(){if(Le)return Te;Le=1;var y=R(),k=D(),b=Function.prototype,P=y&&Object.getOwnPropertyDescriptor,M=k(b,"name"),w=M&&(function(){}).name==="something",E=M&&(!y||y&&P(b,"name").configurable);return Te={EXISTS:M,PROPER:w,CONFIGURABLE:E}})().CONFIGURABLE,s=Pi(),u=He(),a=u.enforce,l=u.get,c=String,f=Object.defineProperty,d=e("".slice),h=e("".replace),g=e([].join),m=o&&!t(function(){return f(function(){},"length",{value:8}).length!==8}),p=String(String).split("String"),v=_t.exports=function(y,k,b){d(c(k),0,7)==="Symbol("&&(k="["+h(c(k),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),b&&b.getter&&(k="get "+k),b&&b.setter&&(k="set "+k),(!n(y,"name")||i&&y.name!==k)&&(o?f(y,"name",{value:k,configurable:!0}):y.name=k),m&&b&&n(b,"arity")&&y.length!==b.arity&&f(y,"length",{value:b.arity});try{b&&n(b,"constructor")&&b.constructor?o&&f(y,"prototype",{writable:!1}):y.prototype&&(y.prototype=void 0)}catch{}var P=a(y);return n(P,"source")||(P.source=g(p,typeof k=="string"?k:"")),y};return Function.prototype.toString=v(function(){return r(this)&&l(this).source||s(this)},"toString"),_t.exports}function Lt(){if(Ve)return Ge;Ve=1;var e=S(),t=Y(),r=Ke(),n=jt();return Ge=function(o,i,s,u){u||(u={});var a=u.enumerable,l=u.name!==void 0?u.name:i;if(e(s)&&r(s,l,u),u.global)a?o[i]=s:n(i,s);else{try{u.unsafe?o[i]&&(a=!0):delete o[i]}catch{}a?o[i]=s:t.f(o,i,{value:s,enumerable:!1,configurable:!u.nonConfigurable,writable:!u.nonWritable})}return o}}var Ye,Xe,Je,Qe,tn,rn,en,nn,on,sn,an,un,cn,fn,ln,hn,pn,qt={};function dn(){if(Qe)return Je;Qe=1;var e=(function(){if(Xe)return Ye;Xe=1;var t=Math.ceil,r=Math.floor;return Ye=Math.trunc||function(n){var o=+n;return(o>0?r:t)(o)}})();return Je=function(t){var r=+t;return r!=r||r===0?0:e(r)}}function ji(){if(rn)return tn;rn=1;var e=dn(),t=Math.max,r=Math.min;return tn=function(n,o){var i=e(n);return i<0?t(i+o,0):r(i,o)}}function Ci(){if(nn)return en;nn=1;var e=dn(),t=Math.min;return en=function(r){var n=e(r);return n>0?t(n,9007199254740991):0}}function mn(){if(sn)return on;sn=1;var e=Ci();return on=function(t){return e(t.length)}}function gn(){if(fn)return cn;fn=1;var e=z(),t=D(),r=it(),n=(function(){if(un)return an;un=1;var s=it(),u=ji(),a=mn(),l=function(c){return function(f,d,h){var g=s(f),m=a(g);if(m===0)return!c&&-1;var p,v=u(h,m);if(c&&d!=d){for(;m>v;)if((p=g[v++])!=p)return!0}else for(;m>v;v++)if((c||v in g)&&g[v]===d)return c||v||0;return!c&&-1}};return an={includes:l(!0),indexOf:l(!1)}})().indexOf,o=Tt(),i=e([].push);return cn=function(s,u){var a,l=r(s),c=0,f=[];for(a in l)!t(o,a)&&t(l,a)&&i(f,a);for(;u.length>c;)t(l,a=u[c++])&&(~n(f,a)||i(f,a));return f}}function Rt(){return hn?ln:(hn=1,ln=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"])}var vn,Zt,yn,zt,wn,bn,En,kn,xn,Mn,On,Pn,jn,Cn,Sn,An,_n,In,Tn,Ln={};function Si(){if(yn)return Zt;yn=1;var e=xt(),t=z(),r=(function(){if(pn)return qt;pn=1;var s=gn(),u=Rt().concat("length","prototype");return qt.f=Object.getOwnPropertyNames||function(a){return s(a,u)},qt})(),n=(vn||(vn=1,Ln.f=Object.getOwnPropertySymbols),Ln),o=_(),i=t([].concat);return Zt=e("Reflect","ownKeys")||function(s){var u=r.f(o(s)),a=n.f;return a?i(u,a(s)):u},Zt}function Ai(){if(wn)return zt;wn=1;var e=D(),t=Si(),r=Me(),n=Y();return zt=function(o,i,s){for(var u=t(i),a=n.f,l=r.f,c=0;c<u.length;c++){var f=u[c];e(o,f)||s&&e(s,f)||a(o,f,l(i,f))}},zt}function J(){if(xn)return kn;xn=1;var e=A(),t=Me().f,r=At(),n=Lt(),o=jt(),i=Ai(),s=(function(){if(En)return bn;En=1;var u=I(),a=S(),l=/#|\.prototype\./,c=function(m,p){var v=d[f(m)];return v===g||v!==h&&(a(p)?u(p):!!p)},f=c.normalize=function(m){return String(m).replace(l,".").toLowerCase()},d=c.data={},h=c.NATIVE="N",g=c.POLYFILL="P";return bn=c})();return kn=function(u,a){var l,c,f,d,h,g=u.target,m=u.global,p=u.stat;if(l=m?e:p?e[g]||o(g,{}):e[g]&&e[g].prototype)for(c in a){if(d=a[c],f=u.dontCallGetSet?(h=t(l,c))&&h.value:l[c],!s(m?c:g+(p?".":"#")+c,u.forced)&&f!==void 0){if(typeof d==typeof f)continue;i(d,f)}(u.sham||f&&f.sham)&&r(d,"sham",!0),n(l,c,d,u)}}}function _i(){if(On)return Mn;On=1;var e=Mt(),t=TypeError;return Mn=function(r,n){if(e(n,r))return r;throw new t("Incorrect invocation")}}function qn(){if(Sn)return Cn;Sn=1;var e=D(),t=S(),r=we(),n=It(),o=(function(){if(jn)return Pn;jn=1;var a=I();return Pn=!a(function(){function l(){}return l.prototype.constructor=null,Object.getPrototypeOf(new l)!==l.prototype})})(),i=n("IE_PROTO"),s=Object,u=s.prototype;return Cn=o?s.getPrototypeOf:function(a){var l=r(a);if(e(l,i))return l[i];var c=l.constructor;return t(c)&&l instanceof c?c.prototype:l instanceof s?u:null}}function Ii(){if(_n)return An;_n=1;var e=Ke(),t=Y();return An=function(r,n,o){return o.get&&e(o.get,n,{getter:!0}),o.set&&e(o.set,n,{setter:!0}),t.f(r,n,o)}}function Ti(){if(Tn)return In;Tn=1;var e=R(),t=Y(),r=bt();return In=function(n,o,i){e?t.f(n,o,r(0,i)):n[o]=i}}var Rn,Zn,zn,Dn,Fn,Nn,Un,Bn,$n,Wn,Gn,Dt={};function Li(){if(Zn)return Rn;Zn=1;var e=gn(),t=Rt();return Rn=Object.keys||function(r){return e(r,t)}}function qi(){if(Fn)return Dn;Fn=1;var e=xt();return Dn=e("document","documentElement")}function Vn(){if(Un)return Nn;Un=1;var e,t=_(),r=(function(){if(zn)return Dt;zn=1;var m=R(),p=Ie(),v=Y(),y=_(),k=it(),b=Li();return Dt.f=m&&!p?Object.defineProperties:function(P,M){y(P);for(var w,E=k(M),x=b(M),$=x.length,L=0;$>L;)v.f(P,w=x[L++],E[w]);return P},Dt})(),n=Rt(),o=Tt(),i=qi(),s=ke(),u=It(),a="prototype",l="script",c=u("IE_PROTO"),f=function(){},d=function(m){return"<"+l+">"+m+"</"+l+">"},h=function(m){m.write(d("")),m.close();var p=m.parentWindow.Object;return m=null,p},g=function(){try{e=new ActiveXObject("htmlfile")}catch{}var m,p,v;g=typeof document<"u"?document.domain&&e?h(e):(p=s("iframe"),v="java"+l+":",p.style.display="none",i.appendChild(p),p.src=String(v),(m=p.contentWindow.document).open(),m.write(d("document.F=Object")),m.close(),m.F):h(e);for(var y=n.length;y--;)delete g[a][n[y]];return g()};return o[c]=!0,Nn=Object.create||function(m,p){var v;return m!==null?(f[a]=t(m),v=new f,f[a]=null,v[c]=m):v=g(),p===void 0?v:r.f(v,p)}}function Hn(){if($n)return Bn;$n=1;var e,t,r,n=I(),o=S(),i=K(),s=Vn(),u=qn(),a=Lt(),l=F(),c=X(),f=l("iterator"),d=!1;return[].keys&&("next"in(r=[].keys())?(t=u(u(r)))!==Object.prototype&&(e=t):d=!0),!i(e)||n(function(){var h={};return e[f].call(h)!==h})?e={}:c&&(e=s(e)),o(e[f])||a(e,f,function(){return this}),Bn={IteratorPrototype:e,BUGGY_SAFARI_ITERATORS:d}}Gn||(Gn=1,(function(){if(Wn)return ki;Wn=1;var e=J(),t=A(),r=_i(),n=_(),o=S(),i=qn(),s=Ii(),u=Ti(),a=I(),l=D(),c=F(),f=Hn().IteratorPrototype,d=R(),h=X(),g="constructor",m="Iterator",p=c("toStringTag"),v=TypeError,y=t[m],k=h||!o(y)||y.prototype!==f||!a(function(){y({})}),b=function(){if(r(this,f),i(this)===f)throw new v("Abstract class Iterator not directly constructable")},P=function(M,w){d?s(f,M,{configurable:!0,get:function(){return w},set:function(E){if(n(this),this===f)throw new v("You can't redefine this property");l(this,M)?this[M]=E:u(this,M,E)}}):f[M]=w};l(f,p)||P(p,m),!k&&l(f,g)&&f[g]!==Object||P(g,b),b.prototype=f,e({global:!0,constructor:!0,forced:k},{Iterator:b})})());var Kn,Yn,Xn,Jn,Qn,to,ro,eo,no,oo,io,so,ao,uo,co,fo,lo,ho,po,mo,Ri={};function at(){return Yn?Kn:(Yn=1,Kn=function(e){return{iterator:e,next:e.next,done:!1}})}function Zi(){if(Jn)return Xn;Jn=1;var e=Lt();return Xn=function(t,r,n){for(var o in r)e(t,o,r[o],n);return t}}function zi(){return to?Qn:(to=1,Qn=function(e,t){return{value:e,done:t}})}function N(){if(eo)return ro;eo=1;var e=Z(),t=_(),r=st();return ro=function(n,o,i){var s,u;t(n);try{if(!(s=r(n,"return"))){if(o==="throw")throw i;return i}s=e(s,n)}catch(a){u=!0,s=a}if(o==="throw")throw i;if(u)throw s;return t(s),i}}function Di(){if(oo)return no;oo=1;var e=N();return no=function(t,r,n){for(var o=t.length-1;o>=0;o--)if(t[o]!==void 0)try{n=e(t[o].iterator,r,n)}catch(i){r="throw",n=i}if(r==="throw")throw n;return n}}function go(){if(so)return io;so=1;var e=Z(),t=Vn(),r=At(),n=Zi(),o=F(),i=He(),s=st(),u=Hn().IteratorPrototype,a=zi(),l=N(),c=Di(),f=o("toStringTag"),d="IteratorHelper",h="WrapForValidIterator",g="normal",m="throw",p=i.set,v=function(b){var P=i.getterFor(b?h:d);return n(t(u),{next:function(){var M=P(this);if(b)return M.nextHandler();if(M.done)return a(void 0,!0);try{var w=M.nextHandler();return M.returnHandlerResult?w:a(w,M.done)}catch(E){throw M.done=!0,E}},return:function(){var M=P(this),w=M.iterator;if(M.done=!0,b){var E=s(w,"return");return E?e(E,w):a(void 0,!0)}if(M.inner)try{l(M.inner.iterator,g)}catch(x){return l(w,m,x)}if(M.openIters)try{c(M.openIters,g)}catch(x){return l(w,m,x)}return w&&l(w,g),a(void 0,!0)}})},y=v(!0),k=v(!1);return r(k,f,"Iterator Helper"),io=function(b,P,M){var w=function(E,x){x?(x.iterator=E.iterator,x.next=E.next):x=E,x.type=P?h:d,x.returnHandlerResult=!!M,x.nextHandler=b,x.counter=0,x.done=!1,p(this,x)};return w.prototype=P?y:k,w}}function vo(){if(uo)return ao;uo=1;var e=_(),t=N();return ao=function(r,n,o,i){try{return i?n(e(o)[0],o[1]):n(o)}catch(s){t(r,"throw",s)}}}function yo(){return fo?co:(fo=1,co=function(e,t){var r=typeof Iterator=="function"&&Iterator.prototype[e];if(r)try{r.call({next:null},t).next()}catch{return!0}})}function ut(){if(ho)return lo;ho=1;var e=A();return lo=function(t,r){var n=e.Iterator,o=n&&n.prototype,i=o&&o[t],s=!1;if(i)try{i.call({next:function(){return{done:!0}},return:function(){s=!0}},-1)}catch(u){u instanceof r||(s=!1)}if(!s)return i}}function Q(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function"){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}mo||(mo=1,(function(){if(po)return Ri;po=1;var e=J(),t=Z(),r=W(),n=_(),o=at(),i=go(),s=vo(),u=N(),a=yo(),l=ut(),c=X(),f=!c&&!a("map",function(){}),d=!c&&!f&&l("map",TypeError),h=c||f||d,g=i(function(){var m=this.iterator,p=n(t(this.next,m));if(!(this.done=!!p.done))return s(m,this.mapper,[p.value,this.counter++],!0)});e({target:"Iterator",proto:!0,real:!0,forced:h},{map:function(m){n(this);try{r(m)}catch(p){u(this,"throw",p)}return d?t(d,this,m):new g(o(this),{mapper:m})}})})()),typeof SuppressedError=="function"&&SuppressedError;var wo,bo,Fi={};bo||(bo=1,(function(){if(wo)return Fi;wo=1;var e=J(),t=Z(),r=W(),n=_(),o=at(),i=go(),s=vo(),u=X(),a=N(),l=yo(),c=ut(),f=!u&&!l("filter",function(){}),d=!u&&!f&&c("filter",TypeError),h=u||f||d,g=i(function(){for(var m,p,v=this.iterator,y=this.predicate,k=this.next;;){if(m=n(t(k,v)),this.done=!!m.done)return;if(p=m.value,s(v,y,[p,this.counter++],!0))return p}});e({target:"Iterator",proto:!0,real:!0,forced:h},{filter:function(m){n(this);try{r(m)}catch(p){a(this,"throw",p)}return d?t(d,this,m):new g(o(this),{predicate:m})}})})());class j{static isAdvancedMarkerAvailable(t){return google.maps.marker&&t.getMapCapabilities().isAdvancedMarkersAvailable===!0}static isAdvancedMarker(t){return google.maps.marker&&t instanceof google.maps.marker.AdvancedMarkerElement}static setMap(t,r){this.isAdvancedMarker(t)?t.map=r:t.setMap(r)}static getPosition(t){if(this.isAdvancedMarker(t)){if(t.position){if(t.position instanceof google.maps.LatLng)return t.position;if(Number.isFinite(t.position.lat)&&Number.isFinite(t.position.lng))return new google.maps.LatLng(t.position.lat,t.position.lng)}return new google.maps.LatLng(null)}return t.getPosition()}static getVisible(t){return!!this.isAdvancedMarker(t)||t.getVisible()}}class U{constructor(t){let{markers:r,position:n}=t;this.markers=[],r&&(this.markers=r),n&&(n instanceof google.maps.LatLng?this._position=n:this._position=new google.maps.LatLng(n))}get bounds(){if(this.markers.length===0&&!this._position)return;const t=new google.maps.LatLngBounds(this._position,this._position);for(const r of this.markers)t.extend(j.getPosition(r));return t}get position(){return this._position||this.bounds.getCenter()}get count(){return this.markers.filter(t=>j.getVisible(t)).length}push(t){this.markers.push(t)}delete(){this.marker&&(j.setMap(this.marker,null),this.marker=void 0),this.markers.length=0}}function T(e){if(e==null)throw Error(arguments.length>1&&arguments[1]!==void 0?arguments[1]:"assertion failed")}const Ft=(e,t,r,n)=>{const o=e.getBounds();T(o);const i=ct(o,t,n);return r.filter(s=>i.contains(j.getPosition(s)))},ct=(e,t,r)=>{const{northEast:n,southWest:o}=Ni(e,t),i=xo({northEast:n,southWest:o},r);return Mo(i,t)},Eo=(e,t,r)=>{const n=ct(e,t,r),o=n.getNorthEast(),i=n.getSouthWest();return[i.lng(),i.lat(),o.lng(),o.lat()]},ko=(e,t)=>{const r=(t.lat-e.lat)*Math.PI/180,n=(t.lng-e.lng)*Math.PI/180,o=Math.sin(r/2),i=Math.sin(n/2),s=o*o+Math.cos(e.lat*Math.PI/180)*Math.cos(t.lat*Math.PI/180)*i*i;return 6371*(2*Math.atan2(Math.sqrt(s),Math.sqrt(1-s)))},Ni=(e,t)=>{const r=t.fromLatLngToDivPixel(e.getNorthEast()),n=t.fromLatLngToDivPixel(e.getSouthWest());return T(r),T(n),{northEast:r,southWest:n}},xo=(e,t)=>{let{northEast:r,southWest:n}=e;return r.x+=t,r.y-=t,n.x-=t,n.y+=t,{northEast:r,southWest:n}},Mo=(e,t)=>{let{northEast:r,southWest:n}=e;const o=t.fromDivPixelToLatLng(n),i=t.fromDivPixelToLatLng(r);return new google.maps.LatLngBounds(o,i)};class ft{constructor(t){let{maxZoom:r=16}=t;this.maxZoom=r}noop(t){let{markers:r}=t;return Oo(r)}}class Nt extends ft{constructor(t){var{viewportPadding:r=60}=t;super(Q(t,["viewportPadding"])),this.viewportPadding=60,this.viewportPadding=r}calculate(t){let{markers:r,map:n,mapCanvasProjection:o}=t;const i=n.getZoom();return T(i),i>=this.maxZoom?{clusters:this.noop({markers:r}),changed:!1}:{clusters:this.cluster({markers:Ft(n,o,r,this.viewportPadding),map:n,mapCanvasProjection:o})}}}const Oo=e=>e.map(t=>new U({position:j.getPosition(t),markers:[t]}));var Po,jo,Ut,Co,So,Ao,_o,Io,To,Lo,qo,Ro,Zo,zo,Bt,Do,Fo,No,Uo,Bo,Ui={};function Bi(){if(Co)return Ut;Co=1;var e=(function(){if(jo)return Po;jo=1;var o=Et(),i=z();return Po=function(s){if(o(s)==="Function")return i(s)}})(),t=W(),r=ot(),n=e(e.bind);return Ut=function(o,i){return t(o),i===void 0?o:r?n(o,i):function(){return o.apply(i,arguments)}},Ut}function $o(){return Ao?So:(Ao=1,So={})}function $i(){if(Io)return _o;Io=1;var e=F(),t=$o(),r=e("iterator"),n=Array.prototype;return _o=function(o){return o!==void 0&&(t.Array===o||n[r]===o)}}function Wi(){if(Ro)return qo;Ro=1;var e=(function(){if(Lo)return To;Lo=1;var s={};return s[F()("toStringTag")]="z",To=String(s)==="[object z]"})(),t=S(),r=Et(),n=F()("toStringTag"),o=Object,i=r((function(){return arguments})())==="Arguments";return qo=e?r:function(s){var u,a,l;return s===void 0?"Undefined":s===null?"Null":typeof(a=(function(c,f){try{return c[f]}catch{}})(u=o(s),n))=="string"?a:i?r(u):(l=r(u))==="Object"&&t(u.callee)?"Arguments":l}}function Wo(){if(zo)return Zo;zo=1;var e=Wi(),t=st(),r=kt(),n=$o(),o=F()("iterator");return Zo=function(i){if(!r(i))return t(i,o)||t(i,"@@iterator")||n[e(i)]}}function Gi(){if(Do)return Bt;Do=1;var e=Z(),t=W(),r=_(),n=Ot(),o=Wo(),i=TypeError;return Bt=function(s,u){var a=arguments.length<2?o(s):u;if(t(a))return r(e(a,s));throw new i(n(s)+" is not iterable")},Bt}function Go(){if(No)return Fo;No=1;var e=Bi(),t=Z(),r=_(),n=Ot(),o=$i(),i=mn(),s=Mt(),u=Gi(),a=Wo(),l=N(),c=TypeError,f=function(h,g){this.stopped=h,this.result=g},d=f.prototype;return Fo=function(h,g,m){var p,v,y,k,b,P,M,w=m&&m.that,E=!(!m||!m.AS_ENTRIES),x=!(!m||!m.IS_RECORD),$=!(!m||!m.IS_ITERATOR),L=!(!m||!m.INTERRUPTED),C=e(g,w),vi=function(q){return p&&l(p,"normal"),new f(!0,q)},yi=function(q){return E?(r(q),L?C(q[0],q[1],vi):C(q[0],q[1])):L?C(q,vi):C(q)};if(x)p=h.iterator;else if($)p=h;else{if(!(v=a(h)))throw new c(n(h)+" is not iterable");if(o(v)){for(y=0,k=i(h);k>y;y++)if((b=yi(h[y]))&&s(d,b))return b;return new f(!1)}p=u(h,v)}for(P=x?h.next:p.next;!(M=t(P,p)).done;){try{b=yi(M.value)}catch(q){l(p,"throw",q)}if(typeof b=="object"&&b&&s(d,b))return b}return new f(!1)}}Bo||(Bo=1,(function(){if(Uo)return Ui;Uo=1;var e=J(),t=Z(),r=Go(),n=W(),o=_(),i=at(),s=N(),u=ut()("forEach",TypeError);e({target:"Iterator",proto:!0,real:!0,forced:u},{forEach:function(a){o(this);try{n(a)}catch(f){s(this,"throw",f)}if(u)return t(u,this,a);var l=i(this),c=0;r(l,function(f){a(f,c++)},{IS_RECORD:!0})}})})());var Vi=Object.getOwnPropertyNames,Hi=Object.getOwnPropertySymbols,Ki=Object.prototype.hasOwnProperty;function Vo(e,t){return function(r,n,o){return e(r,n,o)&&t(r,n,o)}}function lt(e){return function(t,r,n){if(!t||!r||typeof t!="object"||typeof r!="object")return e(t,r,n);var o=n.cache,i=o.get(t),s=o.get(r);if(i&&s)return i===r&&s===t;o.set(t,r),o.set(r,t);var u=e(t,r,n);return o.delete(t),o.delete(r),u}}function Ho(e){return Vi(e).concat(Hi(e))}var Yi=Object.hasOwn||function(e,t){return Ki.call(e,t)};function G(e,t){return e===t||!e&&!t&&e!=e&&t!=t}var Ko=Object.getOwnPropertyDescriptor,Yo=Object.keys;function Xi(e,t,r){var n=e.length;if(t.length!==n)return!1;for(;n-- >0;)if(!r.equals(e[n],t[n],n,n,e,t,r))return!1;return!0}function Ji(e,t){return G(e.getTime(),t.getTime())}function Qi(e,t){return e.name===t.name&&e.message===t.message&&e.cause===t.cause&&e.stack===t.stack}function ts(e,t){return e===t}function Xo(e,t,r){var n=e.size;if(n!==t.size)return!1;if(!n)return!0;for(var o,i,s=new Array(n),u=e.entries(),a=0;(o=u.next())&&!o.done;){for(var l=t.entries(),c=!1,f=0;(i=l.next())&&!i.done;)if(s[f])f++;else{var d=o.value,h=i.value;if(r.equals(d[0],h[0],a,f,e,t,r)&&r.equals(d[1],h[1],d[0],h[0],e,t,r)){c=s[f]=!0;break}f++}if(!c)return!1;a++}return!0}var rs=G;function es(e,t,r){var n=Yo(e),o=n.length;if(Yo(t).length!==o)return!1;for(;o-- >0;)if(!Qo(e,t,r,n[o]))return!1;return!0}function tt(e,t,r){var n,o,i,s=Ho(e),u=s.length;if(Ho(t).length!==u)return!1;for(;u-- >0;)if(!Qo(e,t,r,n=s[u])||(o=Ko(e,n),i=Ko(t,n),(o||i)&&(!o||!i||o.configurable!==i.configurable||o.enumerable!==i.enumerable||o.writable!==i.writable)))return!1;return!0}function ns(e,t){return G(e.valueOf(),t.valueOf())}function os(e,t){return e.source===t.source&&e.flags===t.flags}function Jo(e,t,r){var n=e.size;if(n!==t.size)return!1;if(!n)return!0;for(var o,i,s=new Array(n),u=e.values();(o=u.next())&&!o.done;){for(var a=t.values(),l=!1,c=0;(i=a.next())&&!i.done;){if(!s[c]&&r.equals(o.value,i.value,o.value,i.value,e,t,r)){l=s[c]=!0;break}c++}if(!l)return!1}return!0}function is(e,t){var r=e.length;if(t.length!==r)return!1;for(;r-- >0;)if(e[r]!==t[r])return!1;return!0}function ss(e,t){return e.hostname===t.hostname&&e.pathname===t.pathname&&e.protocol===t.protocol&&e.port===t.port&&e.hash===t.hash&&e.username===t.username&&e.password===t.password}function Qo(e,t,r,n){return!(n!=="_owner"&&n!=="__o"&&n!=="__v"||!e.$$typeof&&!t.$$typeof)||Yi(t,n)&&r.equals(e[n],t[n],n,n,e,t,r)}var as=Array.isArray,ti=typeof ArrayBuffer=="function"&&ArrayBuffer.isView?ArrayBuffer.isView:null,ri=Object.assign,us=Object.prototype.toString.call.bind(Object.prototype.toString),rt=B();function B(e){e===void 0&&(e={});var t,r=e.circular,n=r!==void 0&&r,o=e.createInternalComparator,i=e.createState,s=e.strict,u=s!==void 0&&s,a=(function(c){var f=c.circular,d=c.createCustomConfig,h=c.strict,g={areArraysEqual:h?tt:Xi,areDatesEqual:Ji,areErrorsEqual:Qi,areFunctionsEqual:ts,areMapsEqual:h?Vo(Xo,tt):Xo,areNumbersEqual:rs,areObjectsEqual:h?tt:es,arePrimitiveWrappersEqual:ns,areRegExpsEqual:os,areSetsEqual:h?Vo(Jo,tt):Jo,areTypedArraysEqual:h?tt:is,areUrlsEqual:ss};if(d&&(g=ri({},g,d(g))),f){var m=lt(g.areArraysEqual),p=lt(g.areMapsEqual),v=lt(g.areObjectsEqual),y=lt(g.areSetsEqual);g=ri({},g,{areArraysEqual:m,areMapsEqual:p,areObjectsEqual:v,areSetsEqual:y})}return g})(e),l=(function(c){var f=c.areArraysEqual,d=c.areDatesEqual,h=c.areErrorsEqual,g=c.areFunctionsEqual,m=c.areMapsEqual,p=c.areNumbersEqual,v=c.areObjectsEqual,y=c.arePrimitiveWrappersEqual,k=c.areRegExpsEqual,b=c.areSetsEqual,P=c.areTypedArraysEqual,M=c.areUrlsEqual;return function(w,E,x){if(w===E)return!0;if(w==null||E==null)return!1;var $=typeof w;if($!==typeof E)return!1;if($!=="object")return $==="number"?p(w,E,x):$==="function"&&g(w,E,x);var L=w.constructor;if(L!==E.constructor)return!1;if(L===Object)return v(w,E,x);if(as(w))return f(w,E,x);if(ti!=null&&ti(w))return P(w,E,x);if(L===Date)return d(w,E,x);if(L===RegExp)return k(w,E,x);if(L===Map)return m(w,E,x);if(L===Set)return b(w,E,x);var C=us(w);return C==="[object Date]"?d(w,E,x):C==="[object RegExp]"?k(w,E,x):C==="[object Map]"?m(w,E,x):C==="[object Set]"?b(w,E,x):C==="[object Object]"?typeof w.then!="function"&&typeof E.then!="function"&&v(w,E,x):C==="[object URL]"?M(w,E,x):C==="[object Error]"?h(w,E,x):C==="[object Arguments]"?v(w,E,x):(C==="[object Boolean]"||C==="[object Number]"||C==="[object String]")&&y(w,E,x)}})(a);return(function(c){var f=c.circular,d=c.comparator,h=c.createState,g=c.equals,m=c.strict;if(h)return function(v,y){var k=h(),b=k.cache,P=b===void 0?f?new WeakMap:void 0:b,M=k.meta;return d(v,y,{cache:P,equals:g,meta:M,strict:m})};if(f)return function(v,y){return d(v,y,{cache:new WeakMap,equals:g,meta:void 0,strict:m})};var p={cache:void 0,equals:g,meta:void 0,strict:m};return function(v,y){return d(v,y,p)}})({circular:n,comparator:l,createState:i,equals:o?o(l):(t=l,function(c,f,d,h,g,m,p){return t(c,f,p)}),strict:u})}B({strict:!0}),B({circular:!0}),B({circular:!0,strict:!0}),B({createInternalComparator:function(){return G}}),B({strict:!0,createInternalComparator:function(){return G}}),B({circular:!0,createInternalComparator:function(){return G}}),B({circular:!0,createInternalComparator:function(){return G},strict:!0});const ei=[Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array];class $t{static from(t){if(!(t instanceof ArrayBuffer))throw new Error("Data must be an instance of ArrayBuffer.");const[r,n]=new Uint8Array(t,0,2);if(r!==219)throw new Error("Data does not appear to be in a KDBush format.");const o=n>>4;if(o!==1)throw new Error(`Got v${o} data when expected v1.`);const i=ei[15&n];if(!i)throw new Error("Unrecognized array type.");const[s]=new Uint16Array(t,2,1),[u]=new Uint32Array(t,4,1);return new $t(u,s,i,t)}constructor(t,r=64,n=Float64Array,o){if(isNaN(t)||t<0)throw new Error(`Unpexpected numItems value: ${t}.`);this.numItems=+t,this.nodeSize=Math.min(Math.max(+r,2),65535),this.ArrayType=n,this.IndexArrayType=t<65536?Uint16Array:Uint32Array;const i=ei.indexOf(this.ArrayType),s=2*t*this.ArrayType.BYTES_PER_ELEMENT,u=t*this.IndexArrayType.BYTES_PER_ELEMENT,a=(8-u%8)%8;if(i<0)throw new Error(`Unexpected typed array class: ${n}.`);o&&o instanceof ArrayBuffer?(this.data=o,this.ids=new this.IndexArrayType(this.data,8,t),this.coords=new this.ArrayType(this.data,8+u+a,2*t),this._pos=2*t,this._finished=!0):(this.data=new ArrayBuffer(8+s+u+a),this.ids=new this.IndexArrayType(this.data,8,t),this.coords=new this.ArrayType(this.data,8+u+a,2*t),this._pos=0,this._finished=!1,new Uint8Array(this.data,0,2).set([219,16+i]),new Uint16Array(this.data,2,1)[0]=r,new Uint32Array(this.data,4,1)[0]=t)}add(t,r){const n=this._pos>>1;return this.ids[n]=n,this.coords[this._pos++]=t,this.coords[this._pos++]=r,n}finish(){const t=this._pos>>1;if(t!==this.numItems)throw new Error(`Added ${t} items when expected ${this.numItems}.`);return Wt(this.ids,this.coords,this.nodeSize,0,this.numItems-1,0),this._finished=!0,this}range(t,r,n,o){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:i,coords:s,nodeSize:u}=this,a=[0,i.length-1,0],l=[];for(;a.length;){const c=a.pop()||0,f=a.pop()||0,d=a.pop()||0;if(f-d<=u){for(let p=d;p<=f;p++){const v=s[2*p],y=s[2*p+1];v>=t&&v<=n&&y>=r&&y<=o&&l.push(i[p])}continue}const h=d+f>>1,g=s[2*h],m=s[2*h+1];g>=t&&g<=n&&m>=r&&m<=o&&l.push(i[h]),(c===0?t<=g:r<=m)&&(a.push(d),a.push(h-1),a.push(1-c)),(c===0?n>=g:o>=m)&&(a.push(h+1),a.push(f),a.push(1-c))}return l}within(t,r,n){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:o,coords:i,nodeSize:s}=this,u=[0,o.length-1,0],a=[],l=n*n;for(;u.length;){const c=u.pop()||0,f=u.pop()||0,d=u.pop()||0;if(f-d<=s){for(let p=d;p<=f;p++)oi(i[2*p],i[2*p+1],t,r)<=l&&a.push(o[p]);continue}const h=d+f>>1,g=i[2*h],m=i[2*h+1];oi(g,m,t,r)<=l&&a.push(o[h]),(c===0?t-n<=g:r-n<=m)&&(u.push(d),u.push(h-1),u.push(1-c)),(c===0?t+n>=g:r+n>=m)&&(u.push(h+1),u.push(f),u.push(1-c))}return a}}function Wt(e,t,r,n,o,i){if(o-n<=r)return;const s=n+o>>1;ni(e,t,s,n,o,i),Wt(e,t,r,n,s-1,1-i),Wt(e,t,r,s+1,o,1-i)}function ni(e,t,r,n,o,i){for(;o>n;){if(o-n>600){const l=o-n+1,c=r-n+1,f=Math.log(l),d=.5*Math.exp(2*f/3),h=.5*Math.sqrt(f*d*(l-d)/l)*(c-l/2<0?-1:1);ni(e,t,r,Math.max(n,Math.floor(r-c*d/l+h)),Math.min(o,Math.floor(r+(l-c)*d/l+h)),i)}const s=t[2*r+i];let u=n,a=o;for(et(e,t,n,r),t[2*o+i]>s&&et(e,t,n,o);u<a;){for(et(e,t,u,a),u++,a--;t[2*u+i]<s;)u++;for(;t[2*a+i]>s;)a--}t[2*n+i]===s?et(e,t,n,a):(a++,et(e,t,a,o)),a<=r&&(n=a+1),r<=a&&(o=a-1)}}function et(e,t,r,n){Gt(e,r,n),Gt(t,2*r,2*n),Gt(t,2*r+1,2*n+1)}function Gt(e,t,r){const n=e[t];e[t]=e[r],e[r]=n}function oi(e,t,r,n){const o=e-r,i=t-n;return o*o+i*i}const cs={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:e=>e},ii=Math.fround||(Vt=new Float32Array(1),e=>(Vt[0]=+e,Vt[0]));var Vt;class si{constructor(t){this.options=Object.assign(Object.create(cs),t),this.trees=new Array(this.options.maxZoom+1),this.stride=this.options.reduce?7:6,this.clusterProps=[]}load(t){const{log:r,minZoom:n,maxZoom:o}=this.options;r&&console.time("total time");const i=`prepare ${t.length} points`;r&&console.time(i),this.points=t;const s=[];for(let a=0;a<t.length;a++){const l=t[a];if(!l.geometry)continue;const[c,f]=l.geometry.coordinates,d=ii(ht(c)),h=ii(pt(f));s.push(d,h,1/0,a,-1,1),this.options.reduce&&s.push(0)}let u=this.trees[o+1]=this._createTree(s);r&&console.timeEnd(i);for(let a=o;a>=n;a--){const l=+Date.now();u=this.trees[a]=this._createTree(this._cluster(u,a)),r&&console.log("z%d: %d clusters in %dms",a,u.numItems,+Date.now()-l)}return r&&console.timeEnd("total time"),this}getClusters(t,r){let n=((t[0]+180)%360+360)%360-180;const o=Math.max(-90,Math.min(90,t[1]));let i=t[2]===180?180:((t[2]+180)%360+360)%360-180;const s=Math.max(-90,Math.min(90,t[3]));if(t[2]-t[0]>=360)n=-180,i=180;else if(n>i){const f=this.getClusters([n,o,180,s],r),d=this.getClusters([-180,o,i,s],r);return f.concat(d)}const u=this.trees[this._limitZoom(r)],a=u.range(ht(n),pt(s),ht(i),pt(o)),l=u.data,c=[];for(const f of a){const d=this.stride*f;c.push(l[d+5]>1?ai(l,d,this.clusterProps):this.points[l[d+3]])}return c}getChildren(t){const r=this._getOriginId(t),n=this._getOriginZoom(t),o="No cluster with the specified id.",i=this.trees[n];if(!i)throw new Error(o);const s=i.data;if(r*this.stride>=s.length)throw new Error(o);const u=this.options.radius/(this.options.extent*Math.pow(2,n-1)),a=s[r*this.stride],l=s[r*this.stride+1],c=i.within(a,l,u),f=[];for(const d of c){const h=d*this.stride;s[h+4]===t&&f.push(s[h+5]>1?ai(s,h,this.clusterProps):this.points[s[h+3]])}if(f.length===0)throw new Error(o);return f}getLeaves(t,r,n){r=r||10,n=n||0;const o=[];return this._appendLeaves(o,t,r,n,0),o}getTile(t,r,n){const o=this.trees[this._limitZoom(t)],i=Math.pow(2,t),{extent:s,radius:u}=this.options,a=u/s,l=(n-a)/i,c=(n+1+a)/i,f={features:[]};return this._addTileFeatures(o.range((r-a)/i,l,(r+1+a)/i,c),o.data,r,n,i,f),r===0&&this._addTileFeatures(o.range(1-a/i,l,1,c),o.data,i,n,i,f),r===i-1&&this._addTileFeatures(o.range(0,l,a/i,c),o.data,-1,n,i,f),f.features.length?f:null}getClusterExpansionZoom(t){let r=this._getOriginZoom(t)-1;for(;r<=this.options.maxZoom;){const n=this.getChildren(t);if(r++,n.length!==1)break;t=n[0].properties.cluster_id}return r}_appendLeaves(t,r,n,o,i){const s=this.getChildren(r);for(const u of s){const a=u.properties;if(a&&a.cluster?i+a.point_count<=o?i+=a.point_count:i=this._appendLeaves(t,a.cluster_id,n,o,i):i<o?i++:t.push(u),t.length===n)break}return i}_createTree(t){const r=new $t(t.length/this.stride|0,this.options.nodeSize,Float32Array);for(let n=0;n<t.length;n+=this.stride)r.add(t[n],t[n+1]);return r.finish(),r.data=t,r}_addTileFeatures(t,r,n,o,i,s){for(const u of t){const a=u*this.stride,l=r[a+5]>1;let c,f,d;if(l)c=ui(r,a,this.clusterProps),f=r[a],d=r[a+1];else{const m=this.points[r[a+3]];c=m.properties;const[p,v]=m.geometry.coordinates;f=ht(p),d=pt(v)}const h={type:1,geometry:[[Math.round(this.options.extent*(f*i-n)),Math.round(this.options.extent*(d*i-o))]],tags:c};let g;g=l||this.options.generateId?r[a+3]:this.points[r[a+3]].id,g!==void 0&&(h.id=g),s.features.push(h)}}_limitZoom(t){return Math.max(this.options.minZoom,Math.min(Math.floor(+t),this.options.maxZoom+1))}_cluster(t,r){const{radius:n,extent:o,reduce:i,minPoints:s}=this.options,u=n/(o*Math.pow(2,r)),a=t.data,l=[],c=this.stride;for(let f=0;f<a.length;f+=c){if(a[f+2]<=r)continue;a[f+2]=r;const d=a[f],h=a[f+1],g=t.within(a[f],a[f+1],u),m=a[f+5];let p=m;for(const v of g){const y=v*c;a[y+2]>r&&(p+=a[y+5])}if(p>m&&p>=s){let v,y=d*m,k=h*m,b=-1;const P=(f/c<<5)+(r+1)+this.points.length;for(const M of g){const w=M*c;if(a[w+2]<=r)continue;a[w+2]=r;const E=a[w+5];y+=a[w]*E,k+=a[w+1]*E,a[w+4]=P,i&&(v||(v=this._map(a,f,!0),b=this.clusterProps.length,this.clusterProps.push(v)),i(v,this._map(a,w)))}a[f+4]=P,l.push(y/p,k/p,1/0,P,-1,p),i&&l.push(b)}else{for(let v=0;v<c;v++)l.push(a[f+v]);if(p>1)for(const v of g){const y=v*c;if(!(a[y+2]<=r)){a[y+2]=r;for(let k=0;k<c;k++)l.push(a[y+k])}}}}return l}_getOriginId(t){return t-this.points.length>>5}_getOriginZoom(t){return(t-this.points.length)%32}_map(t,r,n){if(t[r+5]>1){const s=this.clusterProps[t[r+6]];return n?Object.assign({},s):s}const o=this.points[t[r+3]].properties,i=this.options.map(o);return n&&i===o?Object.assign({},i):i}}function ai(e,t,r){return{type:"Feature",id:e[t+3],properties:ui(e,t,r),geometry:{type:"Point",coordinates:[(n=e[t],360*(n-.5)),fs(e[t+1])]}};var n}function ui(e,t,r){const n=e[t+5],o=n>=1e4?`${Math.round(n/1e3)}k`:n>=1e3?Math.round(n/100)/10+"k":n,i=e[t+6],s=i===-1?{}:Object.assign({},r[i]);return Object.assign(s,{cluster:!0,cluster_id:e[t+3],point_count:n,point_count_abbreviated:o})}function ht(e){return e/360+.5}function pt(e){const t=Math.sin(e*Math.PI/180),r=.5-.25*Math.log((1+t)/(1-t))/Math.PI;return r<0?0:r>1?1:r}function fs(e){const t=(180-360*e)*Math.PI/180;return 360*Math.atan(Math.exp(t))/Math.PI-90}class ci extends ft{constructor(t){var{maxZoom:r,radius:n=60}=t,o=Q(t,["maxZoom","radius"]);super({maxZoom:r}),this.markers=[],this.clusters=[],this.state={zoom:-1},this.superCluster=new si(Object.assign({maxZoom:this.maxZoom,radius:n},o))}calculate(t){let r=!1,n=t.map.getZoom();T(n),n=Math.round(n);const o={zoom:n};if(!rt(t.markers,this.markers)){r=!0,this.markers=[...t.markers];const i=this.markers.map(s=>{const u=j.getPosition(s);return{type:"Feature",geometry:{type:"Point",coordinates:[u.lng(),u.lat()]},properties:{marker:s}}});this.superCluster.load(i)}return r||(this.state.zoom<=this.maxZoom||o.zoom<=this.maxZoom)&&(r=!rt(this.state,o)),this.state=o,t.markers.length===0?(this.clusters=[],{clusters:this.clusters,changed:r}):(r&&(this.clusters=this.cluster(t)),{clusters:this.clusters,changed:r})}cluster(t){let{map:r}=t;const n=r.getZoom();return T(n),this.superCluster.getClusters([-180,-90,180,90],Math.round(n)).map(o=>this.transformCluster(o))}transformCluster(t){let{geometry:{coordinates:[r,n]},properties:o}=t;if(o.cluster)return new U({markers:this.superCluster.getLeaves(o.cluster_id,1/0).map(s=>s.properties.marker),position:{lat:n,lng:r}});const i=o.marker;return new U({markers:[i],position:j.getPosition(i)})}}var Ht,fi,li,hi,dt,pi={};function ls(){if(li)return pi;li=1;var e=J(),t=Go(),r=W(),n=_(),o=at(),i=N(),s=ut(),u=(function(){if(fi)return Ht;fi=1;var d=ot(),h=Function.prototype,g=h.apply,m=h.call;return Ht=typeof Reflect=="object"&&Reflect.apply||(d?m.bind(g):function(){return m.apply(g,arguments)}),Ht})(),a=I(),l=TypeError,c=a(function(){[].keys().reduce(function(){},void 0)}),f=!c&&s("reduce",l);return e({target:"Iterator",proto:!0,real:!0,forced:c||f},{reduce:function(d){n(this);try{r(d)}catch(v){i(this,"throw",v)}var h=arguments.length<2,g=h?void 0:arguments[1];if(f)return u(f,this,h?[d]:[d,g]);var m=o(this),p=0;if(t(m,function(v){h?(h=!1,g=v):g=d(g,v,p),p++},{IS_RECORD:!0}),h)throw new l("Reduce of empty iterator with no initial value");return g}}),pi}hi||(hi=1,ls());class di{constructor(t,r){this.markers={sum:t.length};const n=r.map(i=>i.count),o=n.reduce((i,s)=>i+s,0);this.clusters={count:r.length,markers:{mean:o/r.length,sum:o,min:Math.min(...n),max:Math.max(...n)}}}}class mi{render(t,r,n){let{count:o,position:i}=t;const s=`<svg fill="${o>Math.max(10,r.clusters.markers.mean)?"#ff0000":"#0000ff"}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="50" height="50"> <circle cx="120" cy="120" opacity=".6" r="70" /> <circle cx="120" cy="120" opacity=".3" r="90" /> <circle cx="120" cy="120" opacity=".2" r="110" /> <text x="50%" y="50%" style="fill:#fff" text-anchor="middle" font-size="50" dominant-baseline="middle" font-family="roboto,arial,sans-serif">${o}</text> </svg>`,u=`Cluster of ${o} markers`,a=Number(google.maps.Marker.MAX_ZINDEX)+o;if(j.isAdvancedMarkerAvailable(n)){const c=new DOMParser().parseFromString(s,"image/svg+xml").documentElement;c.setAttribute("transform","translate(0 25)");const f={map:n,position:i,zIndex:a,title:u,content:c};return new google.maps.marker.AdvancedMarkerElement(f)}const l={position:i,zIndex:a,title:u,icon:{url:`data:image/svg+xml;base64,${btoa(s)}`,anchor:new google.maps.Point(25,25)}};return new google.maps.Marker(l)}}class Kt{constructor(){(function(t,r){for(let n in r.prototype)t.prototype[n]=r.prototype[n]})(Kt,google.maps.OverlayView)}}O.MarkerClustererEvents=void 0,(dt=O.MarkerClustererEvents||(O.MarkerClustererEvents={})).CLUSTERING_BEGIN="clusteringbegin",dt.CLUSTERING_END="clusteringend",dt.CLUSTER_CLICK="click",dt.GMP_CLICK="gmp-click";const gi=(e,t,r)=>{t.bounds&&r.fitBounds(t.bounds)};O.AbstractAlgorithm=ft,O.AbstractViewportAlgorithm=Nt,O.Cluster=U,O.ClusterStats=di,O.DefaultRenderer=mi,O.GridAlgorithm=class extends Nt{constructor(e){var{maxDistance:t=4e4,gridSize:r=40}=e;super(Q(e,["maxDistance","gridSize"])),this.clusters=[],this.state={zoom:-1},this.maxDistance=t,this.gridSize=r}calculate(e){let{markers:t,map:r,mapCanvasProjection:n}=e;const o=r.getZoom();T(o);const i={zoom:o};let s=!1;return this.state.zoom>=this.maxZoom&&i.zoom>=this.maxZoom||(s=!rt(this.state,i)),this.state=i,o>=this.maxZoom?{clusters:this.noop({markers:t}),changed:s}:{clusters:this.cluster({markers:Ft(r,n,t,this.viewportPadding),map:r,mapCanvasProjection:n})}}cluster(e){let{markers:t,map:r,mapCanvasProjection:n}=e;return this.clusters=[],t.forEach(o=>{this.addToClosestCluster(o,r,n)}),this.clusters}addToClosestCluster(e,t,r){let n=this.maxDistance,o=null;for(let i=0;i<this.clusters.length;i++){const s=this.clusters[i];T(s.bounds);const u=ko(s.bounds.getCenter().toJSON(),j.getPosition(e).toJSON());u<n&&(n=u,o=s)}if(o)if(T(o.bounds),ct(o.bounds,r,this.gridSize).contains(j.getPosition(e)))o.push(e);else{const i=new U({markers:[e]});this.clusters.push(i)}else{const i=new U({markers:[e]});this.clusters.push(i)}}},O.MarkerClusterer=class extends Kt{constructor(e){let{map:t,markers:r=[],algorithmOptions:n={},algorithm:o=new ci(n),renderer:i=new mi,onClusterClick:s=gi}=e;super(),this.map=null,this.idleListener=null,this.markers=[...r],this.clusters=[],this.algorithm=o,this.renderer=i,this.onClusterClick=s,t&&this.setMap(t)}addMarker(e,t){this.markers.includes(e)||(this.markers.push(e),t||this.render())}addMarkers(e,t){e.forEach(r=>{this.addMarker(r,!0)}),t||this.render()}removeMarker(e,t){const r=this.markers.indexOf(e);return r!==-1&&(j.setMap(e,null),this.markers.splice(r,1),t||this.render(),!0)}removeMarkers(e,t){let r=!1;return e.forEach(n=>{r=this.removeMarker(n,!0)||r}),r&&!t&&this.render(),r}clearMarkers(e){this.markers.length=0,e||this.render()}render(){const e=this.getMap();if(e instanceof google.maps.Map&&e.getProjection()){google.maps.event.trigger(this,O.MarkerClustererEvents.CLUSTERING_BEGIN,this);const{clusters:t,changed:r}=this.algorithm.calculate({markers:this.markers,map:e,mapCanvasProjection:this.getProjection()});if(r||r==null){const n=new Set;for(const i of t)i.markers.length==1&&n.add(i.markers[0]);const o=[];for(const i of this.clusters)i.marker!=null&&(i.markers.length==1?n.has(i.marker)||j.setMap(i.marker,null):o.push(i.marker));this.clusters=t,this.renderClusters(),requestAnimationFrame(()=>o.forEach(i=>j.setMap(i,null)))}google.maps.event.trigger(this,O.MarkerClustererEvents.CLUSTERING_END,this)}}onAdd(){const e=this.getMap();T(e),this.idleListener=e.addListener("idle",this.render.bind(this)),this.render()}onRemove(){this.idleListener&&google.maps.event.removeListener(this.idleListener),this.reset()}reset(){this.markers.forEach(e=>j.setMap(e,null)),this.clusters.forEach(e=>e.delete()),this.clusters=[]}renderClusters(){const e=new di(this.markers,this.clusters),t=this.getMap();this.clusters.forEach(r=>{if(r.markers.length===1)r.marker=r.markers[0];else if(r.marker=this.renderer.render(r,e,t),r.markers.forEach(n=>j.setMap(n,null)),this.onClusterClick){const n=j.isAdvancedMarker(r.marker)?O.MarkerClustererEvents.GMP_CLICK:O.MarkerClustererEvents.CLUSTER_CLICK;r.marker.addListener(n,o=>{google.maps.event.trigger(this,O.MarkerClustererEvents.CLUSTER_CLICK,r),this.onClusterClick(o,r,t)})}j.setMap(r.marker,t)})}},O.MarkerUtils=j,O.NoopAlgorithm=class extends ft{constructor(e){super(Q(e,[]))}calculate(e){let{markers:t,map:r,mapCanvasProjection:n}=e;return{clusters:this.cluster({markers:t,map:r,mapCanvasProjection:n}),changed:!1}}cluster(e){return this.noop(e)}},O.SuperClusterAlgorithm=ci,O.SuperClusterViewportAlgorithm=class extends Nt{constructor(e){var{maxZoom:t,radius:r=60,viewportPadding:n=60}=e,o=Q(e,["maxZoom","radius","viewportPadding"]);super({maxZoom:t,viewportPadding:n}),this.markers=[],this.clusters=[],this.superCluster=new si(Object.assign({maxZoom:this.maxZoom,radius:r},o)),this.state={zoom:-1,view:[0,0,0,0]}}calculate(e){const t=this.getViewportState(e);let r=!rt(this.state,t);if(!rt(e.markers,this.markers)){r=!0,this.markers=[...e.markers];const n=this.markers.map(o=>{const i=j.getPosition(o);return{type:"Feature",geometry:{type:"Point",coordinates:[i.lng(),i.lat()]},properties:{marker:o}}});this.superCluster.load(n)}return r&&(this.clusters=this.cluster(e),this.state=t),{clusters:this.clusters,changed:r}}cluster(e){const t=this.getViewportState(e);return this.superCluster.getClusters(t.view,t.zoom).map(r=>this.transformCluster(r))}transformCluster(e){let{geometry:{coordinates:[t,r]},properties:n}=e;if(n.cluster)return new U({markers:this.superCluster.getLeaves(n.cluster_id,1/0).map(i=>i.properties.marker),position:{lat:r,lng:t}});const o=n.marker;return new U({markers:[o],position:j.getPosition(o)})}getViewportState(e){const t=e.map.getZoom(),r=e.map.getBounds();return T(t),T(r),{zoom:Math.round(t),view:Eo(r,e.mapCanvasProjection,this.viewportPadding)}}},O.defaultOnClusterClickHandler=gi,O.distanceBetweenPoints=ko,O.extendBoundsToPaddedViewport=ct,O.extendPixelBounds=xo,O.filterMarkersToPaddedViewport=Ft,O.getPaddedViewport=Eo,O.noop=Oo,O.pixelBoundsToLatLngBounds=Mo})})(nt,nt.exports)),nt.exports}var ms=ds(),gs=hs(ms);export{gs as default}; elements/map/app/map-leaflet.min.js 0000644 00000004610 15175623010 0013225 0 ustar 00 /*! YOOtheme Pro v4.5.33 | https://yootheme.com */ (function(t,b,h){"use strict";async function $(m,{type:d,center:f,zoom:o,fit_bounds:a,min_zoom:x,max_zoom:G,zooming:y,dragging:S,clustering:v,cluster_icons:i,controls:A,markers:n,popup_max_width:I,baseUrl:P}){t.Icon.Default.imagePath=`${P}/images/`;const c=t.map(m,{zoom:o,minZoom:Number(x),maxZoom:Number(G),center:f,dragging:S,zoomControl:A,touchZoom:y,scrollWheelZoom:y,doubleClickZoom:y});d==="satellite"?t.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",{attribution:'© <a href="https://www.esri.com">Esri</a> | DigitalGlobe, GeoEye, i-cubed, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community'}).addTo(c):t.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:'© <a href="http://osm.org/copyright">OpenStreetMap</a>'}).addTo(c);let u;if(v){const s={showCoverageOnHover:!1};i&&(s.iconCreateFunction=r=>{const p=r.getChildCount();let e;p<10?e=i[0]:p<100?e=i[1]||i[0]:e=i[2]||i[1]||i[0];const g=e.textColor?`style="color: ${e.textColor}"`:"";return new t.DivIcon({html:`<img src="${e.url}" alt><span class="uk-position-center"${g}>${p}</span>`,iconSize:e.size?new t.Point(...e.size):null})}),u=t.markerClusterGroup(s),c.addLayer(u)}n==null||n.forEach(({lat:s,lng:r,content:p,show_popup:e,icon:g,iconSize:C,iconAnchor:z,title:E})=>{const l=t.marker({lat:s,lng:r},{title:E});if(g&&l.setIcon(t.icon({iconUrl:g,iconSize:C,iconAnchor:z})),u?u.addLayer(l):l.addTo(c),p){const w={maxWidth:I?parseInt(I,10):300};C&&(w.offset=new t.Point(0,-1*C[1]+7));const M=t.popup(w).setContent(p);l.bindPopup(M),e&&l.openPopup()}}),a&&(n!=null&&n.length)&&c.fitBounds(n.map(({lat:s,lng:r})=>[s,r]),{padding:[50,50]})}b.component("Map",{connected(){var m,d,f;this.script||(this.script=h.$("script",this.$el)),this.script&&((m=this.map)!=null||(this.map=JSON.parse(this.script.textContent)),(d=this.templates)!=null||(this.templates=h.$$("template",this.$el)),(f=this.map.markers)==null||f.forEach((o,a)=>{o.content=h.html(this.templates[a]).trim(),!o.icon&&this.map.icon&&(o.icon=this.map.icon,o.iconSize=this.map.iconSize,o.iconAnchor=this.map.iconAnchor)}),this.map.lazyload&&"IntersectionObserver"in window?h.observeIntersection(this.$el,(o,a)=>{$(this.$el,this.map),a.disconnect()},{rootMargin:`${window.innerHeight/2}px 0px`}):$(this.$el,this.map))}})})(L,UIkit,UIkit.util); elements/map/element.php 0000644 00000016323 15175623010 0011304 0 ustar 00 <?php namespace YOOtheme; use YOOtheme\Http\Uri; use YOOtheme\Theme\SvgHelper; return [ 'transforms' => [ 'render' => function ($node) { /** * @var Config $config * @var ImageProvider $image * @var View $view */ [$config, $image, $view] = app(Config::class, ImageProvider::class, View::class); $getIconOptions = function ($node) use ($image, $view) { if (empty($node->props['marker_icon'])) { return []; } $icon = $node->props['marker_icon']; $width = (int) $node->props['marker_icon_width']; $height = (int) $node->props['marker_icon_height']; if ($imageObj = $image->create($icon, false)) { if ($width || $height) { $imageObj = $imageObj->thumbnail($width, $height); } $width = $imageObj->getWidth(); $height = $imageObj->getHeight(); $icon = $image->getUrl( (string) (new Uri($icon))->withFragment("thumbnail={$width},{$height}"), ); } elseif ((!$width || !$height) && $view->isImage($icon) === 'svg') { [$width, $height] = SvgHelper::getDimensions($icon, compact('width', 'height')); } $hasWidthAndHeight = $width && $height; return [ 'icon' => $icon ? Url::to($icon) : false, 'iconSize' => $hasWidthAndHeight ? [$width, $height] : null, 'iconAnchor' => $hasWidthAndHeight ? [$width / 2, $height] : null, ]; }; $center = []; $node->options = []; foreach ($node->children as $child) { if (empty($child->props['location'])) { continue; } @[$lat, $lng] = explode(',', $child->props['location']); if (!is_numeric($lat) || !is_numeric($lng)) { continue; } if (empty($center)) { $center = ['lat' => (float) $lat, 'lng' => (float) $lng]; } if (!empty($child->props['hide'])) { continue; } $options = [ 'lat' => (float) $lat, 'lng' => (float) $lng, 'title' => $child->props['title'], ] + $getIconOptions($child); if (!empty($child->props['show_popup'])) { $options['show_popup'] = true; } $child->props['show'] = true; $node->options['markers'][] = $options; } // map options $node->options += Arr::pick($node->props, [ 'type', 'zoom', 'fit_bounds', 'min_zoom', 'max_zoom', 'zooming', 'dragging', 'clustering', 'controls', 'poi', 'styler_invert_lightness', 'styler_hue', 'styler_saturation', 'styler_lightness', 'styler_gamma', 'popup_max_width', ]); $node->options['center'] = $center ?: ['lat' => 53.5503, 'lng' => 10.0006]; $node->options['lazyload'] = true; $node->options += $getIconOptions($node); if ($node->props['clustering']) { for ($i = 1; $i < 4; $i++) { $icon = $node->props["cluster_icon_{$i}"]; $width = (int) $node->props["cluster_icon_{$i}_width"]; $height = (int) $node->props["cluster_icon_{$i}_height"]; $textColor = $node->props["cluster_icon_{$i}_text_color"]; if ($icon) { if ($imageObj = $image->create($icon, false)) { if ($width || $height) { $imageObj = $imageObj->thumbnail($width, $height); } $width = $imageObj->getWidth(); $height = $imageObj->getHeight(); $icon = $image->getUrl("{$icon}#thumbnail={$width},{$height}"); } $node->options['cluster_icons'][] = [ 'url' => Url::to($icon), 'size' => $width && $height ? [$width, $height] : null, 'textColor' => $textColor, ]; } } } $node->options = array_filter($node->options, fn($value) => isset($value)); $node->props['metadata'] = []; // add scripts, styles if ($key = $config('~theme.google_maps')) { $node->options['library'] = 'google'; $node->options['apiKey'] = $key; $node->props['metadata']['script:builder-map'] = [ 'src' => Path::get('./app/map-google.min.js', __DIR__), 'defer' => true, ]; if ($node->props['clustering']) { $node->options['clustererUrl'] = Url::to( Path::get('./app/map-google-markerclusterer.min.js', __DIR__), ); } } else { $node->options['library'] = 'leaflet'; $baseUrl = '~assets/leaflet/leaflet/dist'; $node->options['baseUrl'] = Url::to($baseUrl); $node->props['metadata']['script:leaflet'] = [ 'src' => "{$baseUrl}/leaflet.js", 'defer' => true, ]; $node->props['metadata']['style:leaflet'] = [ 'href' => "{$baseUrl}/leaflet.css", 'defer' => true, ]; if ($node->props['clustering']) { $baseUrl = '~assets/leaflet/markercluster/dist'; $node->options['clusterBaseUrl'] = $baseUrl; $node->props['metadata'] += [ 'script:leaflet-clusterer' => [ 'src' => "{$baseUrl}/leaflet.markercluster.js", 'defer' => true, ], 'style:leaflet-clusterer' => [ 'href' => "{$baseUrl}/MarkerCluster.css", 'defer' => true, ], 'style:leaflet-clusterer-default' => [ 'href' => "{$baseUrl}/MarkerCluster.Default.css", 'defer' => true, ], ]; } $node->props['metadata']['script:builder-map'] = [ 'src' => Path::get('./app/map-leaflet.min.js', __DIR__), 'defer' => true, ]; } }, ], ]; elements/map/templates/template.php 0000644 00000004421 15175623010 0013460 0 ustar 00 <?php use YOOtheme\Metadata; use function YOOtheme\app; // Resets if ($props['viewport_height'] == 'viewport' && $props['viewport_height_viewport'] > 100) { $props['viewport_height_offset_top'] = false; } /** @var Metadata $metadata */ $metadata = app(Metadata::class); foreach ($props['metadata'] as $name => $attributes) { $metadata->set($name, $attributes); } $el = $this->el('div', [ 'class' => [ 'uk-position-relative', 'uk-position-z-index', 'uk-dark', 'uk-inverse-{text_color}', // Height Viewport 'uk-height-viewport {@viewport_height: viewport} {@!viewport_height_offset_top} {@viewport_height_viewport: |100}', ], 'style' => [ 'width: {width}px; {@!width_breakpoint} {@!viewport_height}', 'height: {height}px; {@!width} {@!viewport_height}', // Height Viewport 'min-height: {!viewport_height_viewport: |100}vh; {@viewport_height: viewport} {@!viewport_height_offset_top}' ], // Height Viewport 'uk-height-viewport' => ($props['viewport_height'] == 'viewport' && $props['viewport_height_offset_top']) || $props['viewport_height'] == 'section' ? [ 'offset-top: true; {@viewport_height_offset_top}', 'offset-bottom: {0}; {@viewport_height: viewport}' => $props['viewport_height_viewport'] && $props['viewport_height_viewport'] < 100 ? 100 - (int) $props['viewport_height_viewport'] : false, 'offset-bottom: !:is(.uk-section-default,.uk-section-muted,.uk-section-primary,.uk-section-secondary) +; {@viewport_height: section}', ] : false, 'uk-responsive' => !$props['viewport_height'] ? [ 'width: {width}; height: {height}', ] : false, 'uk-map' => true, 'data-map-type' => $options['library'] ]); $script = $this->el('script', ['type' => 'application/json'], json_encode($options)); // Width and Height $props['width'] = trim($props['width'] ?: '', 'px'); $props['height'] = trim($props['height'] ?: '300', 'px'); ?> <?= $el($props, $attrs) ?> <?= $script() ?> <?php foreach ($children as $child) : ?> <?php if (!empty($child->props['show'])) : ?> <template> <?= $builder->render($child, ['element' => $props]) ?> </template> <?php endif ?> <?php endforeach ?> <?= $el->end() ?> elements/map/templates/content.php 0000644 00000000522 15175623010 0013315 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/map/images/iconSmall.svg 0000644 00000000535 15175623010 0013047 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="1.1" d="M10,0.5c-3.59,0-6.5,2.89-6.5,6.48C3.5,11.83,10,19,10,19 s6.5-7.17,6.5-12.02C16.5,3.39,13.59,0.5,10,0.5L10,0.5z" /> <circle fill="none" stroke="#444" stroke-width="1.1" cx="10" cy="6.8" r="2.3" /> </svg> elements/map/images/icon.svg 0000644 00000000514 15175623010 0012053 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="2" d="M15,1C9.5,1,5,5.4,5,10.8C5,18.1,15,29,15,29s10-10.9,10-18.2 C25,5.4,20.5,1,15,1L15,1z" /> <ellipse fill="none" stroke="#444" stroke-width="2" cx="15" cy="10.5" rx="3.5" ry="3.5" /> </svg> elements/panel/images/icon.svg 0000644 00000000775 15175623010 0012406 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="1.9" points="7,12.728 11.728,8 17.909,14.182" /> <polyline fill="none" stroke="#444" stroke-width="1.9" points="15.455,11 17.273,9.182 23,14.909" /> <rect width="18" height="2" fill="#444" x="6" y="18" /> <rect width="14" height="2" fill="#444" x="8" y="21" /> <rect width="24" height="24" fill="none" stroke="#444" stroke-width="2" x="3" y="3" /> </svg> elements/panel/images/iconSmall.svg 0000644 00000000720 15175623010 0013365 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="1.1" points="4,9 8,5 12,9" /> <polyline fill="none" stroke="#444" stroke-width="1.1" points="10.5,7.5 12,6 16,10" /> <rect width="12" height="1" fill="#444" x="4" y="12" /> <rect width="10" height="1" fill="#444" x="5" y="14" /> <rect width="17" height="17" fill="none" stroke="#444" x="1.5" y="1.5" /> </svg> elements/panel/element.json 0000644 00000121246 15175623010 0012011 0 ustar 00 { "@import": "./element.php", "name": "panel", "title": "Panel", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "link_text": "Read more", "title_hover_style": "reset", "title_element": "h3", "title_align": "top", "title_grid_width": "1-2", "title_grid_breakpoint": "m", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "content_column_breakpoint": "m", "icon_width": 80, "image_align": "top", "image_grid_width": "1-2", "image_grid_breakpoint": "m", "image_svg_color": "emphasis", "link_style": "default", "margin": "default" }, "placeholder": { "props": { "title": "Title", "meta": "", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "image": "", "video": "", "icon": "", "hover_image": "", "hover_video": "" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": { "label": "Image", "type": "image", "source": true, "show": "!video", "altRef": "%name%_alt" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "image_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "image || video" }, "image_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "image || video" }, "image_alt": { "label": "Image Alt", "source": true, "show": "image && !video" }, "icon": { "label": "Icon", "description": "Instead of using a custom image, you can click on the pencil to pick an icon from the icon library.", "type": "icon", "source": true, "enable": "!image && !video" }, "link": "${builder.link}", "link_target": "${builder.link_target}", "link_text": { "label": "Link Text", "description": "Enter the text for the link.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "source": true, "enable": "link" }, "hover_image": { "label": "Hover Image", "description": "Select an optional image that appears on hover.", "type": "image", "source": true, "show": "!hover_video", "enable": "image || video" }, "hover_video": { "label": "Hover Video", "description": "Select an optional video that appears on hover.", "type": "video", "source": true, "show": "!hover_image", "enable": "image || video" }, "panel_style": { "label": "Style", "description": "Select one of the boxed card or tile styles or a blank panel.", "type": "select", "options": { "None": "", "Card Default": "card-default", "Card Primary": "card-primary", "Card Secondary": "card-secondary", "Card Hover": "card-hover", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "panel_link": { "label": "Link", "description": "Link the whole panel if a link exists. Optionally, add a hover style.", "type": "checkbox", "text": "Link panel", "enable": "link" }, "panel_link_hover": { "type": "checkbox", "text": "Add hover style", "enable": "link && panel_link && $match(panel_style, 'card-(default|primary|secondary)|tile-')" }, "panel_padding": { "label": "Padding", "description": "Set the padding.", "type": "select", "options": { "None": "", "Small": "small", "Default": "default", "Large": "large" }, "enable": "panel_style || (!panel_style && (image || video) && image_align != 'between')" }, "panel_image_no_padding": { "description": "Top, bottom, left or right aligned images can be attached to the panel edge. If the image is aligned to the left or right, it will also extend to cover the whole space.", "type": "checkbox", "text": "Align image without padding", "show": "panel_style", "enable": "(image || video) && image_align != 'between'" }, "height_expand": { "label": "Height", "description": "Expand the height of the element to fill the available space in the column.", "type": "checkbox", "text": "Fill the available column space" }, "panel_expand": { "label": "Expand Content", "description": "Expand the height of the content to fill the available space in the panel and push the link to the bottom.", "type": "select", "options": { "None": "", "Image": "image", "Content": "content", "Image and Content": "both" }, "enable": "height_expand" }, "html_element": "${builder.html_element}", "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "title" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "title && link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "title && link && (title_link || panel_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "title" }, "title_align": { "label": "Alignment", "description": "Align the title to the top or left in regards to the content.", "type": "select", "options": { "Top": "top", "Left": "left" }, "enable": "title" }, "title_grid_width": { "label": "Grid Width", "description": "Define the width of the title within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "Expand": "expand", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "title && title_align == 'left'" }, "title_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the title and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "title && title_align == 'left'" }, "title_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "title && title_align == 'left'" }, "title_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "title && title_align == 'left'" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "title" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Above Content": "above-content", "Below Content": "below-content" }, "enable": "meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "meta" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "content" }, "content_align": { "label": "Alignment", "type": "checkbox", "text": "Force left alignment", "enable": "content" }, "content_dropcap": { "label": "Drop Cap", "description": "Display the first letter of the paragraph as a large initial.", "type": "checkbox", "text": "Enable drop cap", "enable": "content" }, "content_column": { "label": "Columns", "description": "Set the number of text columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" }, "enable": "content" }, "content_column_divider": { "description": "Show a divider between text columns.", "type": "checkbox", "text": "Show dividers", "enable": "content && content_column" }, "content_column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the text columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "content && content_column" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "content" }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image || video" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "image || video" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "(image || video) && (!panel_style || (panel_style && (!panel_image_no_padding || image_align == 'between')))" }, "image_box_shadow": { "label": "Box Shadow", "description": "Select the image box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "(image || video) && !panel_style" }, "image_box_decoration": { "label": "Box Decoration", "description": "Select the image box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" }, "enable": "(image || video) && !panel_style" }, "image_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "(image || video) && !panel_style && $match(image_box_decoration, '^(default|primary|secondary)$')" }, "image_link": { "label": "Link", "description": "Link the image if a link exists.", "type": "checkbox", "text": "Link image", "enable": "(image || video) && link" }, "image_transition": { "label": "Hover Transition", "description": "Set the hover transition for a linked image. If the hover image is set, the transition takes place between the two images. If <i>None</i> is selected, the hover image fades in.", "type": "select", "options": { "None (Fade if hover image)": "", "Scale Up": "scale-up", "Scale Down": "scale-down" }, "enable": "(image || video) && (link && (image_link || panel_link))" }, "image_transition_border": { "type": "checkbox", "text": "Border", "enable": "(image || video) && link && (image_link || panel_link)" }, "image_hover_box_shadow": { "label": "Hover Box Shadow", "description": "Select the image box shadow size on hover.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "(image || video) && link && !panel_style && (image_link || panel_link)" }, "icon_width": "${builder.icon_width}", "icon_color": "${builder.icon_color}", "image_align": { "label": "Alignment", "description": "Align the image to the top, left, right or place it between the title and the content.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right", "Between": "between" }, "enable": "image || video || icon" }, "image_grid_width": { "label": "Grid Width", "description": "Define the width of the image within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "(image || video || icon) && $match(image_align, 'left|right')" }, "image_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the image and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "(image || video || icon) && $match(image_align, 'left|right') && !(panel_image_no_padding && panel_style)" }, "image_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "(image || video || icon) && $match(image_align, 'left|right') && !(panel_image_no_padding && panel_style)" }, "image_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "(image || video || icon) && $match(image_align, 'left|right')" }, "image_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center grid items.", "type": "checkbox", "text": "Center", "enable": "(image || video || icon) && $match(image_align, 'left|right')" }, "image_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "(image || video || icon) && (image_align == 'between' || (image_align == 'bottom' && !(panel_style && panel_image_no_padding)))" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "image && image_svg_inline" }, "image_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "image || video" }, "hover_image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "link && link_text" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "link && link_text && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "link && link_text && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "link && link_text" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>, <code>.el-hover-image</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-title", ".el-meta", ".el-content", ".el-image", ".el-link", ".el-hover-image" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "title", "meta", "content", "image", "video", { "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "name": "_image_dimension", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_alt", "icon", "link", "link_target", "link_text", "link_aria_label", "hover_image", "hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Panel", "type": "group", "divider": true, "fields": [ "panel_style", "panel_link", "panel_link_hover", "panel_padding", "panel_image_no_padding", "height_expand", "panel_expand", "html_element" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_align", "title_grid_width", "title_grid_column_gap", "title_grid_row_gap", "title_grid_breakpoint", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": [ "content_style", "content_align", "content_dropcap", "content_column", "content_column_divider", "content_column_breakpoint", "content_margin" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ "image_focal_point", "image_loading", "image_border", "image_box_shadow", "image_box_decoration", "image_box_decoration_inverse", "image_link", "image_transition", "image_transition_border", "image_hover_box_shadow", "icon_width", "icon_color", "image_align", "image_grid_width", "image_grid_column_gap", "image_grid_row_gap", "image_grid_breakpoint", "image_vertical_align", "image_margin", "image_svg_inline", "image_svg_animate", "image_svg_color", "image_text_color" ] }, { "label": "Hover Image", "type": "group", "divider": true, "fields": [ "hover_image_focal_point" ] }, { "label": "Link", "type": "group", "divider": true, "fields": ["link_style", "link_size", "link_fullwidth", "link_margin"] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/panel/element.php 0000644 00000002276 15175623010 0011630 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { /** * Auto-correct media rendering for dynamic content * * @var View $view */ $view = app(View::class); foreach (['', 'hover_'] as $prefix) { if ($node->props["{$prefix}image"] && $view->isVideo($node->props["{$prefix}image"])) { $node->props["{$prefix}video"] = $node->props["{$prefix}image"]; $node->props["{$prefix}image"] = null; } elseif ($node->props["{$prefix}video"] && $view->isImage($node->props["{$prefix}video"])) { $node->props["{$prefix}image"] = $node->props["{$prefix}video"]; $node->props["{$prefix}video"] = null; } } // Don't render element if content fields are empty return $node->props['title'] != '' || $node->props['meta'] != '' || $node->props['content'] != '' || $node->props['image'] || $node->props['video'] || $node->props['icon']; }, ], ]; elements/panel/updates.php 0000644 00000022517 15175623010 0011644 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.3' => function ($node) { if (Arr::get($node->props, 'link') && Arr::get($node->props, 'panel_link') && preg_match('/^card-(default|primary|secondary)|tile-/', Arr::get($node->props, 'panel_style', ''))) { $node->props['panel_link_hover'] = 'true'; } // Remove obsolete props unset( $node->props['icon_ratio'], $node->props['panel_card_size'] ); }, '4.4.0-beta.0.2' => function ($node) { if (str_starts_with(Arr::get($node->props, 'panel_style', ''), 'card-') && Arr::get($node->props, 'panel_image_no_padding') && in_array(Arr::get($node->props, 'image_align'), ['left', 'right'])) { $node->props['panel_expand'] = 'image'; } }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'panel_link') && Arr::get($node->props, 'css')) { $node->props['css'] = str_replace( '.el-element', '.el-element > *', $node->props['css'], ); } }, '3.0.0-beta.5.1' => function ($node) { if (Arr::get($node->props, 'image_box_decoration') === 'border-hover') { $node->props['image_transition_border'] = true; unset($node->props['image_box_decoration']); } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.7.0-beta.0.5' => function ($node) { if (str_starts_with($node->props['panel_style'] ?? '', 'card-')) { if (empty($node->props['panel_card_size'])) { $node->props['panel_card_size'] = 'default'; } $node->props['panel_padding'] = $node->props['panel_card_size']; } unset($node->props['panel_card_size']); }, '2.7.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'panel_content_padding' => 'panel_padding', 'panel_size' => 'panel_card_size', 'panel_card_image' => 'panel_image_no_padding', ]); }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_grid_width') === 'xxlarge') { $node->props['title_grid_width'] = '2xlarge'; } if (Arr::get($node->props, 'image_grid_width') === 'xxlarge') { $node->props['image_grid_width'] = '2xlarge'; } if (!empty($node->props['icon_ratio'])) { $node->props['icon_width'] = round(20 * $node->props['icon_ratio']); unset($node->props['icon_ratio']); } }, '2.0.0-beta.5.1' => function ($node) { Arr::updateKeys($node->props, [ 'link_type' => function ($value) { if ($value === 'content') { return [ 'title_link' => true, 'image_link' => true, 'link_text' => '', ]; } elseif ($value === 'element') { return [ 'panel_link' => true, 'link_text' => '', ]; } }, ]); }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'title_breakpoint' => 'title_grid_breakpoint', 'image_breakpoint' => 'image_grid_breakpoint', 'title_gutter' => fn($value) => [ 'title_grid_column_gap' => $value, 'title_grid_row_gap' => $value, ], 'image_gutter' => fn($value) => [ 'image_grid_column_gap' => $value, 'image_grid_row_gap' => $value, ], ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_style') === 'heading-hero') { $node->props['title_style'] = 'heading-xlarge'; } if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } if (in_array($style, ['juno', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-medium'; } } if ( in_array($style, [ 'district', 'florence', 'flow', 'nioh-studio', 'summit', 'vision', ]) ) { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-large'; } } if ($style == 'lilian') { if (Arr::get($node->props, 'title_style') === 'heading-xlarge') { $node->props['title_style'] = 'heading-2xlarge'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } if (Arr::get($node->props, 'link_style') === 'panel') { if (Arr::get($node->props, 'panel_style')) { $node->props['link_type'] = 'element'; } else { $node->props['link_type'] = 'content'; } $node->props['link_style'] = 'default'; } Arr::updateKeys($node->props, ['image_card' => 'panel_card_image']); }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_inline_svg' => 'image_svg_inline', 'image_animate_svg' => 'image_svg_animate', ]); }, '1.18.0' => function ($node) { if ( !isset($node->props['image_box_decoration']) && Arr::get($node->props, 'image_box_shadow_bottom') === true ) { $node->props['image_box_decoration'] = 'shadow'; } if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/panel/templates/template-media.php 0000644 00000011176 15175623010 0015064 0 ustar 00 <?php if ($props['video']) { $src = $props['video']; $media = include "{$__dir}/template-video.php"; } elseif ($props['image']) { $src = $props['image']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-image.php"; } elseif ($props['icon']) { $media = include "{$__dir}/template-icon.php"; } else { return; } // Media $media->attr([ 'class' => [ 'el-image', ], ]); $transition = ''; $decoration = ''; if ($props['image'] || $props['video']) { $media->attr([ 'class' => [ 'uk-transition-{image_transition} uk-transition-opaque {@link}' => $props['image_link'] || $props['panel_link'], 'uk-inverse-{image_text_color}', 'uk-flex-1 {@panel_expand: image|both}', ], ]); if (in_array($props['panel_expand'], ['image', 'both']) || ($media->name == 'video' && $props['image_width'] && $props['image_height'])) { $media->attr([ 'class' => [ 'uk-object-cover', 'uk-object-{0}' => $props['image_focal_point'], ], 'style' => [ // Keep video responsiveness but with new proportions (because video isn't cropped like an image) 'aspect-ratio: {image_width} / {image_height};' => $media->name == 'video', ], ]); } // Transition + Hover Image if ($props['image_transition'] || $props['hover_image'] || $props['hover_video']) { $transition = $this->el('div', [ 'class' => [ 'uk-inline-clip', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ]); } ($transition ?: $media)->attr('class', [ 'uk-border-{image_border}' => !$props['panel_style'] || ($props['panel_style'] && (!$props['panel_image_no_padding'] || $props['image_align'] == 'between')), 'uk-box-shadow-{image_box_shadow} {@!panel_style}', 'uk-box-shadow-hover-{image_hover_box_shadow} {@!panel_style} {@link}' => $props['image_link'] || $props['panel_link'], ]); // Decoration if ($props['image_box_decoration'] || $props['image_transition_border']) { $decoration = $this->el('div', [ 'class' => [ 'uk-box-shadow-bottom {@image_box_decoration: shadow}', 'tm-mask-default {@image_box_decoration: mask}', 'tm-box-decoration-{image_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@image_box_decoration_inverse} {@image_box_decoration: default|primary|secondary}', 'tm-transition-border {@image_transition_border}', 'uk-inline', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ]); } } ($decoration ?: $transition ?: $media)->attr('class', [ 'uk-transition-toggle {@image_link}' => $props['image_transition'] || $props['image_transition_border'] || $props['hover_image'] || $props['hover_video'], 'uk-margin[-{image_margin}]-top {@!image_margin: remove}' => $props['image_align'] == 'between' || ($props['image_align'] == 'bottom' && !($props['panel_style'] && $props['panel_image_no_padding'])), ]); // Hover Media $hover_media = ''; if (($props['hover_image'] || $props['hover_video']) && ($props['image'] || $props['video'])) { if ($props['hover_video']) { $src = $props['hover_video']; $hover_media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $hover_media = include "{$__dir}/template-image.php"; } $hover_media->attr([ 'class' => [ 'el-hover-image', 'uk-transition-{image_transition}', 'uk-transition-fade {@!image_transition}', 'uk-object-{hover_image_focal_point}', // `uk-cover` already sets object-fit to cover ], 'uk-cover' => true, 'uk-video' => false, // Resets 'alt' => true, // Image 'loading' => false, // Image + Iframe 'preload' => false, // Video ]); } ?> <?php if ($decoration) : ?> <?= $decoration($props) ?> <?php endif ?> <?php if ($transition) : ?> <?= $transition($props) ?> <?php endif ?> <?php if ($media) : ?> <?= $media($props, '') ?> <?php endif ?> <?php if ($hover_media) : ?> <?= $hover_media($props, '') ?> <?php endif ?> <?php if ($transition) : ?> <?= $transition->end() ?> <?php endif ?> <?php if ($decoration) : ?> <?= $decoration->end() ?> <?php endif ?> elements/panel/templates/template-link.php 0000644 00000003413 15175623010 0014735 0 ustar 00 <?php $link = $props['link'] ? $this->el('a', [ 'href' => ['{link}'], 'aria-label' => ['{link_aria_label}'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $props['panel_link']) { $link_container->attr($link->attrs + [ 'class' => [ 'uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $props['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($props); } } if ($link && $props['title'] != '' && $props['title_link']) { $props['title'] = $link($props, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && $props['image'] && $props['image_link']) { $props['image'] = $link($props, [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ], $props['image']); } if ($link && $props['link_text']) { if ($props['panel_link']) { $link = $this->el('div'); } $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', // Keep link style if panel link 'uk-link {@link_style:} {@panel_link}', 'uk-text-muted {@link_style: link-muted} {@panel_link}', ]); } return $link; elements/panel/templates/template-image.php 0000644 00000000714 15175623010 0015063 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => $props['image_alt'], 'loading' => $props['image_loading'] ? false : null, 'width' => $props['image_width'], 'height' => $props['image_height'], 'focal_point' => $focal, 'uk-svg' => $props['image_svg_inline'], 'thumbnail' => true, 'class' => [ 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($src) == 'svg', ], ]); return $image; elements/panel/templates/template-video.php 0000644 00000001344 15175623010 0015107 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'uk-responsive' => true, 'loading' => ['lazy {@image_loading}'], 'class' => [ 'uk-disabled', ], 'uk-video' => [ 'automute: true;', ], ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'preload' => ['none {@image_loading}'], 'uk-video' => true, ]); } $video->attr([ 'width' => $props['image_width'], 'height' => $props['image_height'], ]); return $video; elements/panel/templates/template-icon.php 0000644 00000000345 15175623010 0014731 0 ustar 00 <?php $icon = $this->el('span', [ 'class' => [ 'uk-text-{icon_color}', ], 'uk-icon' => [ 'icon: {icon};', 'width: {icon_width};', 'height: {icon_width};', ], ]); return $icon; elements/panel/templates/content.php 0000644 00000002774 15175623010 0013652 0 ustar 00 <?php if ($props['image'] || $props['video'] || $props['hover_image'] || $props['hover_video'] || $props['title'] != '' || $props['meta'] != '' || $props['content'] != '' || $props['link']) : ?> <div> <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['video']) : ?> <?php if ($this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['hover_image']) : ?> <img src="<?= $props['hover_image'] ?>" alt> <?php endif ?> <?php if ($props['hover_video']) : ?> <?php if ($this->iframeVideo($props['hover_video'], [], false)) : ?> <iframe src="<?= $props['hover_video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['hover_video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $props['title_element'] ?>><?= $props['title'] ?></<?= $props['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?></a></p> <?php endif ?> </div> <?php endif ?> elements/panel/templates/template.php 0000644 00000021522 15175623010 0014003 0 ustar 00 <?php // Resets if ($props['icon'] && !($props['image'] || $props['video'])) { $props['panel_image_no_padding'] = ''; } if ($props['panel_style'] || !($props['image'] || $props['video'])) { $props['image_box_decoration'] = ''; $props['image_transition_border'] = ''; } if ($props['panel_link']) { $props['title_link'] = ''; $props['image_link'] = ''; } if (!$props['height_expand'] && !(($props['image'] || $props['video']) && in_array($props['image_align'], ['left', 'right']))) { $props['panel_expand'] = ''; } if (!($props['panel_style'] || (!$props['panel_style'] && ($props['image'] || $props['video']) && $props['image_align'] != 'between'))) { $props['panel_padding'] = ''; } // New logic shortcuts $props['flex_column_align'] = ''; $props['flex_column_align_fallback'] = ''; if ($props['panel_expand']) { $horizontal = ['left', 'center', 'right']; $vertical = ['top', 'middle', 'bottom']; $props['flex_column_align'] = str_replace($horizontal, $vertical, $props['text_align'] ?? ''); $props['flex_column_align_fallback'] = str_replace($horizontal, $vertical, $props['text_align_fallback'] ?? ''); // `uk-flex-top` prevents child inline elements from taking the whole width, needed for floating shadow + hover image if (!$props['panel_style']) { if ($props['text_align'] && $props['text_align_breakpoint'] && !$props['text_align_fallback']) { $props['flex_column_align_fallback'] = 'top'; } elseif (!$props['text_align']) { $props['flex_column_align'] = 'top'; } } } // Image $props['image'] = $this->render("{$__dir}/template-media", compact('props')); // Panel/Card/Tile $el = $this->el($props['html_element'] ?: 'div', [ 'class' => [ // Expand to column height 'uk-flex-1 {@height_expand}', 'uk-flex uk-flex-column {@height_expand} {@link} {@panel_link}', ], ]); // Link Container $link_container = $props['link'] && $props['panel_link'] ? $this->el('a', [ 'class' => [ 'uk-flex-1 {@height_expand}', 'uk-display-block {@!height_expand}', ], ]) : null; ($link_container ?: $el)->attr([ 'class' => [ 'uk-panel [uk-{panel_style: tile-.*}] {@panel_style: |tile-.*}', 'uk-card uk-{panel_style: card-.*} [uk-card-{!panel_padding: |default}]', 'uk-tile-hover {@panel_style: tile-.*} {@panel_link} {@link} {@panel_link_hover}', 'uk-card-hover {@panel_style: card-(default|primary|secondary)} {@panel_link} {@link} {@panel_link_hover}', 'uk-transition-toggle {@image} {@panel_link}' => $props['image_transition'] || $props['image_transition_border'] || $props['hover_image'] || $props['hover_video'], 'uk-flex uk-flex-column {@panel_expand}', // Image not wrapped in card media container or grid 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand}' => !($props['panel_style'] && str_starts_with($props['panel_style'], 'card-') && $props['image'] && $props['panel_image_no_padding'] && $props['image_align'] != 'between') && !in_array($props['image_align'], ['left', 'right']), ], ]); // Padding $content_container = ''; if ($props['panel_padding'] && $props['image'] && (!$props['panel_style'] || $props['panel_image_no_padding']) && $props['image_align'] != 'between') { $content_container = $this->el('div', [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: content|both}', // Image not wrapped in card media container or grid 'uk-width-1-1 {@flex_column_align} {@panel_expand}' => !($props['panel_style'] && str_starts_with($props['panel_style'], 'card-') && $props['image'] && $props['panel_image_no_padding'] && $props['image_align'] != 'between') && !in_array($props['image_align'], ['left', 'right']), ], ]); } ($content_container ?: $link_container ?: $el)->attr('class', [ 'uk-padding[-{!panel_padding: default}] {@panel_style: |tile-.*} {@panel_padding}', 'uk-card-body {@panel_style: card-.*} {@panel_padding}', ]); // Image align $grid = ''; $cell_image = ''; $cell_content = ''; if ($props['image'] && in_array($props['image_align'], ['left', 'right'])) { $grid = $this->el('div', [ 'class' => [ $props['panel_style'] && $props['panel_image_no_padding'] ? 'uk-grid-collapse' : ($props['image_grid_column_gap'] == $props['image_grid_row_gap'] ? 'uk-grid-{image_grid_column_gap}' : '[uk-grid-column-{image_grid_column_gap}] [uk-grid-row-{image_grid_row_gap}]'), // Center vertically 'uk-flex-middle {@image_vertical_align} {@!panel_expand}', // Expand 'uk-flex-1 {@panel_expand}', 'uk-flex-column {@panel_expand} uk-flex-row@{image_grid_breakpoint}', ], 'uk-grid' => true, ]); $cell_image = $this->el('div', [ 'class' => [ 'uk-width-{image_grid_width}[@{image_grid_breakpoint}]', // Order 'uk-flex-last[@{image_grid_breakpoint}] {@image_align: right}', // Center vertically and keep text align 'uk-flex uk-flex-middle[@{image_grid_breakpoint}] uk-flex-{text_align} {@image_vertical_align} {@panel_expand: content}', 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]] {@panel_expand: content}', // Expand, also when stacking 'uk-flex uk-flex-column {@panel_expand: image|both} [uk-flex-1 uk-flex-initial@{image_grid_breakpoint}]', 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand: image|both}', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-width-expand', // Center vertically 'uk-flex uk-flex-column uk-flex-center[@{image_grid_breakpoint}] {@image_vertical_align} {@panel_expand: image}', // Expand, also when stacking but only for `content` 'uk-flex uk-flex-column {@panel_expand: content|both}', 'uk-flex-1 {@image_grid_breakpoint} {@panel_expand: content}', 'uk-flex-1[@{image_grid_breakpoint} uk-flex-none] {@panel_expand: both}', 'uk-flex-none uk-flex-1@{image_grid_breakpoint} {@panel_expand: image}', ], ]); } ($content_container ?: $cell_content ?: $link_container ?: $el)->attr('class', [ 'uk-margin-remove-first-child', ]); // Link $link = include "{$__dir}/template-link.php"; // Card Media (Needs to be after link) if ($props['panel_style'] && str_starts_with($props['panel_style'], 'card-') && $props['image'] && $props['panel_image_no_padding'] && $props['image_align'] != 'between') { $props['image'] = $this->el('div', [ 'class' => [ 'uk-card-media-{image_align}', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand: image|both} {@!image_align: left|right}', ], 'uk-toggle' => [ 'cls: uk-card-media-{image_align} uk-card-media-top; mode: media; media: @{image_grid_breakpoint} {@image_align: left|right}', ] ], $props['image'])->render($props); } ?> <?= $el($props, $attrs) ?> <?php if ($link_container) : ?> <?= $link_container($props) ?> <?php endif ?> <?php if ($grid) : ?> <?= $grid($props) ?> <?php endif ?> <?php if ($cell_image) : ?> <?= $cell_image($props) ?> <?php endif ?> <?php if (in_array($props['image_align'], ['left', 'right'])) : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($cell_image) : ?> <?= $cell_image->end() ?> <?php endif ?> <?php if ($cell_content) : ?> <?= $cell_content($props) ?> <?php endif ?> <?php if ($props['image_align'] == 'top') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($content_container) : ?> <?= $content_container($props) ?> <?php endif ?> <?= $this->render("{$__dir}/template-content", compact('props', 'link')) ?> <?php if ($content_container) : ?> <?= $content_container->end() ?> <?php endif ?> <?php if ($props['image_align'] == 'bottom') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($cell_content) : ?> <?= $cell_content->end() ?> <?php endif ?> <?php if ($grid) : ?> <?= $grid->end() ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container->end() ?> <?php endif ?> <?= $el->end() ?> elements/panel/templates/template-content.php 0000644 00000012507 15175623010 0015456 0 ustar 00 <?php // Title $title = $this->el($props['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-card-title {@panel_style} {@!title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', 'uk-flex-1 {@panel_expand: content|both}' => !$props['content'] && (!$props['meta'] || $props['meta_align'] == 'above-title') && (!$props['image'] || $props['image_align'] != 'between'), ], ]); // Meta $meta = $this->el($props['meta_element'], [ 'class' => [ 'el-meta', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($props['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $props['meta_element'] != 'div', 'uk-flex-1 {@panel_expand: content|both}' => $props['meta_align'] == 'below-content' || (!$props['content'] && ($props['meta_align'] == 'above-content' || ($props['meta_align'] == 'below-title' && (!$props['image'] || $props['image_align'] != 'between')))), ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style}', '[uk-text-left{@content_align}]', 'uk-dropcap {@content_dropcap}', 'uk-column-{content_column}[@{content_column_breakpoint}]', 'uk-column-divider {@content_column} {@content_column_divider}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($props['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), 'uk-flex-1 {@panel_expand: content|both}' => !($props['meta'] && $props['meta_align'] == 'below-content'), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', 'uk-width-1-1 {@link_fullwidth} {@panel_expand}', ], ]); // Title Grid $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand', $props['title_grid_column_gap'] == $props['title_grid_row_gap'] ? 'uk-grid-{title_grid_column_gap}' : '[uk-grid-column-{title_grid_column_gap}] [uk-grid-row-{title_grid_row_gap}]', 'uk-margin[-{title_margin}]-top {@!title_margin: remove} {@image_align: top}' => !$props['meta'] || $props['meta_align'] != 'above-title', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove} {@image_align: top} {@meta} {@meta_align: above-title}', 'uk-flex-1 {@panel_expand: content|both}', ], 'uk-grid' => true, ]); $cell_title = $this->el('div', [ 'class' => [ 'uk-width-{!title_grid_width: expand}[@{title_grid_breakpoint}]', 'uk-margin-remove-first-child', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-width-auto[@{title_grid_breakpoint}] {@title_grid_width: expand}', 'uk-margin-remove-first-child', 'uk-flex uk-flex-column {@panel_expand: content|both}', ], ]); ?> <?php if ($props['title'] != '' && $props['title_align'] == 'left') : ?> <?= $grid($props) ?> <?= $cell_title($props) ?> <?php endif ?> <?php if ($props['meta'] != '' && $props['meta_align'] == 'above-title') : ?> <?= $meta($props, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($props) ?> <?php if ($props['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($props['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $props['meta_align'] == 'below-title') : ?> <?= $meta($props, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '' && $props['title_align'] == 'left') : ?> <?= $cell_title->end() ?> <?= $cell_content($props) ?> <?php endif ?> <?php if ($props['image_align'] == 'between') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($props['meta'] != '' && $props['meta_align'] == 'above-content') : ?> <?= $meta($props, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($props, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $props['meta_align'] == 'below-content') : ?> <?= $meta($props, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && $props['link_text']) : ?> <?= $link_container($props, $link($props, $props['link_text'])) ?> <?php endif ?> <?php if ($props['title'] != '' && $props['title_align'] == 'left') : ?> <?= $cell_content->end() ?> <?= $grid->end() ?> <?php endif ?> elements/image/element.php 0000644 00000000350 15175623010 0011602 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return (bool) $node->props['image']; }, ], ]; elements/image/element.json 0000644 00000032156 15175623010 0011775 0 ustar 00 { "@import": "./element.php", "name": "image", "title": "Image", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "margin": "default", "image_svg_color": "emphasis" }, "placeholder": { "props": { "image": "${url:~yootheme/theme/assets/images/element-image-placeholder.png}" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "image": "${builder.image}", "image_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "image" }, "image_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "image" }, "image_alt": { "label": "Image Alt", "description": "Enter the image alt attribute.", "source": true, "enable": "image" }, "link": "${builder.link}", "link_aria_label": "${builder.link_aria_label}", "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" } }, "image_box_shadow": { "label": "Box Shadow", "description": "Select the image box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" } }, "image_hover_box_shadow": { "label": "Hover Box Shadow", "description": "Select the image box shadow size on hover.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "link" }, "image_box_decoration": { "label": "Box Decoration", "description": "Select the image box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" } }, "image_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "$match(image_box_decoration, '^(default|primary|secondary)$')" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "image_svg_inline" }, "height_expand": { "label": "Height", "description": "Expand the height of the element to fill the available space in the column or force the height to one viewport. The image will cover the element's content box.", "type": "checkbox", "text": "Fill the available column space" }, "image_viewport_height": { "type": "checkbox", "text": "Force viewport height", "enable": "!height_expand" }, "text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "link_target": { "label": "Link Target", "type": "select", "options": { "Same Window": "", "New Window": "blank", "Modal": "modal" } }, "lightbox_width": { "attrs": { "placeholder": "auto" }, "enable": "link_target == 'modal'" }, "lightbox_height": { "attrs": { "placeholder": "auto" }, "enable": "link_target == 'modal'" }, "lightbox_image_focal_point": { "label": "Modal Image Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "link_target == 'modal'" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-image", ".el-link"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "image", { "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "name": "_image_dimension", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_alt", "link", "link_aria_label" ] }, { "title": "Settings", "fields": [ { "label": "Image", "type": "group", "divider": true, "fields": [ "image_focal_point", "image_loading", "image_border", "image_box_shadow", "image_hover_box_shadow", "image_box_decoration", "image_box_decoration_inverse", "image_svg_inline", "image_svg_animate", "image_svg_color", "height_expand", "image_viewport_height", "text_color" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", { "label": "Modal Width/Height", "description": "Set the width and height for the modal content, i.e. image, video or iframe.", "type": "grid", "width": "1-2", "fields": ["lightbox_width", "lightbox_height"] }, "lightbox_image_focal_point" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/image/images/icon.svg 0000644 00000001055 15175623010 0012361 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="2" points="6.161,19.424 12.051,13.525 19.424,20.897" /> <path fill="#444" d="M23.504,8C24.325,8,25,8.672,25,9.502C25,10.328,24.325,11,23.504,11C22.674,11,22,10.329,22,9.502 C22,8.672,22.674,8,23.504,8z" /> <rect width="28" height="22" fill="none" stroke="#444" stroke-width="2" x="1" y="4" /> <polyline fill="none" stroke="#444" stroke-width="2" points="16.475,17.949 18.688,15.736 23.839,20.897" /> </svg> elements/image/images/iconSmall.svg 0000644 00000000624 15175623010 0013353 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <circle fill="#444" cx="16.1" cy="6.1" r="1.1" /> <rect width="19" height="15" fill="none" stroke="#444" x="0.5" y="2.5" /> <polyline fill="none" stroke="#444" stroke-width="1.01" points="4,13 8,9 13,14" /> <polyline fill="none" stroke="#444" stroke-width="1.01" points="11,12 12.5,10.5 16,14" /> </svg> elements/image/templates/content.php 0000644 00000000421 15175623010 0013620 0 ustar 00 <?php if ($props['image'] && $props['link']) : ?> <a href="<?= $props['link'] ?>"><img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"></a> <?php elseif ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> elements/image/templates/template.php 0000644 00000010401 15175623010 0013760 0 ustar 00 <?php $props['image_hover_box_shadow'] = $props['link'] ? $props['image_hover_box_shadow'] : false; $el = $this->el('div', [ 'class' => [ // Expand to column height 'uk-flex-1 uk-flex {@height_expand}', ], ]); // Image $image = $this->el('image', [ 'class' => [ 'el-image', 'uk-border-{image_border}', 'uk-box-shadow-{image_box_shadow}', 'uk-box-shadow-hover-{image_hover_box_shadow}', 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', 'uk-object-cover [uk-object-{image_focal_point}]' => $props['image_viewport_height'] || $props['height_expand'], 'uk-inverse-{text_color}', ], 'style' => [ 'height: 100vh; {@image_viewport_height} {@!height_expand}', // Fix bug in Safari not stretching an image beyond its intrinsic height 'aspect-ratio: auto; {@height_expand}', ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'loading' => $props['image_loading'] ? false : null, 'width' => $props['image_width'], 'height' => $props['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => $props['image_svg_inline'], 'thumbnail' => true, ]); // Box decoration $decoration = $this->el('div', [ 'class' => [ 'uk-box-shadow-bottom {@image_box_decoration: shadow}', 'tm-mask-default {@image_box_decoration: mask}', 'tm-box-decoration-{image_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@image_box_decoration_inverse} {@image_box_decoration: default|primary|secondary}', 'uk-inline {@!image_box_decoration: |shadow}', 'uk-flex {@height_expand}', ], ]); // Link and Lightbox $link = $this->el('a', [ 'class' => [ 'el-link', 'uk-box-shadow-bottom {@image_box_decoration: shadow}', 'tm-mask-default {@image_box_decoration: mask}', 'tm-box-decoration-{image_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@image_box_decoration_inverse} {@image_box_decoration: default|primary|secondary}', 'uk-inline {@!image_box_decoration: |shadow}', 'uk-flex {@height_expand}', ], 'href' => ['{link}'], 'aria-label' => ['{link_aria_label}'], 'target' => ['_blank {@link_target: blank}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), // Target Modal? 'uk-toggle' => $props['link_target'] === 'modal', ]); if ($props['link'] && $props['link_target'] === 'modal') { $target = $this->el('image', [ 'src' => $props['link'], 'width' => $props['lightbox_width'], 'height' => $props['lightbox_height'], ]); if ($this->isImage($props['link'])) { $lightbox = $target($props, [ 'focal_point' => $props['lightbox_image_focal_point'], 'thumbnail' => true, ]); } else { $video = $this->isVideo($props['link']); $iframe = $this->iframeVideo($props['link'], [], false); $lightbox = $video && !$iframe ? $target($props, [ // Video 'controls' => true, 'uk-video' => true, ], '', 'video') : $target($props, [ // Iframe 'src' => $iframe ?: $props['link'], 'allowfullscreen' => true, 'loading' => 'lazy', 'uk-video' => $video || $iframe, 'uk-responsive' => true, ], '', 'iframe'); } $connect_id = "js-{$this->uid()}"; $props['link'] = "#{$connect_id}"; } ?> <?= $el($props, $attrs) ?> <?php if ($props['link']) : ?> <?= $link($props, $image($props)) ?> <?php elseif ($props['image_box_decoration']) : ?> <?= $decoration($props, $image($props)) ?> <?php else : ?> <?= $image($props) ?> <?php endif ?> <?php if ($props['link'] && $props['link_target'] === 'modal') : ?> <?php // uk-flex-top is needed to make vertical margin work for IE11 ?> <div id="<?= $connect_id ?>" class="uk-flex-top uk-modal" uk-modal> <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <?= $lightbox ?> </div> </div> <?php endif ?> <?= $el->end() ?> elements/image/updates.php 0000644 00000003330 15175623010 0011617 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset($node->props['inline_align']); }, '4.3.0-beta.0.2' => function ($node, $params) { $search = 'uk-height-match="target: !.tm-height-min-1-1, * > img; row: false"'; if (str_contains(Arr::get($node->props, 'attributes', ''), $search)) { $node->props['height_expand'] = true; $node->props['attributes'] = str_replace($search, '', $node->props['attributes']); $pattern = '/.el-image\s*\{\s*width: 100%;\s*object-fit: cover;\s*}/'; if (preg_match($pattern, Arr::get($node->props, 'css', ''), $matches)) { $node->props['css'] = str_replace($matches[0], '', $node->props['css']); } $row = $params['builder']->parent($params['path'], 'row'); if ($row) { $row->props['class'] = trim(($row->props['class'] ?? '') . ' uk-height-1-1'); } } }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_inline_svg' => 'image_svg_inline', 'image_animate_svg' => 'image_svg_animate', ]); }, '1.18.0' => function ($node) { if (Arr::get($node->props, 'link_target') === true) { $node->props['link_target'] = 'blank'; } if ( !isset($node->props['image_box_decoration']) && Arr::get($node->props, 'image_box_shadow_bottom') === true ) { $node->props['image_box_decoration'] = 'shadow'; } }, ]; elements/panel-slider_item/templates/template-image.php 0000644 00000000724 15175623010 0017362 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $focal, 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, 'class' => [ 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($src) == 'svg', ], ]); return $image; elements/panel-slider_item/templates/template-icon.php 0000644 00000000364 15175623010 0017230 0 ustar 00 <?php $icon = $this->el('span', [ 'class' => [ 'uk-text-{icon_color}', ], 'uk-icon' => [ 'icon: {0};' => $props['icon'], 'width: {icon_width};', 'height: {icon_width};', ], ]); return $icon; elements/panel-slider_item/templates/template-content.php 0000644 00000012716 15175623010 0017756 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-card-title {@panel_style} {@!title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', 'uk-flex-1 {@panel_expand: content|both}' => !$props['content'] && (!$props['meta'] || $element['meta_align'] == 'above-title') && (!$props['image'] || $element['image_align'] != 'between'), ], ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', 'uk-flex-1 {@panel_expand: content|both}' => $element['meta_align'] == 'below-content' || (!$props['content'] && ($element['meta_align'] == 'above-content' || ($element['meta_align'] == 'below-title' && (!$props['image'] || $element['image_align'] != 'between')))), ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style}', '[uk-text-left{@content_align}]', 'uk-dropcap {@content_dropcap}', 'uk-column-{content_column}[@{content_column_breakpoint}]', 'uk-column-divider {@content_column} {@content_column_divider}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), 'uk-flex-1 {@panel_expand: content|both}' => !($props['meta'] && $element['meta_align'] == 'below-content'), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', 'uk-width-1-1 {@link_fullwidth} {@panel_expand}', ], ]); // Title Grid $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand', $element['title_grid_column_gap'] == $element['title_grid_row_gap'] ? 'uk-grid-{title_grid_column_gap}' : '[uk-grid-column-{title_grid_column_gap}] [uk-grid-row-{title_grid_row_gap}]', 'uk-margin[-{title_margin}]-top {@!title_margin: remove} {@image_align: top}' => !$props['meta'] || $element['meta_align'] != 'above-title', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove} {@image_align: top} {@meta_align: above-title}' => $props['meta'], 'uk-flex-1 {@panel_expand: content|both}', ], 'uk-grid' => true, ]); $cell_title = $this->el('div', [ 'class' => [ 'uk-width-{!title_grid_width: expand}[@{title_grid_breakpoint}]', 'uk-margin-remove-first-child', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-width-auto[@{title_grid_breakpoint}] {@title_grid_width: expand}', 'uk-margin-remove-first-child', 'uk-flex uk-flex-column {@panel_expand: content|both}', ], ]); ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $grid($element) ?> <?= $cell_title($element) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $cell_title->end() ?> <?= $cell_content($element) ?> <?php endif ?> <?php if ($element['image_align'] == 'between') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $cell_content->end() ?> <?= $grid->end() ?> <?php endif ?> elements/panel-slider_item/templates/template-media.php 0000644 00000007043 15175623010 0017360 0 ustar 00 <?php if ($props['video']) { $src = $props['video']; $media = include "{$__dir}/template-video.php"; } elseif ($props['image']) { $src = $props['image']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-image.php"; } elseif ($props['icon']) { $media = include "{$__dir}/template-icon.php"; } else { return; } // Media $media->attr([ 'class' => [ 'el-image', ], ]); $transition = ''; if ($props['image'] || $props['video']) { $media->attr([ 'class' => [ 'uk-transition-{image_transition} uk-transition-opaque' => $props['link'] && ($element['image_link'] || $element['panel_link']), 'uk-inverse-{image_text_color}', 'uk-flex-1 {@panel_expand: image|both}' ], ]); if (in_array($element['panel_expand'], ['image', 'both']) || ($media->name == 'video' && $element['image_width'] && $element['image_height'])) { $media->attr([ 'class' => [ 'uk-object-cover', 'uk-object-{0}' => $props['image_focal_point'], ], 'style' => [ // Keep video responsiveness but with new proportions (because video isn't cropped like an image) 'aspect-ratio: {image_width} / {image_height};' => $media->name == 'video', ], ]); } // Transition + Hover Image if ($element['image_transition'] || $props['hover_image'] || $props['hover_video']) { $transition = $this->el('div', [ 'class' => [ 'uk-inline-clip', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ]); } ($transition ?: $media)->attr('class', [ 'uk-border-{image_border}' => !$element['panel_style'] || ($element['panel_style'] && (!$element['panel_image_no_padding'] || $element['image_align'] == 'between')), ]); } ($transition ?: $media)->attr('class', [ 'uk-transition-toggle {@image_link}' => $element['image_transition'] || $props['hover_image'] || $props['hover_video'], 'uk-margin[-{image_margin}]-top {@!image_margin: remove}' => $element['image_align'] == 'between' || ($element['image_align'] == 'bottom' && !($element['panel_style'] && $element['panel_image_no_padding'])), ]); // Hover Media $hover_media = ''; if (($props['hover_image'] || $props['hover_video']) && ($props['image'] || $props['video'])) { if ($props['hover_video']) { $src = $props['hover_video']; $hover_media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $hover_media = include "{$__dir}/template-image.php"; } $hover_media->attr([ 'class' => [ 'el-hover-image', 'uk-transition-{image_transition}', 'uk-transition-fade {@!image_transition}', 'uk-object-{0}' => $props['hover_image_focal_point'], // `uk-cover` already sets object-fit to cover ], 'uk-cover' => true, 'uk-video' => false, // Resets 'alt' => true, // Image 'loading' => false, // Image + Iframe 'preload' => false, // Video ]); } ?> <?php if ($transition) : ?> <?= $transition($element) ?> <?php endif ?> <?php if ($media) : ?> <?= $media($element, '') ?> <?php endif ?> <?php if ($hover_media) : ?> <?= $hover_media($element, '') ?> <?php endif ?> <?php if ($transition) : ?> <?= $transition->end() ?> <?php endif ?> elements/panel-slider_item/templates/template-video.php 0000644 00000001350 15175623010 0017402 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'uk-responsive' => true, 'loading' => ['lazy {@image_loading}'], 'class' => [ 'uk-disabled', ], 'uk-video' => [ 'automute: true;', ], ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'preload' => ['none {@image_loading}'], 'uk-video' => true, ]); } $video->attr([ 'width' => $element['image_width'], 'height' => $element['image_height'], ]); return $video; elements/panel-slider_item/templates/template-link.php 0000644 00000003535 15175623010 0017240 0 ustar 00 <?php $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $element['panel_link']) { $link_container->attr($link->attrs + [ 'class' => [ 'uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $element['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($element); } } if ($link && $props['title'] != '' && $element['title_link']) { $props['title'] = $link($element, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && $props['image'] && $element['image_link']) { $props['image'] = $link($element, [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ], $props['image']); } if ($link && ($props['link_text'] || $element['link_text'])) { if ($element['panel_link']) { $link = $this->el('div'); } $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', // Keep link style if panel link 'uk-link {@link_style:} {@panel_link}', 'uk-text-muted {@link_style: link-muted} {@panel_link}', ]); } return $link; elements/panel-slider_item/templates/content.php 0000644 00000002270 15175623010 0016137 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['video']) : ?> <?php if ($this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['hover_image']) : ?> <img src="<?= $props['hover_image'] ?>" alt> <?php endif ?> <?php if ($props['hover_video']) : ?> <?php if ($this->iframeVideo($props['hover_video'], [], false)) : ?> <iframe src="<?= $props['hover_video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['hover_video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/panel-slider_item/templates/template.php 0000644 00000022120 15175623010 0016274 0 ustar 00 <?php // Override default settings $element['panel_style'] = $props['panel_style'] ?: $element['panel_style']; // Resets if ($props['icon'] && !($props['image'] || $props['video'])) { $element['panel_image_no_padding'] = ''; } if (!($element['panel_style'] || (!$element['panel_style'] && ($props['image'] || $props['video']) && $element['image_align'] != 'between'))) { $element['panel_padding'] = ''; } // Override default settings if (!$element['panel_match'] && !(($props['image'] || $props['video']) && in_array($element['image_align'], ['left', 'right']))) { $element['panel_expand'] = ''; } $element['image_text_color'] = $props['image_text_color'] ?: $element['image_text_color']; // New logic shortcuts $element['flex_column_align'] = ''; $element['flex_column_align_fallback'] = ''; if ($element['panel_expand']) { $horizontal = ['left', 'center', 'right']; $vertical = ['top', 'middle', 'bottom']; $element['flex_column_align'] = str_replace($horizontal, $vertical, $element['text_align'] ?? ''); $element['flex_column_align_fallback'] = str_replace($horizontal, $vertical, $element['text_align_fallback'] ?? ''); // `uk-flex-top` prevents child inline elements from taking the whole width, needed for floating shadow + hover image if (!$element['panel_style']) { if ($element['text_align'] && $element['text_align_breakpoint'] && !$element['text_align_fallback']) { $element['flex_column_align_fallback'] = 'top'; } elseif (!$element['text_align']) { $element['flex_column_align'] = 'top'; } } } // Image $props['image'] = $this->render("{$__dir}/template-media", compact('props', 'element')); // Panel/Card/Tile $el = $this->el($props['item_element'] ?: 'div', [ 'class' => [ 'el-item', // Can't use `uk-grid-item-match` because `flex-wrap: warp` creates a multi-line flex container which doesn't shrink the child height if its content is larger 'uk-width-1-1 {@panel_match}', 'uk-flex uk-flex-column {@panel_match} {@panel_link}' => $props['link'], ], ]); // Link Container $link_container = $props['link'] && $element['panel_link'] ? $this->el('a', [ 'class' => [ 'uk-flex-1 {@panel_match}', 'uk-display-block {@!panel_match}', ], ]) : null; ($link_container ?: $el)->attr([ 'class' => [ 'uk-panel [uk-{panel_style: tile-.*}] {@panel_style: |tile-.*}', 'uk-card uk-{panel_style: card-.*} [uk-card-{!panel_padding: |default}]', 'uk-tile-hover {@panel_style: tile-.*} {@panel_link} {@panel_link_hover}' => $props['link'], 'uk-card-hover {@panel_style: card-(default|primary|secondary)} {@panel_link} {@panel_link_hover}' => $props['link'], 'uk-transition-toggle {@panel_link}' => $props['image'] && ($element['image_transition'] || $props['hover_image'] || $props['hover_video']), 'uk-flex uk-flex-column {@panel_expand}', // Image not wrapped in card media container or grid 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand}' => !($element['panel_style'] && str_starts_with($element['panel_style'], 'card-') && $props['image'] && $element['panel_image_no_padding'] && $element['image_align'] != 'between') && !in_array($element['image_align'], ['left', 'right']), ], ]); // Padding $content_container = ''; if ($element['panel_padding'] && $props['image'] && (!$element['panel_style'] || $element['panel_image_no_padding']) && $element['image_align'] != 'between') { $content_container = $this->el('div', [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: content|both}', // Image not wrapped in card media container or grid 'uk-width-1-1 {@flex_column_align} {@panel_expand}' => !($element['panel_style'] && str_starts_with($element['panel_style'], 'card-') && $props['image'] && $element['panel_image_no_padding'] && $element['image_align'] != 'between') && !in_array($element['image_align'], ['left', 'right']), ], ]); } ($content_container ?: $link_container ?: $el)->attr('class', [ 'uk-padding[-{!panel_padding: default}] {@panel_style: |tile-.*} {@panel_padding}', 'uk-card-body {@panel_style: card-.*} {@panel_padding}', ]); // Image align $grid = ''; $cell_image = ''; $cell_content = ''; if ($props['image'] && in_array($element['image_align'], ['left', 'right'])) { $grid = $this->el('div', [ 'class' => [ $element['panel_style'] && $element['panel_image_no_padding'] ? 'uk-grid-collapse' : ($element['image_grid_column_gap'] == $element['image_grid_row_gap'] ? 'uk-grid-{image_grid_column_gap}' : '[uk-grid-column-{image_grid_column_gap}] [uk-grid-row-{image_grid_row_gap}]'), // Center vertically 'uk-flex-middle {@image_vertical_align} {@!panel_expand}', // Expand 'uk-flex-1 {@panel_expand}', 'uk-flex-column {@panel_expand} uk-flex-row@{image_grid_breakpoint}', ], 'uk-grid' => true, ]); $cell_image = $this->el('div', [ 'class' => [ 'uk-width-{image_grid_width}[@{image_grid_breakpoint}]', // Order 'uk-flex-last[@{image_grid_breakpoint}] {@image_align: right}', // Center vertically and keep text align 'uk-flex uk-flex-middle[@{image_grid_breakpoint}] uk-flex-{text_align} {@image_vertical_align} {@panel_expand: content}', 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]] {@panel_expand: content}', // Expand, also when stacking 'uk-flex uk-flex-column {@panel_expand: image|both} [uk-flex-1 uk-flex-initial@{image_grid_breakpoint}]', 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand: image|both}', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-width-expand', // Center vertically 'uk-flex uk-flex-column uk-flex-center[@{image_grid_breakpoint}] {@image_vertical_align} {@panel_expand: image}', // Expand, also when stacking but only for `content` 'uk-flex uk-flex-column {@panel_expand: content|both}', 'uk-flex-1 {@image_grid_breakpoint} {@panel_expand: content}', 'uk-flex-1[@{image_grid_breakpoint} uk-flex-none] {@panel_expand: both}', 'uk-flex-none uk-flex-1@{image_grid_breakpoint} {@panel_expand: image}', ], ]); } ($content_container ?: $cell_content ?: $link_container ?: $el)->attr('class', [ 'uk-margin-remove-first-child', ]); // Link $link = include "{$__dir}/template-link.php"; // Card Media (Needs to be after link) if ($element['panel_style'] && str_starts_with($element['panel_style'], 'card-') && $props['image'] && $element['panel_image_no_padding'] && $element['image_align'] != 'between') { $props['image'] = $this->el('div', [ 'class' => [ 'uk-card-media-{image_align}', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand: image|both} {@!image_align: left|right}', ], 'uk-toggle' => [ 'cls: uk-card-media-{image_align} uk-card-media-top; mode: media; media: @{image_grid_breakpoint} {@image_align: left|right}', ] ], $props['image'])->render($element); } ?> <?= $el($element, $attrs) ?> <?php if ($link_container) : ?> <?= $link_container($element) ?> <?php endif ?> <?php if ($grid) : ?> <?= $grid($element) ?> <?php endif ?> <?php if ($cell_image) : ?> <?= $cell_image($element) ?> <?php endif ?> <?php if (in_array($element['image_align'], ['left', 'right'])) : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($cell_image) : ?> <?= $cell_image->end() ?> <?php endif ?> <?php if ($cell_content) : ?> <?= $cell_content($element) ?> <?php endif ?> <?php if ($element['image_align'] == 'top') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($content_container) : ?> <?= $content_container($element) ?> <?php endif ?> <?= $this->render("{$__dir}/template-content", compact('props', 'link')) ?> <?php if ($content_container) : ?> <?= $content_container->end() ?> <?php endif ?> <?php if ($element['image_align'] == 'bottom') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($cell_content) : ?> <?= $cell_content->end() ?> <?php endif ?> <?php if ($grid) : ?> <?= $grid->end() ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container->end() ?> <?php endif ?> <?= $el->end() ?> elements/panel-slider_item/element.json 0000644 00000016210 15175623010 0014301 0 ustar 00 { "@import": "./element.php", "name": "panel-slider_item", "title": "Item", "width": 500, "placeholder": { "props": { "title": "Title", "meta": "", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "image": "${url:~yootheme/theme/assets/images/element-image-placeholder.png}", "video": "", "icon": "", "hover_image": "", "hover_video": "" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": { "label": "Image", "type": "image", "source": true, "show": "!video", "altRef": "%name%_alt" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "image_alt": { "label": "Image Alt", "source": true, "show": "image && !video" }, "icon": { "label": "Icon", "description": "Instead of using a custom image, you can click on the pencil to pick an icon from the icon library.", "type": "icon", "source": true, "enable": "!image && !video" }, "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true, "enable": "link" }, "hover_image": { "label": "Hover Image", "description": "Select an optional image that appears on hover.", "type": "image", "source": true, "show": "!hover_video", "enable": "image || video" }, "hover_video": { "label": "Hover Video", "description": "Select an optional video that appears on hover.", "type": "video", "source": true, "show": "!hover_image", "enable": "image || video" }, "panel_style": { "label": "Style", "description": "Select one of the boxed card or tile styles or a blank panel.", "type": "select", "options": { "None": "", "Card Default": "card-default", "Card Primary": "card-primary", "Card Secondary": "card-secondary", "Card Hover": "card-hover", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "item_element": "${builder.html_element_item}", "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image || video" }, "image_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "image || video" }, "hover_image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "title", "meta", "content", "image", "video", "image_alt", "icon", "link", "link_text", "link_aria_label", "hover_image", "hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Panel", "type": "group", "divider": true, "fields": ["panel_style", "item_element"] }, { "label": "Image", "type": "group", "fields": [ "image_focal_point", "image_text_color" ] }, { "label": "Hover Image", "type": "group", "fields": ["hover_image_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/panel-slider_item/element.php 0000644 00000003126 15175623010 0014121 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['title', 'meta', 'content', 'link', 'image', 'video', 'hover_image', 'hover_image'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; if ($key === 'image') { $node->props['icon'] = ''; } } } /** * Auto-correct media rendering for dynamic content * * @var View $view */ $view = app(View::class); foreach (['', 'hover_'] as $prefix) { if ($node->props["{$prefix}image"] && $view->isVideo($node->props["{$prefix}image"])) { $node->props["{$prefix}video"] = $node->props["{$prefix}image"]; $node->props["{$prefix}image"] = null; } elseif ($node->props["{$prefix}video"] && $view->isImage($node->props["{$prefix}video"])) { $node->props["{$prefix}image"] = $node->props["{$prefix}video"]; $node->props["{$prefix}video"] = null; } } // Don't render element if content fields are empty return $node->props['title'] != '' || $node->props['meta'] != '' || $node->props['content'] != '' || $node->props['image'] || $node->props['video'] || $node->props['icon']; }, ], ]; elements/map_item/element.json 0000644 00000011476 15175623010 0012510 0 ustar 00 { "@import": "./element.php", "name": "map_item", "title": "Item", "width": 500, "placeholder": { "props": { "location": "53.5503, 10.0006" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "location": { "label": "Location", "type": "location", "source": true }, "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": "${builder.image}", "image_alt": "${builder.image_alt}", "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true, "enable": "link" }, "marker_icon": { "label": "Marker Icon", "type": "image", "source": true }, "marker_icon_width": { "label": "Width", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "marker_icon" }, "marker_icon_height": { "label": "Height", "type": "number", "attrs": { "placeholder": "auto" }, "enable": "marker_icon" }, "hide": { "label": "Marker", "type": "checkbox", "text": "Hide marker" }, "show_popup": { "label": "Behavior", "type": "checkbox", "text": "Show popup on load" }, "item_element": "${builder.html_element_item}", "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "location", "title", "meta", "content", "image", "image_alt", "link", "link_text", "link_aria_label", "marker_icon", { "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "name": "_marker_dimension", "type": "grid", "width": "1-2", "fields": ["marker_icon_width", "marker_icon_height"] } ] }, { "title": "Settings", "fields": [ { "label": "Marker", "type": "group", "divider": true, "fields": ["hide"] }, { "label": "Popup", "type": "group", "divider": true, "fields": ["show_popup", "item_element"] }, { "label": "Image", "type": "group", "fields": ["image_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/map_item/element.php 0000644 00000000253 15175623010 0012315 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { return (bool) $node->props['location']; }, ], ]; elements/map_item/templates/template-image.php 0000644 00000001261 15175623010 0015555 0 ustar 00 <?php if (!$props['image']) { return; } echo $this->el('image', [ 'class' => [ 'el-image', 'uk-responsive-width', 'uk-margin-auto', 'uk-display-block', 'uk-border-{image_border}', 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, ])->render($element); elements/map_item/templates/content.php 0000644 00000001225 15175623010 0014334 0 ustar 00 <?php if ($props['location']) : ?> <p><?= $props['location'] ?></p> <?php endif ?> <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/map_item/templates/template-link.php 0000644 00000001565 15175623010 0015437 0 ustar 00 <?php $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]) : null; if ($link && $props['title'] != '' && $element['title_link']) { $props['title'] = $link($element, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && $props['image'] && $element['image_link']) { $props['image'] = $link($element, $props['image']); } if ($link && ($props['link_text'] || $element['link_text'])) { $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', ]); } return $link; elements/map_item/templates/template.php 0000644 00000002033 15175623010 0014473 0 ustar 00 <?php // Display $hasContent = false; foreach (['title', 'meta', 'content', 'image', 'link'] as $key) { if (!$element["show_{$key}"]) { $props[$key] = ''; } $hasContent = $hasContent || $props[$key]; } if (!$hasContent) { // Do not render the marker content, but the marker itself is still rendered return; } // Image $props['image'] = $this->render("{$__dir}/template-image", compact('props')); // Item $el = $this->el($props['item_element'] ?: 'div', [ 'class' => [ 'el-item', 'uk-text-default uk-font-default', // Reset Google Maps Style 'uk-text-{item_text_align}{@item_text_align: justify}', 'uk-text-{item_text_align}[@{item_text_align_breakpoint} [uk-text-{item_text_align_fallback}]] {@!item_text_align: justify}', 'uk-margin-remove-first-child', ], ]); // Link $link = include "{$__dir}/template-link.php"; ?> <?= $el($element) ?> <?= $props['image'] ?> <?= $this->render("{$__dir}/template-content", compact('props', 'link')) ?> <?= $el->end() ?> elements/map_item/templates/template-content.php 0000644 00000005121 15175623010 0016144 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', ], ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', ], ]); ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, [], $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> elements/list/images/iconSmall.svg 0000644 00000000676 15175623010 0013253 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <rect width="12" height="1" fill="#444" x="6" y="5" /> <rect width="12" height="1" fill="#444" x="6" y="10" /> <rect width="12" height="1" fill="#444" x="6" y="15" /> <rect width="2" height="1" fill="#444" x="2" y="5" /> <rect width="2" height="1" fill="#444" x="2" y="10" /> <rect width="2" height="1" fill="#444" x="2" y="15" /> </svg> elements/list/images/icon.svg 0000644 00000000676 15175623010 0012262 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <rect width="19" height="2" fill="#444" x="9" y="6" /> <rect width="19" height="2" fill="#444" x="9" y="14" /> <rect width="19" height="2" fill="#444" x="9" y="22" /> <rect width="4" height="2" fill="#444" x="2" y="6" /> <rect width="4" height="2" fill="#444" x="2" y="14" /> <rect width="4" height="2" fill="#444" x="2" y="22" /> </svg> elements/list/templates/template.php 0000644 00000003243 15175623010 0013657 0 ustar 00 <?php $list = null; if ($props['list_type'] == 'horizontal') { $el = $this->el('div'); } elseif ($props['html_element']) { $el = $this->el('nav'); $list = $this->el($props['list_element']); } else { $el = $this->el($props['list_element']); } ($list ?: $el)->attr([ 'class' => [ 'uk-list {@list_type: vertical}', 'uk-list-{list_marker} {@list_type: vertical}', 'uk-list-{list_marker_color} {@list_type: vertical} {@!list_marker: bullet}', 'uk-list-{list_style} {@list_type: vertical}', 'uk-list-{list_size} {@list_type: vertical}', 'uk-column-{column}[@{column_breakpoint}]', 'uk-column-divider {@column} {@column_divider}', 'uk-margin-remove {@list_type: vertical}' => $props['position'] == 'absolute' || $props['html_element'], ], ]); $item = $this->el($props['list_type'] == 'horizontal' ? 'span' : 'li', [ 'class' => [ 'el-item' ], ]); ?> <?= $el($props, $attrs) ?> <?php if ($list) : ?> <?= $list($props) ?> <?php endif ?> <?php if ($props['list_type'] == 'horizontal') : ?> <?php foreach ($children as $i => $child) : echo $item($props) . $builder->render($child, ['element' => $props]) . (($i !== array_key_last($children)) ? $props['list_horizontal_separator'] : '') . $item->end(); endforeach ?> <?php else : ?> <?php foreach ($children as $i => $child) : ?> <?= $item($props) ?> <?= $builder->render($child, ['element' => $props]) ?> <?= $item->end() ?> <?php endforeach ?> <?php endif ?> <?php if ($list) : ?> <?= $list->end() ?> <?php endif ?> <?= $el->end() ?> elements/list/templates/content.php 0000644 00000000522 15175623010 0013513 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/list/updates.php 0000644 00000006270 15175623010 0011516 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset( $node->props['image'], $node->props['icon_ratio'], $node->props['text_style'] ); }, '4.3.2' => function ($node) { $separator = Arr::get($node->props, 'list_horizontal_separator'); if ($separator && !preg_match('/\h$/u', $separator)) { $node->props['list_horizontal_separator'] .= ' '; } }, '4.3.0-beta.0.4' => function ($node) { if ( Arr::get($node->props, 'list_type') === 'horizontal' && !Arr::get($node->props, 'margin') ) { $node->props['margin'] = 'default'; } }, '2.8.0-beta.0.13' => function ($node) { if (in_array(Arr::get($node->props, 'content_style'), ['bold', 'muted'])) { $node->props['content_style'] = 'text-' . Arr::get($node->props, 'content_style'); } }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'list_style') === 'bullet') { $node->props['list_marker'] = 'bullet'; $node->props['list_style'] = ''; } if (Arr::get($node->props, 'list_size') === true) { $node->props['list_size'] = 'large'; } else { $node->props['list_size'] = ''; } if (!empty($node->props['icon_ratio'])) { $node->props['icon_width'] = round(20 * $node->props['icon_ratio']); unset($node->props['icon_ratio']); } }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if (Arr::get($node->props, 'content_style') === 'h1') { $node->props['content_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'content_style') === 'h2') { $node->props['content_style'] = 'h1'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'content_style') === 'h1') { $node->props['content_style'] = 'h2'; } } }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_inline_svg' => 'image_svg_inline', 'image_animate_svg' => 'image_svg_animate', ]); }, '1.18.0' => function ($node) { if (!isset($node->props['content_style'])) { $node->props['content_style'] = Arr::get($node->props, 'text_style'); } }, ]; elements/list/element.json 0000644 00000037574 15175623010 0011677 0 ustar 00 { "name": "list", "title": "List", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_image": true, "show_link": true, "list_type": "vertical", "list_element": "ul", "list_horizontal_separator": ", ", "column_breakpoint": "m", "image_svg_color": "emphasis", "image_align": "left", "image_vertical_align": true }, "placeholder": { "children": [ { "type": "list_item", "props": {} }, { "type": "list_item", "props": {} }, { "type": "list_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "title": "content", "item": "list_item", "media": { "type": "image", "item": { "image": "src" } } }, "show_image": { "label": "Display", "type": "checkbox", "text": "Show the image" }, "show_link": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the link" }, "list_type": { "label": "Type", "description": "Choose between a vertical or horizontal list.", "type": "select", "options": { "Vertical": "vertical", "Horizontal": "horizontal" } }, "list_marker": { "label": "Marker", "description": "Select the marker of the list items.", "type": "select", "options": { "None": "", "Disc": "disc", "Circle": "circle", "Square": "square", "Decimal": "decimal", "Hyphen": "hyphen", "Image Bullet": "bullet" }, "enable": "list_type == 'vertical'" }, "list_marker_color": { "label": "Marker Color", "description": "Select the color of the list markers.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary" }, "enable": "list_type == 'vertical' && list_marker != 'bullet'" }, "list_style": { "label": "Style", "description": "Select the list style.", "type": "select", "options": { "None": "", "Divider": "divider", "Striped": "striped" }, "enable": "list_type == 'vertical'" }, "list_size": { "label": "Size", "description": "Define the padding between items.", "type": "select", "options": { "Default": "", "Large": "large", "None": "collapse" }, "enable": "list_type == 'vertical'" }, "list_horizontal_separator": { "label": "Separator", "description": "Set the separator between list items.", "enable": "list_type == 'horizontal'" }, "column": { "label": "Columns", "description": "Set the number of list columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" } }, "column_divider": { "description": "Show a divider between list columns.", "type": "checkbox", "text": "Show dividers", "enable": "column" }, "column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the list columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "column" }, "list_element": { "label": "HTML Element", "description": "Set whether it's an ordered or unordered list.", "type": "select", "options": { "ul": "ul", "ol": "ol" }, "enable": "list_type == 'vertical'" }, "html_element": { "type": "checkbox", "text": "Wrap with nav element", "enable": "list_type == 'vertical'" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Bold": "text-bold", "Text Muted": "text-muted", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" } }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "show_image" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "icon": { "type": "icon", "label": "Icon", "description": "Click on the pencil to pick an icon from the icon library.", "enable": "show_image" }, "icon_color": { "label": "Icon Color", "description": "Set the icon color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image" }, "icon_width": { "label": "Icon Width", "description": "Set the icon width.", "enable": "show_image" }, "image_align": { "label": "Alignment", "description": "Align the image to the left or right.", "type": "select", "options": { "Left": "left", "Right": "right" }, "enable": "show_image" }, "image_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center the image.", "type": "checkbox", "text": "Center", "enable": "show_image" }, "link_style": { "label": "Style", "description": "This option doesn't apply unless a URL has been added to the item.", "type": "select", "options": { "None": "", "Muted": "muted", "Text": "text", "Heading": "heading", "Reset": "reset" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-item", ".el-content", ".el-image", ".el-link"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "show_image", "show_link"] }, { "title": "Settings", "fields": [ { "label": "List", "type": "group", "divider": true, "fields": [ "list_type", "list_marker", "list_marker_color", "list_style", "list_size", "list_horizontal_separator", "column", "column_divider", "column_breakpoint", "list_element", "html_element" ] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_style"] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_border", "image_svg_inline", "image_svg_animate", "image_svg_color", "image_align", "image_vertical_align" ] }, { "label": "Icon", "type": "group", "divider": true, "fields": ["icon", "icon_color", "icon_width"] }, { "label": "Link", "type": "group", "divider": true, "fields": ["link_style"] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/table_item/element.json 0000644 00000005167 15175623010 0013022 0 ustar 00 { "@import": "./element.php", "name": "table_item", "title": "Item", "width": 500, "placeholder": { "props": { "title": "Title", "meta": "", "content": "Lorem ipsum dolor sit amet.", "image": "" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": "${builder.image}", "image_alt": "${builder.image_alt}", "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "title", "meta", "content", "image", "image_alt", "link", "link_text" ] }, { "title": "Settings", "fields": [ { "label": "Image", "type": "group", "fields": ["image_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/table_item/templates/content.php 0000644 00000001270 15175623010 0014646 0 ustar 00 <?php if (in_array('image', $filtered)) : ?> <td> <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> </td> <?php endif ?> <?php if (in_array('title', $filtered)) : ?> <td><?= $props['title'] ?></td> <?php endif ?> <?php if (in_array('meta', $filtered)) : ?> <td><?= $props['meta'] ?></td> <?php endif ?> <?php if (in_array('content', $filtered)) : ?> <td><?= $props['content'] ?></td> <?php endif ?> <?php if (in_array('link', $filtered)) : ?> <td> <?php if ($props['link']) : ?> <a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a> <?php endif ?> </td> <?php endif ?> elements/table_item/templates/template-image.php 0000644 00000001267 15175623010 0016075 0 ustar 00 <?php if (!$props['image']) { return; } // Image $image = $this->el('image', [ 'class' => [ 'el-image', 'uk-preserve-width', 'uk-border-{image_border}', 'uk-box-shadow-{image_box_shadow}', 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, ]); echo $image($element); elements/table_item/templates/template.php 0000644 00000001415 15175623010 0015010 0 ustar 00 <?php foreach ($filtered as $j => $field) { echo $this->el('td', [ 'class' => [ 'uk-text-nowrap' => $field === 'link', "uk-text-nowrap {@table_width_{$field}: shrink}" => in_array($field, $text_fields), // Last column alignment 'uk-text-{table_last_align}[@m {@table_responsive: responsive}]' => array_search($field, $fields) > 1 && !isset($filtered[$j + 1]), // Widths "uk-[table {@table_width_{$field}: shrink}][width {@!table_width_{$field}: shrink}]-{table_width_{$field}}" => $i == 0 && in_array($field, $text_fields), 'uk-table-shrink' => $i == 0 && in_array($field, ['image', 'link']), ], ], $this->render("{$__dir}/template-{$field}"))->render($element); } elements/table_item/templates/template-meta.php 0000644 00000000430 15175623010 0015730 0 ustar 00 <?php if ($props['meta'] == '') { return; } // Meta $el = $this->el('div', [ 'class' => [ 'el-meta', 'uk-{meta_style} [uk-margin-remove {@meta_style: h1|h2|h3|h4|h5|h6}]', 'uk-text-{meta_color}', ], ]); echo $el($element, $props['meta']); elements/table_item/templates/template-content.php 0000644 00000000423 15175623010 0016456 0 ustar 00 <?php if ($props['content'] == '') { return; } // Content $el = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style} [uk-margin-remove {@content_style: h1|h2|h3|h4|h5|h6}]', ], ]); echo $el($element, $props['content']); elements/table_item/templates/template-title.php 0000644 00000000665 15175623010 0016135 0 ustar 00 <?php if ($props['title'] == '') { return; } // Title $el = $this->el('div', [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-font-{title_font_family}', 'uk-text-{title_color} {@!title_color: background}', ], ]); if ($element['title_color'] === 'background') { $props['title'] = "<span class=\"uk-text-background\">{$props['title']}</span>"; } echo $el($element, $props['title']); elements/table_item/templates/template-link.php 0000644 00000001243 15175623010 0015742 0 ustar 00 <?php $props['link_text'] = $props['link_text'] ?: $element['link_text']; if (!$props['link'] || !$props['link_text']) { return; } // Link $el = $this->el('a', [ 'class' => [ 'el-link', 'uk-{link_style: link-\w+}', 'uk-button uk-button-{!link_style: |link-\w+} [uk-button-{link_size}]', '{0} {@!link_style: |text|link-\w+} {@link_fullwidth}' => $element['table_responsive'] == 'responsive' ? 'uk-width-auto uk-width-1-1@m' : 'uk-width-1-1', ], 'href' => $props['link'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); echo $el($element, $props['link_text']); elements/table_item/element.php 0000644 00000000557 15175623010 0012636 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['title'] != '' || $node->props['meta'] != '' || $node->props['content'] != '' || $node->props['image']; }, ], ]; elements/table/templates/content.php 0000644 00000001430 15175623010 0013626 0 ustar 00 <?php $fields = ['image', 'title', 'meta', 'content', 'link']; // Find empty fields $filtered = array_values(array_filter($fields, fn($field) => array_any($children, fn($child) => $child->props[$field] != '') )); ?> <?php if (count($children)) : ?> <table> <?php if (array_any($filtered, fn($field) => $props["table_head_{$field}"])) : ?> <thead> <tr> <?php foreach ($filtered as $field) : ?> <th><?= $props["table_head_{$field}"] ?></th> <?php endforeach ?> </tr> </thead> <?php endif ?> <tbody> <?php foreach ($children as $child) : ?> <tr><?= $builder->render($child, ['element' => $props, 'filtered' => $filtered]) ?></tr> <?php endforeach ?> </tbody> </table> <?php endif ?> elements/table/templates/template.php 0000644 00000006060 15175623010 0013773 0 ustar 00 <?php $text_fields = ['title', 'meta', 'content']; switch ($props['table_order']) { case 1: $fields = ['meta', 'image', 'title', 'content', 'link']; break; case 2: $fields = ['title', 'image', 'meta', 'content', 'link']; break; case 3: $fields = ['image', 'title', 'content', 'meta', 'link']; break; case 4: $fields = ['image', 'title', 'meta', 'content', 'link']; break; case 5: $fields = ['title', 'meta', 'content', 'link', 'image']; break; case 6: $fields = ['meta', 'title', 'content', 'link', 'image']; break; } // Find empty fields $filtered = array_values(array_filter($fields, fn($field) => $props["show_{$field}"] && array_any($children, fn($child) => $child->props[$field] != '' ) )); $el = $this->el('div', [ // Responsive 'class' => [ 'uk-overflow-auto {@table_responsive: overflow}', ], ]); $table = $this->el('table', [ 'class' => [ // Style 'uk-table', 'uk-table-{table_style}', 'uk-table-hover {@table_hover}', 'uk-table-justify {@table_justify}', // Size 'uk-table-{table_size}', // Vertical align 'uk-table-middle {@table_vertical_align}', // Responsive 'uk-table-responsive {@table_responsive: responsive}', ], ]); ?> <?php if ($props['table_responsive'] == 'overflow') : ?> <?= $el($props, $attrs) ?> <?= $table($props) ?> <?php else : ?> <?= $table($props, $attrs) ?> <?php endif ?> <?php if (array_any($filtered, fn($field) => $props["table_head_{$field}"])) : ?> <thead> <tr> <?php foreach ($filtered as $i => $field) { $lastColumn = $i !== 0 && !isset($filtered[$i + 1]); echo $this->el('th', [ 'class' => [ // Last column alignment 'uk-text-{table_last_align}[@m {@table_responsive: responsive}]' => $lastColumn, // Text align need to be set for table heading 'uk-text-{text_align}[@{text_align_breakpoint} [uk-text-{text_align_fallback}] {@!text_align: justify}]' => !$lastColumn || !$props['table_last_align'], // Text nowrap 'uk-text-nowrap' => $field == 'link' || in_array($field, $text_fields) && $props["table_width_{$field}"] == 'shrink', ], ], $props["table_head_{$field}"])->render($props); } ?> </tr> </thead> <?php endif ?> <tbody> <?php foreach ($children as $i => $child) : ?> <tr class="el-item"><?= $builder->render($child, ['i' => $i, 'element' => $props, 'fields' => $fields, 'text_fields' => $text_fields, 'filtered' => $filtered]) ?></tr> <?php endforeach ?> </tbody> <?= $table->end() ?> <?php if ($props['table_responsive'] == 'overflow') : ?> <?= $el->end() ?> <?php endif ?> elements/table/images/iconSmall.svg 0000644 00000000470 15175623010 0013357 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="#444" d="M18,3H2v13h16V3z M7,15H3v-3h4V15z M7,11H3V8h4V11z M7,7H3V4h4V7z M12,15H7.96v-3H12V15z M12,11H7.96V8H12 V11z M12,7H7.96V4H12V7z M17,15h-4.04v-3H17V15z M17,11h-4.04V8H17V11z M17,7h-4.04V4H17V7z" /> </svg> elements/table/images/icon.svg 0000644 00000000507 15175623010 0012367 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="#444" d="M30,4H1v23h29V4z M10,25H3v-5h7V25z M10,18H3v-5h7V18z M10,11H3V6h7V11z M19,25h-7.04v-5H19V25z M19,18 h-7.04v-5H19V18z M19,11h-7.04V6H19V11z M28,25h-7.04v-5H28V25z M28,18h-7.04v-5H28V18z M28,11h-7.04V6H28V11z" /> </svg> elements/table/element.json 0000644 00000053742 15175623010 0012006 0 ustar 00 { "name": "table", "title": "Table", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_image": true, "show_link": true, "table_order": "1", "table_responsive": "overflow", "table_width_title": "shrink", "table_width_meta": "shrink", "meta_style": "text-meta", "image_svg_color": "emphasis", "link_text": "Read more", "link_style": "default" }, "placeholder": { "children": [ { "type": "table_item", "props": {} }, { "type": "table_item", "props": {} }, { "type": "table_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "table_item" }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_image": { "type": "checkbox", "text": "Show the image" }, "show_link": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the link" }, "table_style": { "label": "Style", "description": "Select the table style.", "type": "select", "options": { "Default": "", "Divider": "divider", "Striped": "striped" } }, "table_hover": { "type": "checkbox", "text": "Highlight the hovered row" }, "table_justify": { "type": "checkbox", "text": "Remove left and right padding" }, "table_size": { "label": "Size", "description": "Define the padding between table rows.", "type": "select", "options": { "Default": "", "Small": "small", "Large": "large" } }, "table_order": { "label": "Order", "description": "Define the order of the table cells.", "type": "select", "options": { "Meta, Image, Title, Content, Link": "1", "Title, Image, Meta, Content, Link": "2", "Image, Title, Content, Meta, Link": "3", "Image, Title, Meta, Content, Link": "4", "Title, Meta, Content, Link, Image": "5", "Meta, Title, Content, Link, Image": "6" } }, "table_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center table cells.", "type": "checkbox", "text": "Center" }, "table_responsive": { "label": "Responsive", "description": "Stack columns on small devices or enable overflow scroll for the container.", "type": "select", "options": { "Scroll overflow": "overflow", "Stacked": "responsive" } }, "table_last_align": { "label": "Last Column Alignment", "description": "Define the alignment of the last table column.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right" } }, "table_width_title": { "label": "Title Width", "description": "Define the width of the title cell.", "type": "select", "options": { "Expand": "", "Shrink": "shrink", "Small": "small", "Medium": "medium" }, "enable": "show_title" }, "table_width_meta": { "label": "Meta Width", "description": "Define the width of the meta cell.", "type": "select", "options": { "Expand": "", "Shrink": "shrink", "Small": "small", "Medium": "medium" }, "enable": "show_meta" }, "table_width_content": { "label": "Content Width", "description": "Define the width of the content cell.", "type": "select", "options": { "Expand": "", "Shrink": "shrink", "Small": "small", "Medium": "medium" }, "enable": "show_content" }, "table_head_title": { "label": "Title", "description": "Enter a table header text for the title column.", "attrs": { "placeholder": "Title" }, "enable": "show_title" }, "table_head_meta": { "label": "Meta", "description": "Enter a table header text for the meta column.", "attrs": { "placeholder": "Meta" }, "enable": "show_meta" }, "table_head_content": { "label": "Content", "description": "Enter a table header text for the content column.", "attrs": { "placeholder": "Content" }, "enable": "show_content" }, "table_head_image": { "label": "Image", "description": "Enter a table header text for the image column.", "attrs": { "placeholder": "Image" }, "enable": "show_image" }, "table_head_link": { "label": "Link", "description": "Enter a table header text for the link column.", "attrs": { "placeholder": "Link" }, "enable": "show_link" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "show_image" }, "image_box_shadow": { "label": "Box Shadow", "description": "Select the image box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "show_image" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_target": { "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Expand width to table cell", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)|^text$')" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-item", ".el-title", ".el-meta", ".el-content", ".el-image", ".el-link" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_image", "show_link" ] }, { "title": "Settings", "fields": [ { "label": "Table", "type": "group", "divider": true, "fields": [ "table_style", "table_hover", "table_justify", "table_size", "table_order", "table_vertical_align", "table_responsive", "table_last_align", "table_width_title", "table_width_meta", "table_width_content" ] }, { "label": "Table Head", "type": "group", "divider": true, "fields": [ "table_head_title", "table_head_meta", "table_head_content", "table_head_image", "table_head_link" ] }, { "label": "Title", "type": "group", "divider": true, "fields": ["title_style", "title_font_family", "title_color"] }, { "label": "Meta", "type": "group", "divider": true, "fields": ["meta_style", "meta_color"] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_style"] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_border", "image_box_shadow", "image_svg_inline", "image_svg_animate", "image_svg_color" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_text", "link_target", "link_style", "link_size", "link_fullwidth" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/table/updates.php 0000644 00000007174 15175623010 0011636 0 ustar 00 <?php namespace YOOtheme; return [ '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_inline_svg' => 'image_svg_inline', 'image_animate_svg' => 'image_svg_animate', ]); }, '1.18.0' => function ($node) { if ( !isset($node->props['meta_color']) && in_array(Arr::get($node->props, 'meta_style'), ['muted', 'primary'], true) ) { $node->props['meta_color'] = $node->props['meta_style']; $node->props['meta_style'] = ''; } }, ]; elements/accordion_item/element.php 0000644 00000001053 15175623010 0013500 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['image', 'link'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; } } // Don't render element if content fields are empty return $node->props['title'] != '' && ($node->props['content'] != '' || $node->props['image'] || $node->props['link']); }, ], ]; elements/accordion_item/templates/template.php 0000644 00000003436 15175623010 0015667 0 ustar 00 <?php $el = $this->el($props['item_element'] ?: 'div', [ 'class' => [ 'el-item', ], ]); // Content $content = $this->el('div', [ 'class' => [ 'uk-accordion-content', ], ]); // Image $image = $this->render("{$__dir}/template-image"); // Image align $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand', $element['image_grid_column_gap'] == $element['image_grid_row_gap'] ? 'uk-grid-{image_grid_column_gap}' : '[uk-grid-column-{image_grid_column_gap}] [uk-grid-row-{image_grid_row_gap}]', 'uk-flex-middle {@image_vertical_align}', ], 'uk-grid' => true, ]); $cell_image = $this->el('div', [ 'class' => [ 'uk-width-{image_grid_width}@{image_grid_breakpoint}', 'uk-flex-last@{image_grid_breakpoint} {@image_align: right}', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-margin-remove-first-child', ], ]); ?> <?= $el($element, $attrs) ?> <a class="el-title uk-accordion-title" href><?= $props['title'] ?></a> <?= $content($element) ?> <?php if ($image && in_array($element['image_align'], ['left', 'right'])) : ?> <?= $grid($element) ?> <?= $cell_image($element, $image) ?> <?= $cell_content($element) ?> <?= $this->render("{$__dir}/template-content") ?> <?= $this->render("{$__dir}/template-link") ?> <?= $cell_content->end() ?> <?= $grid->end() ?> <?php else : ?> <?= $element['image_align'] == 'top' ? $image : '' ?> <?= $this->render("{$__dir}/template-content") ?> <?= $this->render("{$__dir}/template-link") ?> <?= $element['image_align'] == 'bottom' ? $image : '' ?> <?php endif ?> <?= $content->end() ?> <?= $el->end() ?> elements/accordion_item/templates/template-image.php 0000644 00000001346 15175623010 0016745 0 ustar 00 <?php // Display if (!$props['image']) { return; } // Image echo $this->el('image', [ 'class' => [ 'el-image', 'uk-border-{image_border}', 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($props['image']) == 'svg', 'uk-margin[-{image_margin}]-top {@!image_margin: remove} {@image_align: bottom}' => $props['content'], ], 'src' => $props['image'], 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $props['image_focal_point'], 'uk-svg' => (bool) $element['image_svg_inline'], 'thumbnail' => true, ])->render($element); elements/accordion_item/templates/template-content.php 0000644 00000001026 15175623010 0017330 0 ustar 00 <?php namespace YOOtheme; if ($props['content'] == '') { return; } // Content echo $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-text-{content_style}', 'uk-dropcap {@content_dropcap}', 'uk-column-{content_column}[@{content_column_breakpoint}]', 'uk-column-divider {@content_column} {@content_column_divider}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove} {@image_align: top}' => $props['image'], ], ])->render($element, $props['content']); elements/accordion_item/templates/content.php 0000644 00000000663 15175623010 0015525 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['title'] != '') : ?> <h3><?= $props['title'] ?></h3> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/accordion_item/templates/template-link.php 0000644 00000001272 15175623010 0016616 0 ustar 00 <?php if (!$props['link'] || !($props['link_text'] || $element['link_text'])) { return; } // Link $link = $this->el('a', [ 'class' => [ 'el-link', 'uk-{link_style: link-\w+}', 'uk-button uk-button-{!link_style: |link-\w+} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', ], 'href' => $props['link'], 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', ], ]); ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> elements/accordion_item/element.json 0000644 00000005575 15175623010 0013677 0 ustar 00 { "@import": "./element.php", "name": "accordion_item", "title": "Item", "width": 500, "placeholder": { "props": { "title": "Title", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "image": "" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": "${builder.image}", "image_alt": "${builder.image_alt}", "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "item_element": "${builder.html_element_item}", "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image" }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["title", "content", "image", "image_alt", "link", "link_text"] }, { "title": "Settings", "fields": [ { "label": "Item", "type": "group", "divider": true, "fields": [ "item_element" ] }, { "label": "Image", "type": "group", "fields": ["image_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/divider/templates/template.php 0000644 00000000631 15175623010 0014330 0 ustar 00 <?php $el = $this->el($props['divider_element'], [ 'class' => [ 'uk-divider-{divider_style}', 'uk-hr {!divider_style} {@divider_element: div}', 'uk-text-{divider_align}[@{divider_align_breakpoint} [uk-text-{divider_align_fallback}] {@!divider_align: justify}] {@divider_style: small}', 'uk-margin-remove {@position: absolute}', ], ]); echo $el($props, $attrs, ''); elements/divider/templates/content.php 0000644 00000000106 15175623010 0014164 0 ustar 00 <?php if ($props['divider_element'] == 'hr') : ?> <hr> <?php endif ?> elements/divider/element.json 0000644 00000013670 15175623010 0012341 0 ustar 00 { "name": "divider", "title": "Divider", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "divider_element": "hr" }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "divider_style": { "label": "Style", "description": "Choose a divider style.", "type": "select", "options": { "None": "", "Icon": "icon", "Small": "small", "Vertical": "vertical" } }, "divider_element": { "label": "HTML Element", "description": "Set a thematic break between paragraphs or give it no semantic meaning.", "type": "select", "options": { "hr": "hr", "div": "div" } }, "divider_align": { "label": "Alignment", "description": "Center, left and right alignment may depend on a breakpoint and require a fallback.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right" }, "enable": "divider_style == 'small'" }, "divider_align_breakpoint": { "label": "Alignment Breakpoint", "description": "Define the device width from which the alignment will apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "divider_style == 'small' && divider_align" }, "divider_align_fallback": { "label": "Alignment Fallback", "description": "Define an alignment fallback for device widths below the breakpoint.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right" }, "enable": "divider_style == 'small' && divider_align && divider_align_breakpoint" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Settings", "fields": [ { "label": "Divider", "type": "group", "divider": true, "fields": [ "divider_style", "divider_element", "divider_align", "divider_align_breakpoint", "divider_align_fallback" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/divider/updates.php 0000644 00000000245 15175623010 0012165 0 ustar 00 <?php namespace YOOtheme; return [ '1.20.0-beta.4' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, ]; elements/divider/images/iconSmall.svg 0000644 00000000643 15175623010 0013720 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <line fill="none" stroke="#444" stroke-width="1.1" x1="7.5" y1="7" x2="12.5" y2="12" /> <line fill="none" stroke="#444" stroke-width="1.1" x1="12.5" y1="7" x2="7.5" y2="12" /> <line fill="none" stroke="#444" x1="14" y1="9.5" x2="20" y2="9.5" /> <line fill="none" stroke="#444" x1="0" y1="9.5" x2="6" y2="9.5" /> </svg> elements/divider/images/icon.svg 0000644 00000000671 15175623010 0012730 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <line fill="none" stroke="#444" stroke-width="2" x1="11" y1="11" x2="19" y2="19" /> <line fill="none" stroke="#444" stroke-width="2" x1="19" y1="11" x2="11" y2="19" /> <line fill="none" stroke="#444" stroke-width="2" x1="21" y1="15" x2="30" y2="15" /> <line fill="none" stroke="#444" stroke-width="2" x1="0" y1="15" x2="9" y2="15" /> </svg> elements/subnav_item/element.json 0000644 00000002040 15175623010 0013214 0 ustar 00 { "@import": "./element.php", "name": "subnav_item", "title": "Item", "width": 500, "placeholder": { "props": { "content": "Item" } }, "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Content", "source": true }, "link": "${builder.link}", "link_target": "${builder.link_target}", "active": { "label": "Active", "type": "checkbox", "text": "Active item", "source": true }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "link", "link_target", "active"] }, "${builder.advancedItem}" ] } } } elements/subnav_item/templates/template.php 0000644 00000000726 15175623010 0015223 0 ustar 00 <?php // Link $link = $this->el('a', [ 'class' => [ 'el-link', 'uk-link-{link_style}', ], ]); ?> <?php if ($props['link']) : ?> <?= $link($element, [ 'href' => $props['link'], 'uk-scroll' => str_contains((string) $props['link'], '#'), 'target' => $props['link_target'] ? '_blank' : '', ], $props['content']) ?> <?php else : ?> <a class="el-content uk-disabled"><?= $props['content'] ?></a> <?php endif ?> elements/subnav_item/templates/content.php 0000644 00000000206 15175623010 0015053 0 ustar 00 <?php if ($props['content'] != '' || $props['link']) : ?> <a href="<?= $props['link'] ?>"><?= $props['content'] ?></a> <?php endif ?> elements/subnav_item/element.php 0000644 00000000351 15175623010 0013035 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return $node->props['content'] != ''; }, ], ]; elements/countdown/templates/template.php 0000644 00000002136 15175623010 0014724 0 ustar 00 <?php $el = $this->el('div', [ 'class' => [ 'uk-child-width-auto', $props['grid_column_gap'] == $props['grid_row_gap'] ? 'uk-grid-{grid_column_gap}' : '[uk-grid-column-{grid_column_gap}] [uk-grid-row-{grid_row_gap}]', 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]]', ], 'uk-countdown' => [ 'date: {date}', ], 'uk-grid' => true, ]); // Label $label = $this->el('div', [ 'class' => [ 'uk-countdown-label', 'uk-text-center', 'uk-margin[-{label_margin}]', ], ]); ?> <?= $el($props, $attrs) ?> <?php foreach (['days', 'hours', 'minutes', 'seconds'] as $unit) : ?> <div> <div class="uk-countdown-number uk-countdown-<?= $unit ?>"></div> <?php if ($props['show_label']) : ?> <?= $label($props, $props["label_{$unit}"] ?: ucfirst($unit)) ?> <?php endif ?> </div> <?php if ($props['show_separator'] && $unit !== 'seconds') : ?> <div class="uk-countdown-separator">:</div> <?php endif ?> <?php endforeach ?> <?= $el->end() ?> elements/countdown/templates/content.php 0000644 00000000162 15175623010 0014560 0 ustar 00 <?php if ($props['date']) : ?> <time datetime="<?= $props['date'] ?>"><?= $props['date'] ?></time> <?php endif ?> elements/countdown/images/iconSmall.svg 0000644 00000001123 15175623010 0014304 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="1.1" d="M10,4.375V1c4.971,0,9,4.028,9,9c0,4.971-4.029,9-9,9 c-4.971,0-9-4.029-9-9c0-2.492,1.018-4.749,2.652-6.375" /> <path fill="#444" d="M11.407,10.734c0,0.705-0.566,1.279-1.272,1.279c-0.396,0-0.749-0.18-0.978-0.455 c0,0-0.052-0.076-0.142-0.207c-0.719-1.055-3.943-5.775-3.943-5.775s5.829,4.14,5.858,4.168 C11.221,9.972,11.407,10.333,11.407,10.734z" /> <path fill="#444" d="M10.609,9.766l-0.006,0.006C10.578,9.748,10.609,9.766,10.609,9.766z" /> </svg> elements/countdown/images/icon.svg 0000644 00000001057 15175623010 0013321 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#444" stroke-width="2" d="M15,8V2c7.18,0,13,5.82,13,13c0,7.18-5.82,13-13,13 S2,22.18,2,15c0-3.6,1.47-6.86,3.83-9.21" /> <path fill="#444" d="M17.033,16.06c0,1.021-0.82,1.851-1.84,1.851c-0.57,0-1.08-0.26-1.41-0.66c0,0-0.074-0.107-0.204-0.298 C12.541,15.431,7.883,8.61,7.883,8.61s8.421,5.98,8.461,6.02C16.764,14.96,17.033,15.48,17.033,16.06z" /> <path fill="#444" d="M15.99,14.62l-0.01,0.01C15.94,14.59,15.99,14.62,15.99,14.62z" /> </svg> elements/countdown/element.json 0000644 00000014537 15175623010 0012736 0 ustar 00 { "@import": "./element.php", "name": "countdown", "title": "Countdown", "group": "basic", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "width": 500, "defaults": { "show_separator": true, "show_label": true, "grid_column_gap": "small", "grid_row_gap": "small", "label_margin": "small", "margin": "default" }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "date": { "label": "Date", "type": "datetime", "description": "Enter a date for the countdown to expire.", "source": true }, "label_days": { "label": "Labels", "attrs": { "placeholder": "Days" } }, "label_hours": { "attrs": { "placeholder": "Hours" } }, "label_minutes": { "attrs": { "placeholder": "Minutes" } }, "label_seconds": { "attrs": { "placeholder": "Seconds" } }, "show_label": { "description": "Enter labels for the countdown time.", "type": "checkbox", "text": "Show Labels" }, "grid_column_gap": { "label": "Column Gap", "description": "Set the size of the column gap between the numbers.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "grid_row_gap": { "label": "Row Gap", "description": "Set the size of the row gap between the numbers.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "show_separator": { "label": "Separator", "description": "Show a separator between the numbers.", "type": "checkbox", "text": "Show Separators" }, "label_margin": { "label": "Label Margin", "description": "Set the margin between the countdown and the label text.", "type": "select", "options": { "Default": "", "Small": "small", "Medium": "medium", "None": "remove" }, "enable": "show_label" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "text_align": "${builder.text_align}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "date", "label_days", "label_hours", "label_minutes", "label_seconds", "show_label" ] }, { "title": "Settings", "fields": [ { "label": "Countdown", "type": "group", "divider": true, "fields": [ "grid_column_gap", "grid_row_gap", "show_separator", "label_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/countdown/element.php 0000644 00000000541 15175623010 0012542 0 ustar 00 <?php namespace YOOtheme; return [ 'placeholder' => [ 'props' => [ 'date' => date('Y-m-d', strtotime('+1 week')), ], ], 'transforms' => [ 'render' => function ($node) { // Don't render element if content fields are empty return (bool) $node->props['date']; }, ], ]; elements/countdown/updates.php 0000644 00000000356 15175623010 0012562 0 ustar 00 <?php namespace YOOtheme; return [ '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'gutter' => fn($value) => ['grid_column_gap' => $value, 'grid_row_gap' => $value], ]); }, ]; elements/row/element.php 0000644 00000000276 15175623010 0011336 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { $node->props['parent'] = $params['parent']->type; }, ], ]; elements/row/element.json 0000644 00000121075 15175623010 0011521 0 ustar 00 { "@import": "./element.php", "name": "row", "title": "Row", "container": true, "width": 500, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "layout": { "label": "Layout", "type": "select-img", "title": "Select a grid layout", "options": { "": { "label": "Whole", "src": "${url:images/whole.svg}" }, "1-2,1-2": { "label": "Halves", "src": "${url:images/halves.svg}" }, "1-3,1-3,1-3": { "label": "Thirds", "src": "${url:images/thirds.svg}" }, "1-4,1-4,1-4,1-4|1-2,1-2,1-2,1-2": { "label": "Quarters", "src": "${url:images/quarters.svg}" }, "1-5,1-5,1-5,1-5,1-5|1-2,1-2,1-3,1-3,1-3": { "label": "Fifths", "src": "${url:images/fifths.svg}" }, "1-6,1-6,1-6,1-6,1-6,1-6|1-3,1-3,1-3,1-3,1-3,1-3": { "label": "Sixths", "src": "${url:images/sixths.svg}" }, "2-3,1-3": { "label": "Thirds 2-1", "src": "${url:images/thirds-2-1.svg}" }, "1-3,2-3": { "label": "Thirds 1-2", "src": "${url:images/thirds-1-2.svg}" }, "3-4,1-4": { "label": "Quarters 3-1", "src": "${url:images/quarters-3-1.svg}" }, "1-4,3-4": { "label": "Quarters 1-3", "src": "${url:images/quarters-1-3.svg}" }, "1-2,1-4,1-4|1-1,1-2,1-2": { "label": "Quarters 2-1-1", "src": "${url:images/quarters-2-1-1.svg}" }, "1-4,1-4,1-2|1-2,1-2,1-1": { "label": "Quarters 1-1-2", "src": "${url:images/quarters-1-1-2.svg}" }, "1-4,1-2,1-4": { "label": "Quarters 1-2-1", "src": "${url:images/quarters-1-2-1.svg}" }, "2-5,3-5": { "label": "Fifths 2-3", "src": "${url:images/fifths-2-3.svg}" }, "3-5,2-5": { "label": "Fifths 3-2", "src": "${url:images/fifths-3-2.svg}" }, "1-5,4-5": { "label": "Fifths 1-4", "src": "${url:images/fifths-1-4.svg}" }, "4-5,1-5": { "label": "Fifths 4-1", "src": "${url:images/fifths-4-1.svg}" }, "3-5,1-5,1-5|1-1,1-2,1-2": { "label": "Fifths 3-1-1", "src": "${url:images/fifths-3-1-1.svg}" }, "1-5,1-5,3-5|1-2,1-2,1-1": { "label": "Fifths 1-1-3", "src": "${url:images/fifths-1-1-3.svg}" }, "1-5,3-5,1-5": { "label": "Fifths 1-3-1", "src": "${url:images/fifths-1-3-1.svg}" }, "2-5,1-5,1-5,1-5|1-1,1-3,1-3,1-3": { "label": "Fifths 2-1-1-1", "src": "${url:images/fifths-2-1-1-1.svg}" }, "1-5,1-5,1-5,2-5|1-3,1-3,1-3,1-1": { "label": "Fifths 1-1-1-2", "src": "${url:images/fifths-1-1-1-2.svg}" }, "1-6,5-6|1-5,4-5": { "label": "Sixths 1-5", "src": "${url:images/sixths-1-5.svg}" }, "5-6,1-6|4-5,1-5": { "label": "Sixths 5-1", "src": "${url:images/sixths-5-1.svg}" }, "large,expand": { "label": "Fixed-Left", "src": "${url:images/fixed-left.svg}" }, "expand,large": { "label": "Fixed-Right", "src": "${url:images/fixed-right.svg}" }, "expand,large,expand": { "label": "Fixed-Inner", "src": "${url:images/fixed-inner.svg}" }, "large,expand,large": { "label": "Fixed-Outer", "src": "${url:images/fixed-outer.svg}" } } }, "_layout": { "text": "Edit Layout", "description": "Customize the column widths of the selected layout and set the column order. Changing the layout will reset all customizations.", "type": "button-panel", "panel": "builder-row-layout" }, "columns": { "label": "Columns", "description": "Define a background style or an image of a column and set the vertical alignment for its content.", "type": "children" }, "column_gap": { "label": "Column Gap", "description": "Set the size of the gap between the grid columns.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "row_gap": { "label": "Row Gap", "description": "Set the size of the gap between the grid rows.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" } }, "divider": { "label": "Divider", "description": "Show a divider between grid columns.", "type": "checkbox", "text": "Show dividers", "enable": "column_gap != 'collapse' && row_gap != 'collapse'" }, "alignment": { "label": "Alignment", "description": "Expand columns equally to always fill remaining space within the row, center them or align them to the left.", "type": "select", "options": { "Justify": "", "Left": "left", "Center": "center" } }, "width": { "label": "Max Width", "type": "select", "options": { "Default": "default", "X-Small": "xsmall", "Small": "small", "Large": "large", "X-Large": "xlarge", "Expand": "expand", "None": "" } }, "padding_remove_horizontal": { "description": "Set the maximum content width. Note: The section may already have a maximum width, which you cannot exceed.", "type": "checkbox", "text": "Remove horizontal padding", "enable": "width && width != 'expand'" }, "width_expand": { "label": "Expand One Side", "description": "Expand the width of one side to the left or right while the other side keeps within the constraints of the max width.", "type": "select", "options": { "Don't expand": "", "To left": "left", "To right": "right" }, "enable": "width && width != 'expand'" }, "height": { "type": "select", "options": { "None": "", "Pixels": "pixels", "Viewport": "viewport" } }, "height_viewport": { "type": "number", "attrs": { "placeholder": "100", "min": 0, "step": 10 }, "enable": "height" }, "height_offset_top": { "description": "Set a fixed height for all columns. They will keep their height when stacking. Optionally, subtract the header height to fill the first visible viewport.", "type": "checkbox", "text": "Subtract height above row", "enable": "height == 'viewport' && (height_viewport || 0) <= 100" }, "margin": { "label": "Margin", "type": "select", "options": { "Keep existing": "", "Small": "small", "Default": "default", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove-vertical" } }, "margin_remove_top": { "type": "checkbox", "text": "Remove top margin", "enable": "margin != 'remove-vertical'" }, "margin_remove_bottom": { "description": "Set the vertical margin. Note: The first grid's top margin and the last grid's bottom margin are always removed. Define those in the section settings instead.", "type": "checkbox", "text": "Remove bottom margin", "enable": "margin != 'remove-vertical'" }, "html_element": "${builder.html_element}", "parallax": { "label": "Column Parallax", "description": "Set a parallax animation to move columns with different heights until they justify at the bottom. Mind that this disables the vertical alignment of elements in the columns.", "type": "checkbox", "text": "Justify columns at the bottom" }, "parallax_start": { "label": "Start", "enable": "parallax" }, "parallax_end": { "label": "End", "enable": "parallax" }, "status": { "label": "Status", "description": "Disable the row and publish it later.", "type": "checkbox", "text": "Disable row", "attrs": { "true-value": "disabled", "false-value": "" } }, "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-row</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-row"] } } }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Settings", "fields": [ "layout", "_layout", "columns", "column_gap", "row_gap", "divider", "alignment", "width", "padding_remove_horizontal", "width_expand", { "label": "Column Height", "name": "_height", "type": "grid", "width": "3-4,1-4", "gap": "small", "fields": ["height", "height_viewport"] }, "height_offset_top", "margin", "margin_remove_top", "margin_remove_bottom", "html_element", "parallax", { "description": "The animation starts when the row enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the row's height.", "name": "_parallax", "type": "grid", "width": "1-2", "fields": ["parallax_start", "parallax_end"] } ] }, { "title": "Advanced", "fields": ["status", "source", "id", "class", "attributes", "css"] } ] } }, "panels": { "builder-row-layout": { "title": "Column Layout", "width": 500, "fields": [ { "label": "Column 1", "type": "group", "divider": true, "fields": [ { "label": "Phone Portrait", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 0, "field": { "name": "width_default", "type": "select", "options": "${builder.column_width_options_default}" } }, { "label": "Phone Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 0, "field": { "name": "width_small", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Tablet Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 0, "field": { "name": "width_medium", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Desktop", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 0, "field": { "name": "width_large", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Large Screen", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 0, "field": { "name": "width_xlarge", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Order First", "type": "child-prop", "description": "Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.", "index": 0, "field": { "name": "order_first", "type": "select", "options": "${builder.column_order_first_options}" } } ] }, { "label": "Column 2", "type": "group", "divider": true, "fields": [ { "label": "Phone Portrait", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 1, "field": { "name": "width_default", "type": "select", "options": "${builder.column_width_options_default}" } }, { "label": "Phone Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 1, "field": { "name": "width_small", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Tablet Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 1, "field": { "name": "width_medium", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Desktop", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 1, "field": { "name": "width_large", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Large Screen", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 1, "field": { "name": "width_xlarge", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Order First", "description": "Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.", "type": "child-prop", "index": 1, "field": { "name": "order_first", "type": "select", "options": "${builder.column_order_first_options}" } } ], "show": "this.node.children.length > 1" }, { "label": "Column 3", "type": "group", "divider": true, "fields": [ { "label": "Phone Portrait", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 2, "field": { "name": "width_default", "type": "select", "options": "${builder.column_width_options_default}" } }, { "label": "Phone Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 2, "field": { "name": "width_small", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Tablet Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 2, "field": { "name": "width_medium", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Desktop", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 2, "field": { "name": "width_large", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Large Screen", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 2, "field": { "name": "width_xlarge", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Order First", "description": "Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.", "type": "child-prop", "index": 2, "field": { "name": "order_first", "type": "select", "options": "${builder.column_order_first_options}" } } ], "show": "this.node.children.length > 2" }, { "label": "Column 4", "type": "group", "divider": true, "fields": [ { "label": "Phone Portrait", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 3, "field": { "name": "width_default", "type": "select", "options": "${builder.column_width_options_default}" } }, { "label": "Phone Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 3, "field": { "name": "width_small", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Tablet Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 3, "field": { "name": "width_medium", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Desktop", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 3, "field": { "name": "width_large", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Large Screen", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 3, "field": { "name": "width_xlarge", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Order First", "description": "Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.", "type": "child-prop", "index": 3, "field": { "name": "order_first", "type": "select", "options": "${builder.column_order_first_options}" } } ], "show": "this.node.children.length > 3" }, { "label": "Column 5", "type": "group", "divider": true, "fields": [ { "label": "Phone Portrait", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 4, "field": { "name": "width_default", "type": "select", "options": "${builder.column_width_options_default}" } }, { "label": "Phone Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 4, "field": { "name": "width_small", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Tablet Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 4, "field": { "name": "width_medium", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Desktop", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 4, "field": { "name": "width_large", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Large Screen", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 4, "field": { "name": "width_xlarge", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Order First", "description": "Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.", "type": "child-prop", "index": 4, "field": { "name": "order_first", "type": "select", "options": "${builder.column_order_first_options}" } } ], "show": "this.node.children.length > 4" }, { "label": "Column 6", "type": "group", "fields": [ { "label": "Phone Portrait", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 5, "field": { "name": "width_default", "type": "select", "options": "${builder.column_width_options_default}" } }, { "label": "Phone Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 5, "field": { "name": "width_small", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Tablet Landscape", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 5, "field": { "name": "width_medium", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Desktop", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 5, "field": { "name": "width_large", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Large Screen", "description": "Set the column width for each breakpoint. Mix fraction widths or combine fixed widths with the <i>Expand</i> value. If no value is selected, the column width of the next smaller screen size is applied. The combination of widths should always take the full width.", "type": "child-prop", "index": 5, "field": { "name": "width_xlarge", "type": "select", "options": "${builder.column_width_options}" } }, { "label": "Order First", "description": "Select the breakpoint from which the column will start to appear before other columns. On smaller screen sizes, the column will appear in the natural order.", "type": "child-prop", "index": 5, "field": { "name": "order_first", "type": "select", "options": "${builder.column_order_first_options}" } } ], "show": "this.node.children.length > 5" } ] } } } elements/row/updates.php 0000644 00000016762 15175623010 0011361 0 ustar 00 <?php namespace YOOtheme; return [ // Remove obsolete props '4.5.0-beta.0.4' => function ($node) { unset( $node->props['match'], $node->props['vertical_align'] ); }, '4.3.0-beta.0.5' => function ($node, $params) { if ($height = Arr::get($node->props, 'height')) { $node->props['height'] = 'viewport'; if ( ($params['updateContext']['sectionIndex'] ?? 0) < 2 && empty($params['updateContext']['height']) ) { $node->props['height_offset_top'] = true; } if ($height === 'percent') { $node->props['height_viewport'] = 80; } $params['updateContext']['height'] = true; } }, '4.3.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'match')) { $panels = []; $columns = []; foreach ($node->children as $column) { foreach ($column->children ?? [] as $element) { if ( $element->type === 'panel' && str_starts_with($element->props->panel_style ?? '', 'card-') ) { if (!in_array($column, $columns, true)) { $columns[] = $column; } $panels[] = $element; } } } if (count($columns) > 1) { foreach ($columns as $column) { unset($column->props->vertical_align); } foreach ($panels as $panel) { $panel->props->height_expand = true; } } } unset($node->props['match']); }, '2.3.0-beta.1.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ($style == 'fjord') { if (Arr::get($node->props, 'width') === 'default') { $node->props['width'] = 'large'; } } }, '2.1.0-beta.1.1' => function ($node) { if (($node->props['layout'] ?? '') === '1-1') { unset($node->props['layout']); } }, '2.1.0-beta.0.1' => function ($node) { if (empty($node->props['layout'])) { $node->props['layout'] = '1-1'; } switch ($node->props['layout']) { case ',': $node->props['layout'] = '1-2,1-2'; break; case ',,': $node->props['layout'] = '1-3,1-3,1-3'; break; case 'fixed,': $node->props['layout'] = 'large,expand'; break; case ',fixed': $node->props['layout'] = 'expand,large'; break; case ',fixed,': $node->props['layout'] = 'expand,large,expand'; break; case 'fixed,,fixed': $node->props['layout'] = 'large,expand,large'; break; } if (empty($node->props['breakpoint'])) { $node->props['breakpoint'] = 'm'; } $breakpoint = $node->props['breakpoint']; $breakpoints = array_slice( ['xlarge', 'large', 'medium', 'small', 'default'], array_search($breakpoint, ['xl', 'l', 'm', 's', '']), ); if (!empty($node->props['layout'])) { $layouts = explode('|', $node->props['layout']); while ( count($layouts) + 1 > count($breakpoints) && isset($layouts[count($layouts) - 1]) ) { unset($layouts[count($layouts) - 1]); } foreach ($layouts as $widths) { $breakpoint = array_shift($breakpoints); $prop = "width_{$breakpoint}"; foreach (explode(',', $widths) as $index => $width) { if (!isset($node->children[$index]->props)) { continue; } if (empty($node->props['fixed_width'])) { $node->props['fixed_width'] = 'large'; } if ($node->props['fixed_width'] === 'xxlarge') { $node->props['fixed_width'] = '2xlarge'; } if (is_array($node->children[$index]->props)) { $node->children[$index]->props = (object) $node->children[$index]->props; } $node->children[$index]->props->$prop = $width === 'large' ? $node->props['fixed_width'] : $width; } } } $count = count($node->children); if (!empty($node->props['order_last']) && $count > 1) { if (is_array($node->children[$count - 1]->props)) { $node->children[$count - 1]->props = (object) $node->children[$count - 1]->props; } $node->children[$count - 1]->props->order_first = $node->props['breakpoint'] ?: 'xs'; } unset( $node->props['breakpoint'], $node->props['fixed_width'], $node->props['order_last'], ); }, '2.0.0-beta.5.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if (!in_array($style, ['jack-baker', 'morgan-consulting', 'vibe'])) { if (Arr::get($node->props, 'width') === 'large') { $node->props['width'] = 'xlarge'; } } if ( in_array($style, [ 'craft', 'district', 'florence', 'makai', 'matthew-taylor', 'pinewood-lake', 'summit', 'tomsen-brody', 'trek', 'vision', 'yard', ]) ) { if (Arr::get($node->props, 'width') === 'default') { $node->props['width'] = 'large'; } } }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'gutter' => fn($value) => ['column_gap' => $value, 'row_gap' => $value], ]); if (empty($node->props['layout'])) { return; } switch ($node->props['layout']) { case '2-3,': $node->props['layout'] = '2-3,1-3'; break; case ',2-3': $node->props['layout'] = '1-3,2-3'; break; case '3-4,': $node->props['layout'] = '3-4,1-4'; break; case ',3-4': $node->props['layout'] = '1-4,3-4'; break; case '1-2,,|1-1,1-2,1-2': $node->props['layout'] = '1-2,1-4,1-4|1-1,1-2,1-2'; break; case ',,1-2|1-2,1-2,1-1': $node->props['layout'] = '1-4,1-4,1-2|1-2,1-2,1-1'; break; case ',1-2,': case ',1-2,|1-2,1-1,1-2': $node->props['layout'] = '1-4,1-2,1-4'; break; case ',,,|1-2,1-2,1-2,1-2': $node->props['layout'] = '1-4,1-4,1-4,1-4|1-2,1-2,1-2,1-2'; break; } }, ]; elements/row/templates/content.php 0000644 00000000051 15175623010 0013344 0 ustar 00 <?php echo $builder->render($children); elements/row/templates/template.php 0000644 00000003251 15175623010 0013512 0 ustar 00 <?php $el = $this->el(!$props['width'] && $props['html_element'] ? $props['html_element'] : 'div', $attrs); $el->attr([ 'class' => [ 'uk-grid', 'tm-grid-expand {!alignment}', 'uk-flex-center {@alignment:center}', $props['column_gap'] == $props['row_gap'] ? 'uk-grid-{column_gap}' : '[uk-grid-column-{column_gap}] [uk-grid-row-{row_gap}]', 'uk-grid-divider {@divider} {@!column_gap:collapse} {@!row_gap:collapse}' => count($children) > 1, 'uk-child-width-1-1 {@!layout}', 'uk-flex-top {@parallax}', ], 'uk-grid' => $props['parallax'] ? [ 'parallax: 0;', 'parallax-justify: true;', 'parallax-start: {parallax_start};', 'parallax-end: {parallax_end};', ] : count($children) > 1, ]); // Margin $margin = $this->el($props['html_element'] ?: 'div', [ 'class' => [ 'uk-grid-margin[-{row_gap}] {@!margin} {@row_gap: |small|medium|large}', 'uk-margin {@margin: default}', 'uk-margin-{!margin: |default}', 'uk-margin-remove-top {@margin_remove_top}{@!margin: remove-vertical}', 'uk-margin-remove-bottom {@margin_remove_bottom}{@!margin: remove-vertical}', 'uk-container {@width}', 'uk-container-{width}{@width: xsmall|small|large|xlarge|expand}', 'uk-padding-remove-horizontal' => ($props['padding_remove_horizontal'] && $props['width'] && $props['width'] != 'expand') || $props['parent'] == 'layout', 'uk-container-expand-{width_expand} {@width} {@!width:expand}', ], ]); echo $props['width'] ? $margin($props, $el($props, $builder->render($children))) : $el($props, $margin->attrs, $builder->render($children)); elements/row/images/fifths-2-1-1-1.svg 0000644 00000000715 15175623010 0013234 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="46" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="55" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="82" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="109" y="1" /> </svg> elements/row/images/whole.svg 0000644 00000000271 15175623010 0012273 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="128" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> </svg> elements/row/images/quarters-1-3.svg 0000644 00000000424 15175623010 0013321 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="94" height="66" fill="none" stroke="#444" stroke-width="2" x="35" y="1" /> </svg> elements/row/images/quarters.svg 0000644 00000000715 15175623010 0013026 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="35" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="69" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="103" y="1" /> </svg> elements/row/images/fifths-3-1-1.svg 0000644 00000000561 15175623010 0013076 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="73" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="82" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="109" y="1" /> </svg> elements/row/images/sixths.svg 0000644 00000001205 15175623010 0012475 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="24" y="1" /> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="47" y="1" /> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="70" y="1" /> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="93" y="1" /> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="116" y="1" /> </svg> elements/row/images/thirds-2-1.svg 0000644 00000000424 15175623010 0012747 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="83" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="35" height="66" fill="none" stroke="#444" stroke-width="2" x="94" y="1" /> </svg> elements/row/images/fixed-outer.svg 0000644 00000001227 15175623010 0013412 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="103" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="56" height="66" fill="none" stroke="#444" stroke-width="2" x="37" y="1" /> <polyline fill="none" stroke="#444" points="78,30 83,35.5 78,41" /> <polyline fill="none" stroke="#444" points="52,41 47,35.5 52,30" /> <line fill="none" stroke="#444" x1="72" y1="35.5" x2="83" y2="35.5" /> <line fill="none" stroke="#444" x1="58" y1="35.5" x2="47" y2="35.5" /> </svg> elements/row/images/quarters-1-2-1.svg 0000644 00000000561 15175623010 0013460 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="103" y="1" /> <rect width="60" height="66" fill="none" stroke="#444" stroke-width="2" x="35" y="1" /> </svg> elements/row/images/halves.svg 0000644 00000000424 15175623010 0012437 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="59" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="59" height="66" fill="none" stroke="#444" stroke-width="2" x="70" y="1" /> </svg> elements/row/images/fixed-inner.svg 0000644 00000001700 15175623010 0013363 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="52" y="1" /> <rect width="43" height="66" fill="none" stroke="#444" stroke-width="2" x="86" y="1" /> <rect width="43" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <polyline fill="none" stroke="#444" points="32,30 37,35.5 32,41" /> <polyline fill="none" stroke="#444" points="13,41 8,35.5 13,30" /> <polyline fill="none" stroke="#444" points="117,30 122,35.5 117,41" /> <polyline fill="none" stroke="#444" points="98,41 93,35.5 98,30" /> <line fill="none" stroke="#444" x1="26" y1="35.5" x2="37" y2="35.5" /> <line fill="none" stroke="#444" x1="19" y1="35.5" x2="8" y2="35.5" /> <line fill="none" stroke="#444" x1="111" y1="35.5" x2="122" y2="35.5" /> <line fill="none" stroke="#444" x1="104" y1="35.5" x2="93" y2="35.5" /> </svg> elements/row/images/fifths-1-1-3.svg 0000644 00000000560 15175623010 0013075 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="28" y="1" /> <rect width="73" height="66" fill="none" stroke="#444" stroke-width="2" x="55" y="1" /> </svg> elements/row/images/sixths-1-5.svg 0000644 00000000425 15175623010 0013000 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="107" height="66" fill="none" stroke="#444" stroke-width="2" x="22" y="1" /> </svg> elements/row/images/quarters-2-1-1.svg 0000644 00000000561 15175623010 0013460 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="60" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="69" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="103" y="1" /> </svg> elements/row/images/fifths-1-3-1.svg 0000644 00000000561 15175623010 0013076 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="73" height="66" fill="none" stroke="#444" stroke-width="2" x="28" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="109" y="1" /> </svg> elements/row/images/fifths-3-2.svg 0000644 00000000424 15175623010 0012737 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="73" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="46" height="66" fill="none" stroke="#444" stroke-width="2" x="82" y="1" /> </svg> elements/row/images/fifths-4-1.svg 0000644 00000000426 15175623010 0012741 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="101" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="109" y="1" /> </svg> elements/row/images/fifths.svg 0000644 00000001051 15175623010 0012435 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="28" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="55" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="82" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="109" y="1" /> </svg> elements/row/images/thirds-1-2.svg 0000644 00000000424 15175623010 0012747 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="35" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="83" height="66" fill="none" stroke="#444" stroke-width="2" x="46" y="1" /> </svg> elements/row/images/fifths-1-4.svg 0000644 00000000425 15175623010 0012740 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="101" height="66" fill="none" stroke="#444" stroke-width="2" x="28" y="1" /> </svg> elements/row/images/quarters-1-1-2.svg 0000644 00000000560 15175623010 0013457 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="35" y="1" /> <rect width="60" height="66" fill="none" stroke="#444" stroke-width="2" x="69" y="1" /> </svg> elements/row/images/fixed-right.svg 0000644 00000001116 15175623010 0013366 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="35" height="66" fill="none" stroke="#444" stroke-width="2" x="94" y="1" /> <rect width="83" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <polyline fill="none" stroke="#444" points="69.3,30 74.3,35.5 69.3,41" /> <polyline fill="none" stroke="#444" points="15.7,41 10.7,35.5 15.7,30" /> <line fill="none" stroke="#444" x1="63.3" y1="35.5" x2="74.3" y2="35.5" /> <line fill="none" stroke="#444" x1="21.7" y1="35.5" x2="10.7" y2="35.5" /> </svg> elements/row/images/fifths-2-3.svg 0000644 00000000424 15175623010 0012737 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="46" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="73" height="66" fill="none" stroke="#444" stroke-width="2" x="55" y="1" /> </svg> elements/row/images/thirds.svg 0000644 00000000560 15175623010 0012453 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="36" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="36" height="66" fill="none" stroke="#444" stroke-width="2" x="47" y="1" /> <rect width="36" height="66" fill="none" stroke="#444" stroke-width="2" x="93" y="1" /> </svg> elements/row/images/quarters-3-1.svg 0000644 00000000425 15175623010 0013322 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="94" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="26" height="66" fill="none" stroke="#444" stroke-width="2" x="103" y="1" /> </svg> elements/row/images/fifths-1-1-1-2.svg 0000644 00000000714 15175623010 0013233 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="28" y="1" /> <rect width="19" height="66" fill="none" stroke="#444" stroke-width="2" x="55" y="1" /> <rect width="46" height="66" fill="none" stroke="#444" stroke-width="2" x="82" y="1" /> </svg> elements/row/images/sixths-5-1.svg 0000644 00000000426 15175623010 0013001 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="107" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="13" height="66" fill="none" stroke="#444" stroke-width="2" x="115" y="1" /> </svg> elements/row/images/fixed-left.svg 0000644 00000001123 15175623010 0013201 0 ustar 00 <svg width="130" height="68" viewBox="0 0 130 68" xmlns="http://www.w3.org/2000/svg"> <rect width="35" height="66" fill="none" stroke="#444" stroke-width="2" x="1" y="1" /> <rect width="83" height="66" fill="none" stroke="#444" stroke-width="2" x="46" y="1" /> <polyline fill="none" stroke="#444" points="114.3,29 119.3,34.5 114.3,40" /> <polyline fill="none" stroke="#444" points="60.6,40 55.6,34.5 60.6,29" /> <line fill="none" stroke="#444" x1="108.3" y1="34.5" x2="119.3" y2="34.5" /> <line fill="none" stroke="#444" x1="66.6" y1="34.5" x2="55.6" y2="34.5" /> </svg> elements/switcher/templates/template.php 0000644 00000005327 15175623010 0014541 0 ustar 00 <?php $props['connect'] = "js-{$this->uid()}"; $props['item_nav'] = "js-{$this->uid()}"; $el = $this->el('div'); // Nav Alignment $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand', $props['nav_grid_column_gap'] == $props['nav_grid_row_gap'] ? 'uk-grid-{nav_grid_column_gap}' : '[uk-grid-column-{nav_grid_column_gap}] [uk-grid-row-{nav_grid_row_gap}]', 'uk-flex-middle {@nav_vertical_align}', ], 'uk-grid' => true, ]); $cell = $this->el('div', [ 'class' => [ 'uk-width-{nav_grid_width}@{nav_grid_breakpoint}', 'uk-flex-last@{nav_grid_breakpoint} {@nav_position: right}', ], ]); // Content $content = $this->el('div', [ 'id' => ['{connect}'], 'class' => [ 'uk-switcher', 'uk-margin-auto uk-width-{item_maxwidth}', ], 'uk-height-match' => ['row: false {@switcher_height}'], ]); ?> <?= $el($props, $attrs) ?> <?php if ($props['nav'] && in_array($props['nav_position'], ['left', 'right'])) : ?> <?= $grid($props) ?> <?= $cell($props, $this->render("{$__dir}/template-nav", compact('props'))) ?> <div> <?= $content($props) ?> <?php foreach ($children as $child) : $content_item = $this->el('div', [ 'class' => [ 'el-item', 'uk-margin-remove-first-child' => !$child->props['image'] || !in_array($props['image_align'], ['left', 'right']), ], ]); ?> <?= $content_item($props, $builder->render($child, ['element' => $props])) ?> <?php endforeach ?> <?= $content->end() ?> </div> <?= $grid->end() ?> <?php else : ?> <?php if ($props['nav_position'] == 'top') : ?> <?= $this->render("{$__dir}/template-nav", compact('props')) ?> <?php endif ?> <?= $content($props) ?> <?php foreach ($children as $child) : $content_item = $this->el('div', [ 'class' => [ 'el-item', 'uk-margin-remove-first-child' => !$child->props['image'] || !in_array($props['image_align'], ['left', 'right']), ], ]); ?> <?= $content_item($props, $builder->render($child, ['element' => $props])) ?> <?php endforeach ?> <?= $content->end() ?> <?php if ($props['nav_position'] == 'bottom') : ?> <?= $this->render("{$__dir}/template-nav", compact('props')) ?> <?php endif ?> <?php endif ?> <?= $el->end() ?> elements/switcher/templates/template-nav.php 0000644 00000005064 15175623010 0015321 0 ustar 00 <?php $nav = $this->el('ul', [ 'class' => [ 'el-nav', 'uk-margin[-{nav_margin}] {@nav_position: top|bottom}', 'uk-{nav: thumbnav} [uk-flex-nowrap {@thumbnav_nowrap}]', ], 'hidden' => !$props['nav'], $props['nav'] == 'tab' ? 'uk-tab' : 'uk-switcher' => [ 'connect: #{connect};', 'itemNav: #{item_nav};', 'animation: uk-animation-{switcher_animation};', 'media: @{nav_grid_breakpoint} {@nav_position: left|right} {@nav: tab};', ], 'uk-margin' => $props['nav'] === 'thumbnav' && !$props['thumbnav_nowrap'], ]); $nav_horizontal = [ 'uk-subnav {@nav: subnav-.*}', 'uk-{nav: subnav.*}', 'uk-tab-{nav_position: bottom} {@nav: tab}', 'uk-flex-{nav_align: right|center}', 'uk-child-width-expand {@nav_align: justify}', ]; $nav_vertical = [ 'uk-nav uk-nav-[primary {@nav_style_primary}][default {@!nav_style_primary}] [uk-text-left {@text_align}] {@nav: subnav.*}', 'uk-tab-{nav_position} {@nav: tab}', 'uk-thumbnav-vertical {@nav: thumbnav}', ]; $nav_switcher = in_array($props['nav_position'], ['top', 'bottom']) ? ['class' => $nav_horizontal] : ['class' => $nav_vertical, 'uk-toggle' => $props['nav'] != 'tab' ? [ "cls: {$this->expr(array_merge($nav_vertical, $nav_horizontal), $props)};", 'mode: media;', 'media: @{nav_grid_breakpoint};', ] : false, ]; ?> <?= $nav($props, $nav_switcher) ?> <?php foreach ($children as $child) : // Image $image = $this->el('image', [ 'class' => [ 'uk-text-{thumbnav_svg_color}' => $props['thumbnav_svg_inline'] && $props['thumbnav_svg_color'] && $this->isImage($child->props['thumbnail'] ?: $child->props['image']) == 'svg', ], 'src' => $child->props['thumbnail'] ?: $child->props['image'], 'alt' => $child->props['label'] ?: $child->props['title'], 'loading' => $props['image_loading'] ? false : null, 'width' => $props['thumbnav_width'], 'height' => $props['thumbnav_height'], 'focal_point' => $child->props['thumbnail'] ? $child->props['thumbnail_focal_point'] : $child->props['image_focal_point'], 'uk-svg' => (bool) $props['thumbnav_svg_inline'], 'thumbnail' => true, ]); $thumbnail = $image->attrs['src'] && $props['nav'] == 'thumbnav' ? $image($props) : ''; ?> <li> <a href><?= $thumbnail ?: $child->props['label'] ?: $child->props['title'] ?></a> </li> <?php endforeach ?> <?= $nav->end() ?> elements/switcher/templates/content.php 0000644 00000000522 15175623010 0014370 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/switcher/updates.php 0000644 00000016736 15175623010 0012403 0 ustar 00 <?php namespace YOOtheme; return [ '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.7.0-beta.0.6' => function ($node) { if (empty($node->props['nav'])) { $node->props['nav'] = 'tab'; } unset( $node->props['slidenav'], $node->props['slidenav_hover'], $node->props['slidenav_large'], $node->props['slidenav_margin'], $node->props['slidenav_breakpoint'], $node->props['slidenav_color'], $node->props['slidenav_outside_breakpoint'], $node->props['slidenav_outside_color'], $node->props['slidenav_outside_color'], $node->props['slidenav_outside_color'], $node->props['slidenav_outside_color'], ); }, '2.7.0-beta.0.3' => function ($node) { Arr::updateKeys($node->props, ['switcher_thumbnail_height' => 'thumbnav_height']); }, '2.7.0-beta.0.2' => function ($node) { Arr::updateKeys($node->props, [ 'switcher_style' => 'nav', 'switcher_thumbnail_nowrap' => 'thumbnav_nowrap', 'switcher_thumbnail_width' => 'thumbnav_width', 'switcher_thumbnail_height' => 'thumbnav_height', 'switcher_thumbnail_svg_inline' => 'thumbnav_svg_inline', 'switcher_thumbnail_svg_color' => 'thumbnav_svg_color', 'switcher_position' => 'nav_position', 'nav_primary' => 'nav_style_primary', 'switcher_align' => 'nav_align', 'switcher_margin' => 'nav_margin', 'switcher_grid_width' => 'nav_grid_width', 'switcher_grid_column_gap' => 'nav_grid_column_gap', 'switcher_grid_row_gap' => 'nav_grid_row_gap', 'switcher_grid_breakpoint' => 'nav_grid_breakpoint', 'switcher_vertical_align' => 'nav_vertical_align', ]); }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'title_grid_width') === 'xxlarge') { $node->props['title_grid_width'] = '2xlarge'; } if (Arr::get($node->props, 'image_grid_width') === 'xxlarge') { $node->props['image_grid_width'] = '2xlarge'; } }, '1.22.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'switcher_breakpoint' => 'switcher_grid_breakpoint', 'title_breakpoint' => 'title_grid_breakpoint', 'image_breakpoint' => 'image_grid_breakpoint', 'switcher_gutter' => fn($value) => [ 'switcher_grid_column_gap' => $value, 'switcher_grid_row_gap' => $value, ], 'title_gutter' => fn($value) => [ 'title_grid_column_gap' => $value, 'title_grid_row_gap' => $value, ], 'image_gutter' => fn($value) => [ 'image_grid_column_gap' => $value, 'image_grid_row_gap' => $value, ], ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom') { $node->props['meta_align'] = 'below-title'; } }, '1.18.10.3' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top') { if (!empty($node->props['meta_margin'])) { $node->props['title_margin'] = $node->props['meta_margin']; } $node->props['meta_margin'] = ''; } }, '1.18.10.1' => function ($node) { Arr::updateKeys($node->props, [ 'image_inline_svg' => 'image_svg_inline', 'image_animate_svg' => 'image_svg_animate', 'switcher_thumbnail_inline_svg' => 'switcher_thumbnail_svg_inline', ]); }, '1.18.0' => function ($node) { if (Arr::get($node->props, 'switcher_style') === 'thumbnail') { $node->props['switcher_style'] = 'thumbnav'; } if ( !isset($node->props['image_box_decoration']) && Arr::get($node->props, 'image_box_shadow_bottom') === true ) { $node->props['image_box_decoration'] = 'shadow'; } if ( !isset($node->props['meta_color']) && Arr::get($node->props, 'meta_style') === 'muted' ) { $node->props['meta_color'] = 'muted'; $node->props['meta_style'] = ''; } }, ]; elements/switcher/images/iconSmall.svg 0000644 00000000655 15175623010 0014125 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polygon fill="none" stroke="#444" points="9.5,5.5 8.5,3.5 1.5,3.5 1.5,16.5 18.5,16.5 18.5,5.5" /> <rect width="4" height="1" fill="#444" x="11" y="3" /> <rect width="6" height="1" fill="#444" x="4" y="9" /> <rect width="8" height="1" fill="#444" x="4" y="11" /> <rect width="3" height="1" fill="#444" x="16" y="3" /> </svg> elements/switcher/images/icon.svg 0000644 00000000653 15175623010 0013132 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polygon fill="none" stroke="#444" stroke-width="2" points="14,9 11,5 1,5 1,26 29,26 29,9" /> <rect width="6" height="2" fill="#444" x="16" y="4" /> <rect width="10" height="2" fill="#444" x="5" y="14" /> <rect width="13" height="2" fill="#444" x="5" y="18" /> <rect width="6" height="2" fill="#444" x="24" y="4" /> </svg> elements/switcher/element.json 0000644 00000121402 15175623010 0012534 0 ustar 00 { "name": "switcher", "title": "Switcher", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_image": true, "show_link": true, "show_label": true, "show_thumbnail": true, "switcher_animation": "fade", "switcher_height": true, "nav": "tab", "nav_position": "top", "nav_align": "left", "nav_grid_width": "auto", "nav_grid_breakpoint": "m", "thumbnav_svg_color": "emphasis", "title_element": "h3", "title_align": "top", "title_grid_width": "1-2", "title_grid_breakpoint": "m", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "content_column_breakpoint": "m", "image_svg_color": "emphasis", "image_align": "top", "image_grid_width": "1-2", "image_grid_breakpoint": "m", "thumbnav_width": "100", "thumbnav_height": "75", "link_text": "Read more", "link_style": "default", "margin": "default" }, "placeholder": { "children": [ { "type": "switcher_item", "props": {} }, { "type": "switcher_item", "props": {} }, { "type": "switcher_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "switcher_item", "media": { "type": "image", "item": { "title": "title", "image": "src" } } }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_image": { "type": "checkbox", "text": "Show the image" }, "show_link": { "type": "checkbox", "text": "Show the link" }, "show_label": { "type": "checkbox", "text": "Show the navigation label instead of title" }, "show_thumbnail": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the navigation thumbnail instead of the image" }, "switcher_animation": { "label": "Animation", "description": "Select an animation that will be applied to the content items when toggling between them.", "type": "select", "options": { "None": "", "Fade": "fade", "Scale Up": "scale-up", "Scale Down": "scale-down", "Slide Top Small": "slide-top-small", "Slide Bottom Small": "slide-bottom-small", "Slide Left Small": "slide-left-small", "Slide Right Small": "slide-right-small", "Slide Top Medium": "slide-top-medium", "Slide Bottom Medium": "slide-bottom-medium", "Slide Left Medium": "slide-left-medium", "Slide Right Medium": "slide-right-medium", "Slide Top 100%": "slide-top", "Slide Bottom 100%": "slide-bottom", "Slide Left 100%": "slide-left", "Slide Right 100%": "slide-right" } }, "switcher_height": { "label": "Match Height", "description": "Extend all content items to the same height.", "type": "checkbox", "text": "Match content height" }, "item_maxwidth": { "type": "select", "label": "Item Max Width", "description": "Set the maximum width.", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" } }, "nav": { "label": "Navigation", "description": "Select the navigation type. The pill and divider styles are only available for horizontal Subnavs.", "type": "select", "options": { "Tabs": "tab", "Subnav Pill (Nav)": "subnav-pill", "Subnav Divider (Nav)": "subnav-divider", "Subnav (Nav)": "subnav", "Thumbnav": "thumbnav" } }, "nav_position": { "label": "Position", "description": "Position the navigation at the top, bottom, left or right. A larger style can be applied to left and right navigations.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right" } }, "nav_style_primary": { "type": "checkbox", "text": "Primary navigation", "enable": "$match(nav_position, 'left|right') && $match(nav, '^subnav')" }, "nav_align": { "label": "Alignment", "description": "Align the navigation items.", "type": "select", "options": { "Left": "left", "Right": "right", "Center": "center", "Justify": "justify" }, "enable": "$match(nav_position, 'top|bottom')" }, "nav_margin": { "label": "Margin", "description": "Set the vertical margin.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "$match(nav_position, 'top|bottom')" }, "nav_grid_width": { "label": "Grid Width", "description": "Define the width of the navigation. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "$match(nav_position, 'left|right')" }, "nav_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the navigation and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "$match(nav_position, 'left|right')" }, "nav_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "$match(nav_position, 'left|right')" }, "nav_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "$match(nav_position, 'left|right')" }, "nav_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center the navigation and content.", "type": "checkbox", "text": "Center", "enable": "$match(nav_position, 'left|right')" }, "thumbnav_width": { "attrs": { "placeholder": "auto" }, "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_height": { "attrs": { "placeholder": "auto" }, "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_nowrap": { "label": "Thumbnail Wrap", "description": "Define whether thumbnails wrap into multiple lines if the container is too small.", "type": "checkbox", "text": "Don't wrap into multiple lines", "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_svg_inline": { "label": "Thumbnail Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "nav == 'thumbnav' && show_thumbnail" }, "thumbnav_svg_color": { "label": "Thumbnail SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "nav == 'thumbnav' && show_thumbnail && thumbnav_svg_inline" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title" }, "title_align": { "label": "Alignment", "description": "Align the title to the top or left in regards to the content.", "type": "select", "options": { "Top": "top", "Left": "left" }, "enable": "show_title" }, "title_grid_width": { "label": "Grid Width", "description": "Define the width of the title within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "Expand": "expand", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "show_title && title_align == 'left'" }, "title_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the title and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && title_align == 'left'" }, "title_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && title_align == 'left'" }, "title_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_title && title_align == 'left'" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Above Content": "above-content", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "content_dropcap": { "label": "Drop Cap", "description": "Display the first letter of the paragraph as a large initial.", "type": "checkbox", "text": "Enable drop cap", "enable": "show_content" }, "content_column": { "label": "Columns", "description": "Set the number of text columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" }, "enable": "show_content" }, "content_column_divider": { "description": "Show a divider between text columns.", "type": "checkbox", "text": "Show dividers", "enable": "show_content && content_column" }, "content_column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the text columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_content && content_column" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "show_image" }, "image_box_shadow": { "label": "Image Box Shadow", "description": "Select the image box shadow size.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge" }, "enable": "show_image" }, "image_box_decoration": { "label": "Box Decoration", "description": "Select the image box decoration style.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Floating Shadow": "shadow", "Mask": "mask" }, "enable": "show_image" }, "image_box_decoration_inverse": { "type": "checkbox", "text": "Inverse style", "enable": "show_image && $match(image_box_decoration, '^(default|primary|secondary)$')" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "image_align": { "label": "Alignment", "description": "Align the image to the top, left, right or place it between the title and the content.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right" }, "enable": "show_image" }, "image_grid_width": { "label": "Grid Width", "description": "Define the width of the image within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the image and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_image && $match(image_align, 'left|right')" }, "image_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center grid items.", "type": "checkbox", "text": "Center", "enable": "show_image && $match(image_align, 'left|right')" }, "image_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_image && image_align == 'bottom'" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_target": { "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-nav</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-item", ".el-nav", ".el-title", ".el-meta", ".el-content", ".el-image", ".el-link" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_image", "show_link", "show_label", "show_thumbnail" ] }, { "title": "Settings", "fields": [ { "label": "Switcher", "type": "group", "divider": true, "fields": [ "switcher_animation", "switcher_height", "item_maxwidth" ] }, { "label": "Navigation", "type": "group", "divider": true, "fields": [ "nav", "nav_position", "nav_style_primary", "nav_align", "nav_margin", "nav_grid_width", "nav_grid_column_gap", "nav_grid_row_gap", "nav_grid_breakpoint", "nav_vertical_align", { "label": "Thumbnail Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["thumbnav_width", "thumbnav_height"] }, "thumbnav_nowrap", "thumbnav_svg_inline", "thumbnav_svg_color" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_align", "title_grid_width", "title_grid_column_gap", "title_grid_row_gap", "title_grid_breakpoint", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": [ "content_style", "content_dropcap", "content_column", "content_column_divider", "content_column_breakpoint", "content_margin" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_border", "image_box_shadow", "image_box_decoration", "image_box_decoration_inverse", "image_svg_inline", "image_svg_animate", "image_svg_color", "image_align", "image_grid_width", "image_grid_column_gap", "image_grid_row_gap", "image_grid_breakpoint", "image_vertical_align", "image_margin" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_text", "link_target", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/panel-slider/element.json 0000644 00000151103 15175623010 0013264 0 ustar 00 { "name": "panel-slider", "title": "Panel Slider", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_image": true, "show_video": true, "show_link": true, "show_hover_image": true, "show_hover_video": true, "slider_width": "fixed", "slider_width_default": "1-1", "slider_width_medium": "1-3", "slider_gap": "default", "slider_autoplay_pause": true, "nav": "dotnav", "nav_align": "center", "nav_breakpoint": "s", "slidenav": "outside", "slidenav_margin": "medium", "slidenav_breakpoint": "xl", "slidenav_outside_breakpoint": "xl", "panel_match": true, "title_hover_style": "reset", "title_element": "h3", "title_align": "top", "title_grid_width": "1-2", "title_grid_breakpoint": "m", "meta_style": "text-meta", "meta_align": "below-title", "meta_element": "div", "content_column_breakpoint": "m", "icon_width": 80, "image_align": "top", "image_grid_width": "1-2", "image_grid_breakpoint": "m", "image_svg_color": "emphasis", "link_text": "Read more", "link_style": "default", "margin": "default" }, "placeholder": { "children": [ { "type": "panel-slider_item", "props": {} }, { "type": "panel-slider_item", "props": {} }, { "type": "panel-slider_item", "props": {} }, { "type": "panel-slider_item", "props": {} }, { "type": "panel-slider_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "panel-slider_item", "media": [ { "type": "image", "item": { "title": "title", "image": "src" } }, { "type": "video", "item": { "title": "title", "video": "src" } } ] }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_image": { "type": "checkbox", "text": "Show the image" }, "show_video": { "type": "checkbox", "text": "Show the video" }, "show_link": { "type": "checkbox", "text": "Show the link" }, "show_hover_image": { "type": "checkbox", "text": "Show the hover image" }, "show_hover_video": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the hover video" }, "slider_width": { "label": "Item Width Mode", "description": "Define whether the width of the slider items is fixed or automatically expanded by its content widths.", "type": "select", "options": { "Fixed": "fixed", "Auto": "" } }, "height_expand": { "type": "checkbox", "text": "Fill the available column space", "enable": "slider_width" }, "slider_gap": { "label": "Column Gap", "description": "Set the size of the gap between the grid columns.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "default", "Large": "large", "None": "" } }, "slider_divider": { "label": "Divider", "description": "Show a divider between grid columns.", "type": "checkbox", "text": "Show dividers", "enable": "slider_gap" }, "slider_width_default": { "label": "Phone Portrait", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_small": { "label": "Phone Landscape", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_medium": { "label": "Tablet Landscape", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_large": { "label": "Desktop", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_width_xlarge": { "label": "Large Screens", "description": "Set the item width for each breakpoint. <i>Inherit</i> refers to the item width of the next smaller screen size.", "type": "select", "options": { "Inherit": "", "100%": "1-1", "83%": "5-6", "80%": "4-5", "60%": "3-5", "50%": "1-2", "33%": "1-3", "25%": "1-4", "20%": "1-5", "16%": "1-6" }, "enable": "slider_width" }, "slider_sets": { "label": "Sets", "description": "Group items into sets. The number of items within a set depends on the defined item width, e.g. <i>33%</i> means that each set contains 3 items.", "type": "checkbox", "text": "Slide all visible items at once", "enable": "!slider_parallax" }, "slider_center": { "label": "Center", "type": "checkbox", "text": "Center the active slide" }, "slider_finite": { "label": "Finite", "type": "checkbox", "text": "Disable infinite scrolling" }, "slider_velocity": { "label": "Velocity", "description": "Set the velocity in pixels per millisecond.", "type": "range", "attrs": { "min": 0.2, "max": 3, "step": 0.1, "placeholder": "1" }, "enable": "!slider_parallax" }, "slider_autoplay": { "label": "Autoplay", "type": "checkbox", "text": "Enable autoplay", "enable": "!slider_parallax" }, "slider_autoplay_pause": { "type": "checkbox", "text": "Pause autoplay on hover", "enable": "!slider_parallax && slider_autoplay" }, "slider_autoplay_interval": { "label": "Autoplay Interval", "description": "Set the autoplay interval in seconds.", "type": "range", "attrs": { "min": 5, "max": 15, "step": 1, "placeholder": "7" }, "enable": "!slider_parallax && slider_autoplay" }, "slider_parallax": { "label": "Parallax", "description": "Add a stepless parallax animation based on the scroll position.", "type": "checkbox", "text": "Enable parallax effect" }, "slider_parallax_easing": { "label": "Parallax Easing", "description": "Set the animation easing. Zero transitions at an even speed, a negative value starts off quickly while a positive value starts off slowly.", "type": "range", "attrs": { "min": -2, "max": 2, "step": 0.1 }, "enable": "slider_parallax" }, "slider_parallax_target": { "label": "Parallax Target", "description": "The animation starts and stops depending on the element position in the viewport. Alternatively, use the position of a parent container.", "type": "select", "options": { "Element": "", "Column": "!.tm-grid-expand>*", "Row": "!.tm-grid-expand", "Section": "!.uk-section", "Next Section": "![class*='uk-section-'] ~ [class*='uk-section-']" }, "enable": "slider_parallax" }, "slider_parallax_start": { "enable": "slider_parallax" }, "slider_parallax_end": { "enable": "slider_parallax" }, "nav": { "label": "Navigation", "description": "Select the navigation type.", "type": "select", "options": { "None": "", "Dotnav": "dotnav" } }, "nav_align": { "label": "Position", "description": "Align the navigation items.", "type": "select", "options": { "Left": "left", "Center": "center", "Right": "right" }, "enable": "nav" }, "nav_margin": { "label": "Margin", "description": "Set the vertical margin.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large" }, "enable": "nav" }, "nav_breakpoint": { "label": "Breakpoint", "description": "Display the navigation only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "nav" }, "slidenav": { "label": "Position", "description": "Select the position of the slidenav.", "type": "select", "options": { "None": "", "Default": "default", "Outside": "outside", "Top Left": "top-left", "Top Right": "top-right", "Center Left": "center-left", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "enable": "!slider_parallax" }, "slidenav_hover": { "type": "checkbox", "text": "Show on hover only", "enable": "slidenav && !slider_parallax" }, "slidenav_large": { "type": "checkbox", "text": "Larger style", "enable": "slidenav && !slider_parallax" }, "slidenav_margin": { "label": "Margin", "description": "Apply a margin between the slidenav and the slider container.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large" }, "enable": "slidenav && !slider_parallax" }, "slidenav_breakpoint": { "label": "Breakpoint", "description": "Display the slidenav only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "slidenav && !slider_parallax" }, "slidenav_outside_breakpoint": { "label": "Outside Breakpoint", "description": "Display the slidenav outside only on this device width and larger. Otherwise, display it inside.", "type": "select", "options": { "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "slidenav == 'outside' && !slider_parallax" }, "panel_style": { "label": "Style", "description": "Select one of the boxed card or tile styles or a blank panel.", "type": "select", "options": { "None": "", "Card Default": "card-default", "Card Primary": "card-primary", "Card Secondary": "card-secondary", "Card Hover": "card-hover", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "panel_card_offset": { "type": "checkbox", "text": "Add clipping offset", "enable": "panel_style" }, "panel_link": { "label": "Link", "description": "Link the whole panel if a link exists. Optionally, add a hover style.", "type": "checkbox", "text": "Link panel", "enable": "show_link" }, "panel_link_hover": { "type": "checkbox", "text": "Add hover style", "enable": "show_link && panel_link && $match(panel_style, 'card-(default|primary|secondary)|tile-')" }, "panel_padding": { "label": "Padding", "description": "Set the padding.", "type": "select", "options": { "None": "", "Small": "small", "Default": "default", "Large": "large" }, "enable": "panel_style || (!panel_style && (show_image || show_video) && image_align != 'between')" }, "panel_image_no_padding": { "description": "Top, left or right aligned images can be attached to the panel edge. If the image is aligned to the left or right, it will also extend to cover the whole space.", "type": "checkbox", "text": "Align image without padding", "show": "panel_style", "enable": "(show_image || show_video) && image_align != 'between'" }, "panel_match": { "label": "Height", "type": "checkbox", "text": "Match panel heights" }, "panel_expand": { "label": "Expand Content", "description": "Expand the height of the content to fill the available space in the panel and push the link to the bottom.", "type": "select", "options": { "None": "", "Image": "image", "Content": "content", "Image and Content": "both" }, "enable": "panel_match" }, "title_style": { "label": "Style", "description": "Title styles differ in font-size but may also come with a predefined color, size and font.", "type": "select", "options": { "None": "", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large" }, "enable": "show_title" }, "title_link": { "label": "Link", "description": "Link the title if a link exists.", "type": "checkbox", "text": "Link title", "enable": "show_title && show_link" }, "title_hover_style": { "label": "Hover Style", "description": "Set the hover style for a linked title.", "type": "select", "options": { "None": "reset", "Heading Link": "heading", "Default Link": "" }, "enable": "show_title && show_link && (title_link || panel_link)" }, "title_decoration": { "label": "Decoration", "description": "Decorate the title with a divider, bullet or a line that is vertically centered to the heading.", "type": "select", "options": { "None": "", "Divider": "divider", "Bullet": "bullet", "Line": "line" }, "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title" }, "title_align": { "label": "Alignment", "description": "Align the title to the top or left in regards to the content.", "type": "select", "options": { "Top": "top", "Left": "left" }, "enable": "show_title" }, "title_grid_width": { "label": "Grid Width", "description": "Define the width of the title within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "Expand": "expand", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "show_title && title_align == 'left'" }, "title_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the title and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && title_align == 'left'" }, "title_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && title_align == 'left'" }, "title_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_title && title_align == 'left'" }, "title_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_title" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Above Content": "above-content", "Below Content": "below-content" }, "enable": "show_meta" }, "meta_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_meta" }, "meta_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_meta" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading 3X-Large": "heading-3xlarge", "Heading 2X-Large": "heading-2xlarge", "Heading X-Large": "heading-xlarge", "Heading Large": "heading-large", "Heading Medium": "heading-medium", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "content_align": { "label": "Alignment", "type": "checkbox", "text": "Force left alignment", "enable": "show_content" }, "content_dropcap": { "label": "Drop Cap", "description": "Display the first letter of the paragraph as a large initial.", "type": "checkbox", "text": "Enable drop cap", "enable": "show_content" }, "content_column": { "label": "Columns", "description": "Set the number of text columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" }, "enable": "show_content" }, "content_column_divider": { "description": "Show a divider between text columns.", "type": "checkbox", "text": "Show dividers", "enable": "show_content && content_column" }, "content_column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the text columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_content && content_column" }, "content_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_content" }, "image_width": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image || show_video" }, "image_height": { "type": "number", "attrs": { "placeholder": "auto" }, "enable": "show_image || show_video" }, "image_loading": { "label": "Loading", "description": "By default, images are loaded lazy. Enable eager loading for images in the initial viewport.", "type": "checkbox", "text": "Load image eagerly", "enable": "show_image || show_video" }, "image_border": { "label": "Border", "description": "Select the image border style.", "type": "select", "options": { "None": "", "Rounded": "rounded", "Circle": "circle", "Pill": "pill" }, "enable": "(show_image || show_video) && (!panel_style || (panel_style && (!panel_image_no_padding || image_align == 'between')))" }, "image_link": { "label": "Link", "description": "Link the image if a link exists.", "type": "checkbox", "text": "Link image", "enable": "(show_image || show_video) && show_link" }, "image_transition": { "label": "Hover Transition", "description": "Set the hover transition for a linked image.", "type": "select", "options": { "None": "", "Scale Up": "scale-up", "Scale Down": "scale-down" }, "enable": "(show_image || show_video) && show_link && (image_link || panel_link)" }, "icon_width": { "label": "Icon Width", "description": "Set the icon width.", "enable": "show_image" }, "icon_color": { "label": "Icon Color", "description": "Set the icon color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image" }, "image_align": { "label": "Alignment", "description": "Align the image to the top, left, right or place it between the title and the content.", "type": "select", "options": { "Top": "top", "Bottom": "bottom", "Left": "left", "Right": "right", "Between": "between" }, "enable": "show_image || show_video" }, "image_grid_width": { "label": "Grid Width", "description": "Define the width of the image within the grid. Choose between percent and fixed widths or expand columns to the width of their content.", "type": "select", "options": { "Auto": "auto", "80%": "4-5", "75%": "3-4", "66%": "2-3", "60%": "3-5", "50%": "1-2", "40%": "2-5", "33%": "1-3", "25%": "1-4", "20%": "1-5", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right')" }, "image_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the image and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right') && !(panel_image_no_padding && panel_style)" }, "image_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right') && !(panel_image_no_padding && panel_style)" }, "image_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "(show_image || show_video) && $match(image_align, 'left|right')" }, "image_vertical_align": { "label": "Vertical Alignment", "description": "Vertically center grid items.", "type": "checkbox", "text": "Center", "enable": "(show_image || show_video) && $match(image_align, 'left|right')" }, "image_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "(show_image || show_video) && (image_align == 'between' || (image_align == 'bottom' && !(panel_style && panel_image_no_padding)))" }, "image_svg_inline": { "label": "Inline SVG", "description": "Inject SVG images into the page markup so that they can easily be styled with CSS.", "type": "checkbox", "text": "Make SVG stylable with CSS", "enable": "show_image" }, "image_svg_animate": { "type": "checkbox", "text": "Animate strokes", "enable": "show_image && image_svg_inline" }, "image_svg_color": { "label": "SVG Color", "description": "Select the SVG color. It will only apply to supported elements defined in the SVG.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_image && image_svg_inline" }, "image_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "show_image || show_video" }, "link_target": { "label": "Target", "type": "checkbox", "text": "Open in a new window", "enable": "show_link" }, "link_text": { "label": "Text", "description": "Enter the text for the link.", "enable": "show_link" }, "link_aria_label": { "label": "ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "enable": "show_link" }, "link_style": { "label": "Style", "description": "Set the link style.", "type": "select", "options": { "Button Default": "default", "Button Primary": "primary", "Button Secondary": "secondary", "Button Danger": "danger", "Button Text": "text", "Link": "", "Link Muted": "link-muted", "Link Text": "link-text" }, "enable": "show_link" }, "link_size": { "label": "Button Size", "description": "Set the button size.", "type": "select", "options": { "Small": "small", "Default": "", "Large": "large" }, "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_fullwidth": { "type": "checkbox", "text": "Full width button", "enable": "show_link && link_style && !$match(link_style, 'link-(muted|text)')" }, "link_margin": { "label": "Margin Top", "description": "Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.", "type": "select", "options": { "Small": "small", "Default": "", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "container_padding_remove": "${builder.container_padding_remove}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-nav</code>, <code>.el-slidenav</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>, <code>.el-image</code>, <code>.el-link</code>, <code>.el-hover-image</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [ ".el-element", ".el-item", ".el-nav", ".el-slidenav", ".el-title", ".el-meta", ".el-content", ".el-image", ".el-link", ".el-hover-image" ] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "content", "show_title", "show_meta", "show_content", "show_image", "show_video", "show_link", "show_hover_image", "show_hover_video" ] }, { "title": "Settings", "fields": [ { "label": "Slider", "type": "group", "divider": true, "fields": [ "slider_width", "height_expand", "slider_gap", "slider_divider" ] }, { "label": "Item Width", "type": "group", "divider": true, "fields": [ "slider_width_default", "slider_width_small", "slider_width_medium", "slider_width_large", "slider_width_xlarge" ] }, { "label": "Animation", "type": "group", "divider": true, "fields": [ "slider_sets", "slider_center", "slider_finite", "slider_velocity", "slider_autoplay", "slider_autoplay_pause", "slider_autoplay_interval", "slider_parallax", "slider_parallax_easing", "slider_parallax_target", { "label": "Parallax Start/End", "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the target's height.", "type": "grid", "width": "1-2", "fields": ["slider_parallax_start", "slider_parallax_end"] } ] }, { "label": "Navigation", "type": "group", "divider": true, "fields": [ "nav", "nav_align", "nav_margin", "nav_breakpoint" ] }, { "label": "Slidenav", "type": "group", "divider": true, "fields": [ "slidenav", "slidenav_hover", "slidenav_large", "slidenav_margin", "slidenav_breakpoint", "slidenav_outside_breakpoint" ] }, { "label": "Panel", "type": "group", "divider": true, "fields": [ "panel_style", "panel_card_offset", "panel_link", "panel_link_hover", "panel_padding", "panel_image_no_padding", "panel_match", "panel_expand" ] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_link", "title_hover_style", "title_decoration", "title_font_family", "title_color", "title_element", "title_align", "title_grid_width", "title_grid_column_gap", "title_grid_row_gap", "title_grid_breakpoint", "title_margin" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": [ "meta_style", "meta_color", "meta_align", "meta_element", "meta_margin" ] }, { "label": "Content", "type": "group", "divider": true, "fields": [ "content_style", "content_align", "content_dropcap", "content_column", "content_column_divider", "content_column_breakpoint", "content_margin" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ { "label": "Width/Height", "description": "Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.", "type": "grid", "width": "1-2", "fields": ["image_width", "image_height"] }, "image_loading", "image_border", "image_link", "image_transition", "icon_width", "icon_color", "image_align", "image_grid_width", "image_grid_column_gap", "image_grid_row_gap", "image_grid_breakpoint", "image_vertical_align", "image_margin", "image_svg_inline", "image_svg_animate", "image_svg_color", "image_text_color" ] }, { "label": "Link", "type": "group", "divider": true, "fields": [ "link_target", "link_text", "link_aria_label", "link_style", "link_size", "link_fullwidth", "link_margin" ] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility", "container_padding_remove" ] } ] }, "${builder.advanced}" ] } } } elements/panel-slider/templates/template.php 0000644 00000007255 15175623010 0015272 0 ustar 00 <?php // Resets if ($props['panel_link']) { $props['title_link'] = ''; $props['image_link'] = ''; } if ($props['slider_parallax']) { $props['slidenav'] = ''; } // Override default settings if (!$props['slider_width']) { $props['height_expand'] = ''; $props['panel_match'] = true; $props['panel_expand'] = 'image'; } if ($props['height_expand']) { $props['panel_match'] = true; } $el = $this->el('div', [ 'class' => [ 'uk-slider-container {@!slidenav: outside}', 'uk-slider-container-offset {@panel_style} {@panel_card_offset} {@!slidenav: outside}', // Expand to column height 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], 'uk-slider' => $this->expr([ 'sets: {slider_sets}; {@!slider_parallax}', 'center: {slider_center};', 'finite: {slider_finite};', 'velocity: {slider_velocity}; {@!slider_parallax}', 'autoplay: {slider_autoplay}; [pauseOnHover: false; {@!slider_autoplay_pause}] [autoplayInterval: {slider_autoplay_interval}000;] {@!slider_parallax}', // Parallax 'parallax: true; {@slider_parallax}', 'parallax-easing: {slider_parallax_easing}; {@slider_parallax}', 'parallax-target: {slider_parallax_target}; {@slider_parallax}', 'parallax-start: {slider_parallax_start}; {@slider_parallax}', 'parallax-end: {slider_parallax_end}; {@slider_parallax}', ], $props) ?: true, ]); // Container $container = $this->el('div', [ 'class' => [ 'uk-position-relative', 'uk-visible-toggle {@slidenav} {@slidenav_hover}', 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], 'tabindex' => ['-1 {@slidenav} {@slidenav_hover}'], ]); // Slider Container $slider_container = $props['slidenav'] == 'outside' ? $this->el('div', [ 'class' => [ 'uk-slider-container', 'uk-slider-container-offset {@panel_style} {@panel_card_offset}', 'uk-flex-1 uk-flex uk-flex-column {@height_expand}', ], ]) : null; // Slider Items $slider_items = $this->el('div', [ 'class' => [ 'uk-slider-items', 'uk-grid [uk-grid-{!slider_gap: default}] {@slider_gap}', 'uk-grid-divider {@slider_gap} {@slider_divider}', 'uk-flex-middle {@slider_row_align}', 'uk-flex-1 {@height_expand}', ], ]); $slider_item = $this->el('div', [ 'class' => [ 'uk-width-{slider_width_default} {@slider_width}', 'uk-width-{slider_width_small}@s {@slider_width}', 'uk-width-{slider_width_medium}@m {@slider_width}', 'uk-width-{slider_width_large}@l {@slider_width}', 'uk-width-{slider_width_xlarge}@xl {@slider_width}', // Can't use `uk-grid-match` on the parent because `flex-wrap: warp` creates a multi-line flex container which doesn't shrink the child height if its content is larger 'uk-flex {@panel_match}', ], ]); ?> <?= $el($props, $attrs) ?> <?= $container($props) ?> <?php if ($slider_container) : ?> <?= $slider_container($props) ?> <?php endif ?> <?= $slider_items($props) ?> <?php foreach ($children as $child) : ?> <?= $slider_item($props, $builder->render($child, ['element' => $props])) ?> <?php endforeach ?> <?= $slider_items->end() ?> <?php if ($slider_container) : ?> <?= $slider_container->end() ?> <?php endif ?> <?php if ($props['slidenav']) : ?> <?= $this->render("{$__dir}/template-slidenav") ?> <?php endif ?> <?= $container->end() ?> <?php if ($props['nav']): ?> <?= $this->render("{$__dir}/template-nav") ?> <?php endif ?> <?= $el->end() ?> elements/panel-slider/templates/content.php 0000644 00000000522 15175623010 0015117 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/panel-slider/templates/template-slidenav.php 0000644 00000004635 15175623010 0017074 0 ustar 00 <?php $slidenav = $this->el('a', [ 'class' => [ 'el-slidenav', 'uk-slidenav-large {@slidenav_large}', ], 'href' => '#', // WordPress Preview reloads if `href` is empty ]); $attrs_slidenav_next = [ 'uk-slidenav-next' => true, 'uk-slider-item' => 'next', ]; $attrs_slidenav_previous = [ 'uk-slidenav-previous' => true, 'uk-slider-item' => 'previous', ]; $slidenav_container = $this->el('div', [ 'class' => [ 'uk-visible@{slidenav_breakpoint}', 'uk-hidden-hover uk-hidden-touch {@slidenav_hover}', // Initial text color 'uk-{image_text_color} {@!slidenav: outside}', ], 'uk-inverse' => true, ]); if (in_array($props['slidenav'], ['default', 'outside'])) { $slidenav_container->attr([ 'class' => [ 'uk-position-{slidenav_margin}', ], ]); $attrs_slidenav_container_next = [ 'class' => [ 'uk-position-center-right {@slidenav: default}', 'uk-position-center-right-out {@slidenav: outside}', ], 'uk-toggle' => [ 'cls: uk-position-center-right-out uk-position-center-right; mode: media; media: @{slidenav_outside_breakpoint} {@slidenav: outside}', ], ]; $attrs_slidenav_container_previous = [ 'class' => [ 'uk-position-center-left {@slidenav: default}', 'uk-position-center-left-out {@slidenav: outside}', ], 'uk-toggle' => [ 'cls: uk-position-center-left-out uk-position-center-left; mode: media; media: @{slidenav_outside_breakpoint} {@slidenav: outside}', ], ]; } else { $slidenav_container->attr([ 'class' => [ 'uk-slidenav-container uk-position-{slidenav} [uk-position-{slidenav_margin}]', ], ]); } ?> <?php if (!in_array($props['slidenav'], ['default', 'outside'])) : ?> <?= $slidenav_container($props) ?> <?= $slidenav($props, $attrs_slidenav_previous, '') ?> <?= $slidenav($props, $attrs_slidenav_next, '') ?> <?= $slidenav_container->end() ?> <?php else : ?> <?= $slidenav_container($props, $attrs_slidenav_container_previous) ?> <?= $slidenav($props, $attrs_slidenav_previous, '') ?> <?= $slidenav_container->end() ?> <?= $slidenav_container($props, $attrs_slidenav_container_next) ?> <?= $slidenav($props, $attrs_slidenav_next, '') ?> <?= $slidenav_container->end() ?> <?php endif ?> elements/panel-slider/templates/template-nav.php 0000644 00000001067 15175623010 0016047 0 ustar 00 <?php $nav = $this->el('ul', [ 'class' => [ 'el-nav uk-slider-nav', 'uk-{nav}', 'uk-flex-{nav_align}', ], 'uk-margin' => true, ]); $nav_container = $this->el('div', [ 'class' => [ 'uk-margin[-{nav_margin}]-top', 'uk-visible@{nav_breakpoint}', 'uk-position-relative {@panel_style} {@panel_card_offset}', // Fix `uk-slider-container-offset` causing overlaying the nav ], 'uk-inverse' => true, ]); ?> <?= $nav_container($props) ?> <?= $nav($props, '') ?> <?= $nav_container->end() ?> elements/panel-slider/images/icon.svg 0000644 00000001260 15175623010 0013654 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#444" stroke-width="1.9" points="7.511 10.456 11.937 6.03 17.723 11.818" /> <polyline fill="none" stroke="#444" stroke-width="1.9" points="15.426 8.839 17.128 7.137 22.489 12.498" /> <rect width="16" height="2" fill="#444" x="7" y="15" /> <rect width="12" height="2" fill="#444" x="9" y="18" /> <rect width="24" height="22" fill="none" stroke="#444" stroke-width="2" x="3" y="1" /> <circle fill="#444" cx="10.5" cy="28.5" r="1.5" /> <circle fill="#444" cx="15.5" cy="28.5" r="1.5" /> <circle fill="#444" cx="20.5" cy="28.5" r="1.5" /> </svg> elements/panel-slider/images/iconSmall.svg 0000644 00000001212 15175623010 0014642 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <circle fill="#444" cx="7" cy="19" r="1" /> <circle fill="#444" cx="10" cy="19" r="1" /> <circle fill="#444" cx="13" cy="19" r="1" /> <polyline fill="none" stroke="#444" stroke-width="1.1" points="4.742 6.814 8.247 3.309 11.753 6.814" /> <polyline fill="none" stroke="#444" stroke-width="1.1" points="10.438 5.5 11.753 4.185 15.258 7.691" /> <rect width="10" height="1" fill="#444" x="5" y="10" /> <rect width="8" height="1" fill="#444" x="6" y="12" /> <rect width="15" height="15" fill="none" stroke="#444" x="2.5" y="0.5" /> </svg> elements/panel-slider/updates.php 0000644 00000005710 15175623010 0013120 0 ustar 00 <?php namespace YOOtheme; return [ '4.5.0-beta.0.3' => function ($node) { if (Arr::get($node->props, 'show_link') && Arr::get($node->props, 'panel_link') && preg_match('/^card-(default|primary|secondary)|tile-/', Arr::get($node->props, 'panel_style', ''))) { $node->props['panel_link_hover'] = 'true'; } // Remove obsolete props unset($node->props['panel_card_size']); }, '4.5.0-beta.0.1' => function ($node) { if (!Arr::get($node->props, 'image_text_color')) { $node->props['image_text_color'] = Arr::get($node->props, 'slidenav_color'); } unset( $node->props['nav_color'], $node->props['slidenav_color'], $node->props['slidenav_outside_color'], ); }, '4.4.0-beta.0.2' => function ($node) { if (str_starts_with(Arr::get($node->props, 'panel_style', ''), 'card-') && Arr::get($node->props, 'panel_image_no_padding') && in_array(Arr::get($node->props, 'image_align'), ['left', 'right'])) { $node->props['panel_expand'] = 'image'; } }, '4.3.4.1' => function ($node) { if (Arr::get($node->props, 'panel_expand')) { $node->props['panel_expand'] = 'content'; } }, '4.3.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, ['panel_card_match' => 'panel_match']); }, '4.0.0-beta.9' => function ($node) { if (Arr::get($node->props, 'panel_link') && Arr::get($node->props, 'css')) { $node->props['css'] = str_replace('.el-item', '.el-item > *', $node->props['css']); } }, '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.7.3.1' => function ($node) { if (empty($node->props['panel_style']) && empty($node->props['panel_padding'])) { foreach ($node->children as $child) { if (str_starts_with($child->props->panel_style ?? '', 'card-')) { $node->props['panel_padding'] = 'default'; break; } } } }, '2.7.0-beta.0.5' => function ($node) { if (str_starts_with($node->props['panel_style'] ?? '', 'card-')) { if (empty($node->props['panel_card_size'])) { $node->props['panel_card_size'] = 'default'; } $node->props['panel_padding'] = $node->props['panel_card_size']; } unset($node->props['panel_card_size']); }, '2.7.0-beta.0.1' => function ($node) { Arr::updateKeys($node->props, [ 'panel_content_padding' => 'panel_padding', 'panel_size' => 'panel_card_size', 'panel_card_image' => 'panel_image_no_padding', ]); }, ]; elements/description_list/images/iconSmall.svg 0000644 00000001065 15175623010 0015647 0 ustar 00 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="#444" d="M1,4v3h5V4H1z M5,6H2V5h3V6z" /> <path fill="#444" d="M1,13v3h5v-3H1z M5,15H2v-1h3V15z" /> <rect width="11" height="1" fill="#444" x="8" y="4" /> <rect width="11" height="1" fill="#444" x="8" y="6" /> <rect width="9" height="1" fill="#444" x="8" y="8" /> <rect width="11" height="1" fill="#444" x="8" y="13" /> <rect width="11" height="1" fill="#444" x="8" y="15" /> <rect width="9" height="1" fill="#444" x="8" y="17" /> </svg> elements/description_list/images/icon.svg 0000644 00000001076 15175623010 0014660 0 ustar 00 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <path fill="#444" d="M0,2v5h9V2H0z M7,5H2V4h5V5z" /> <rect width="18" height="2" fill="#444" x="12" y="2" /> <rect width="18" height="2" fill="#444" x="12" y="6" /> <rect width="14" height="2" fill="#444" x="12" y="10" /> <path fill="#444" d="M0,17v5h9v-5H0z M7,20H2v-1h5V20z" /> <rect width="18" height="2" fill="#444" x="12" y="17" /> <rect width="18" height="2" fill="#444" x="12" y="21" /> <rect width="14" height="2" fill="#444" x="12" y="25" /> </svg> elements/description_list/templates/content.php 0000644 00000000522 15175623010 0016116 0 ustar 00 <?php if (count($children) > 1) : ?> <ul> <?php foreach ($children as $child) : ?> <li> <?= $builder->render($child, ['element' => $props]) ?> </li> <?php endforeach ?> </ul> <?php elseif (count($children) == 1) : ?> <div> <?= $builder->render($children[0], ['element' => $props]) ?> </div> <?php endif ?> elements/description_list/templates/template.php 0000644 00000001123 15175623010 0016255 0 ustar 00 <?php $el = $this->el($props['list_element'], [ 'class' => [ 'uk-list', 'uk-list-{list_marker}', 'uk-list-{list_marker_color}', 'uk-list-{list_style}', 'uk-list-{list_size}', 'uk-column-{column}[@{column_breakpoint}]', 'uk-column-divider {@column} {@column_divider}', 'uk-margin-remove {@position: absolute}', ], ]); ?> <?= $el($props, $attrs) ?> <?php foreach ($children as $child) : ?> <li class="el-item"><?= $builder->render($child, ['element' => $props]) ?></li> <?php endforeach ?> <?= $el->end() ?> elements/description_list/updates.php 0000644 00000011177 15175623010 0014123 0 ustar 00 <?php namespace YOOtheme; return [ '2.8.0-beta.0.13' => function ($node) { foreach (['title_style', 'meta_style', 'content_style'] as $prop) { if (in_array(Arr::get($node->props, $prop), ['meta', 'lead'])) { $node->props[$prop] = 'text-' . Arr::get($node->props, $prop); } } }, '2.2.0-beta.2.1' => function ($node) { if (Arr::get($node->props, 'title_style') === 'strong') { $node->props['title_style'] = 'text-bold'; } if ( in_array(Arr::get($node->props, 'title_style'), [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', ]) ) { $node->props['title_element'] = 'h3'; } }, '2.1.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'list_size') === true) { $node->props['list_size'] = 'large'; } else { $node->props['list_size'] = ''; } }, '1.22.0-beta.0.1' => function ($node) { if ( Arr::get($node->props, 'layout') === 'grid-2-m' && Arr::get($node->props, 'width') === 'expand' && isset($node->props['leader']) ) { $node->props['gutter'] = 'small'; } Arr::updateKeys($node->props, [ 'gutter' => fn($value) => [ 'title_grid_column_gap' => $value, 'title_grid_row_gap' => $value, ], 'breakpoint' => 'title_grid_breakpoint', 'width' => 'title_grid_width', 'leader' => 'title_leader', ]); }, '1.20.0-beta.1.1' => function ($node) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); }, '1.20.0-beta.0.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = 'h1'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = 'h2'; } } }, '1.19.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'meta_align') === 'top-title') { $node->props['meta_align'] = 'above-title'; } if (Arr::get($node->props, 'meta_align') === 'bottom-title') { $node->props['meta_align'] = 'below-title'; } if (Arr::get($node->props, 'meta_align') === 'top-content') { $node->props['meta_align'] = 'above-content'; } if (Arr::get($node->props, 'meta_align') === 'bottom-content') { $node->props['meta_align'] = 'below-content'; } }, '1.18.0' => function ($node) { if (Arr::get($node->props, 'title_style') === 'muted') { $node->props['title_style'] = ''; $node->props['title_color'] = 'muted'; } if ( !isset($node->props['meta_color']) && in_array(Arr::get($node->props, 'meta_style'), ['muted', 'primary'], true) ) { $node->props['meta_color'] = $node->props['meta_style']; $node->props['meta_style'] = ''; } switch (Arr::get($node->props, 'layout')) { case '': $node->props['width'] = 'auto'; $node->props['layout'] = 'grid-2'; break; case 'width-small': $node->props['width'] = 'small'; $node->props['layout'] = 'grid-2'; break; case 'width-medium': $node->props['width'] = 'medium'; $node->props['layout'] = 'grid-2'; break; case 'space-between': $node->props['width'] = 'expand'; $node->props['layout'] = 'grid-2'; break; } }, ]; elements/description_list/element.json 0000644 00000044105 15175623010 0014266 0 ustar 00 { "name": "description_list", "title": "Description List", "group": "multiple items", "icon": "${url:images/icon.svg}", "iconSmall": "${url:images/iconSmall.svg}", "element": true, "container": true, "width": 500, "defaults": { "show_title": true, "show_meta": true, "show_content": true, "show_link": true, "list_element": "ul", "column_breakpoint": "m", "layout": "grid-2", "title_grid_width": "auto", "title_grid_column_gap": "small", "title_grid_row_gap": "small", "title_element": "div", "meta_style": "text-meta", "meta_align": "below-content" }, "placeholder": { "children": [ { "type": "description_list_item", "props": {} }, { "type": "description_list_item", "props": {} }, { "type": "description_list_item", "props": {} } ] }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "content": { "label": "Items", "type": "content-items", "item": "description_list_item" }, "show_title": { "label": "Display", "type": "checkbox", "text": "Show the title" }, "show_meta": { "type": "checkbox", "text": "Show the meta text" }, "show_content": { "type": "checkbox", "text": "Show the content" }, "show_link": { "description": "Show or hide content fields without the need to delete the content itself.", "type": "checkbox", "text": "Show the link" }, "list_marker": { "label": "Marker", "description": "Select the marker of the list items.", "type": "select", "options": { "None": "", "Disc": "disc", "Circle": "circle", "Square": "square", "Decimal": "decimal", "Hyphen": "hyphen", "Image Bullet": "bullet" } }, "list_marker_color": { "label": "Marker Color", "description": "Select the color of the list markers.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary" }, "enable": "list_marker != 'bullet'" }, "list_style": { "label": "Style", "description": "Select the list style.", "type": "select", "options": { "None": "", "Divider": "divider", "Striped": "striped" } }, "list_size": { "label": "Size", "description": "Define the padding between items.", "type": "select", "options": { "Default": "", "Large": "large", "None": "collapse" } }, "column": { "label": "Columns", "description": "Set the number of list columns.", "type": "select", "options": { "None": "", "Halves": "1-2", "Thirds": "1-3", "Quarters": "1-4", "Fifths": "1-5", "Sixths": "1-6" } }, "column_divider": { "description": "Show a divider between list columns.", "type": "checkbox", "text": "Show dividers", "enable": "column" }, "column_breakpoint": { "label": "Columns Breakpoint", "description": "Set the device width from which the list columns should apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "column" }, "list_element": { "label": "HTML Element", "description": "Set whether it's an ordered or unordered list.", "type": "select", "options": { "ul": "ul", "ol": "ol" } }, "layout": { "label": "Layout", "description": "Define the layout of the title, meta and content.", "type": "select", "options": { "2 Column Grid": "grid-2", "2 Column Grid (Meta only)": "grid-2-m", "Stacked": "stacked" } }, "title_style": { "label": "Style", "description": "Select the title style and add an optional colon at the end of the title.", "type": "select", "options": { "None": "", "Text Bold": "text-bold", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading Small": "heading-small", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_title" }, "title_colon": { "type": "checkbox", "text": "Add a colon", "enable": "show_title" }, "title_font_family": { "label": "Font Family", "description": "Select an alternative font family. Mind that not all styles have different font families.", "type": "select", "options": { "None": "", "Default": "default", "Primary": "primary", "Secondary": "secondary", "Tertiary": "tertiary" }, "enable": "show_title" }, "title_color": { "label": "Color", "description": "Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger", "Background": "background" }, "enable": "show_title" }, "title_grid_width": { "label": "Grid Width", "description": "Define the width of the title within the grid.", "type": "select", "options": { "Auto": "auto", "Small": "small", "Medium": "medium", "Expand": "expand" }, "enable": "show_title && layout != 'stacked'" }, "title_leader": { "type": "checkbox", "text": "Add a leader", "enable": "layout == 'grid-2-m' && title_grid_width == 'expand'" }, "title_grid_column_gap": { "label": "Grid Column Gap", "description": "Set the size of the gap between the title and the content.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && layout != 'stacked'" }, "title_grid_row_gap": { "label": "Grid Row Gap", "description": "Set the size of the gap if the grid items stack.", "type": "select", "options": { "Small": "small", "Medium": "medium", "Default": "", "Large": "large", "None": "collapse" }, "enable": "show_title && layout != 'stacked'" }, "title_grid_breakpoint": { "label": "Grid Breakpoint", "description": "Set the breakpoint from which grid items will stack.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "show_title && layout != 'stacked'" }, "title_element": { "label": "HTML Element", "description": "Set the level for the section heading or give it no semantic meaning.", "type": "select", "options": { "h1": "h1", "h2": "h2", "h3": "h3", "h4": "h4", "h5": "h5", "h6": "h6", "div": "div" }, "enable": "show_title" }, "meta_style": { "label": "Style", "description": "Select a predefined meta text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_meta" }, "meta_color": { "label": "Color", "description": "Select the text color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Secondary": "secondary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "show_meta" }, "meta_align": { "label": "Alignment", "description": "Align the meta text.", "type": "select", "options": { "Above Title": "above-title", "Below Title": "below-title", "Above Content": "above-content", "Below Content": "below-content" }, "enable": "show_meta && layout != 'grid-2-m'" }, "content_style": { "label": "Style", "description": "Select a predefined text style, including color, size and font-family.", "type": "select", "options": { "None": "", "Text Meta": "text-meta", "Text Lead": "text-lead", "Text Small": "text-small", "Text Large": "text-large", "Heading H1": "h1", "Heading H2": "h2", "Heading H3": "h3", "Heading H4": "h4", "Heading H5": "h5", "Heading H6": "h6" }, "enable": "show_content" }, "link_style": { "label": "Style", "description": "This option doesn't apply unless a URL has been added to the item. Only the item content will be linked.", "type": "select", "options": { "None": "", "Muted": "muted", "Text": "text", "Reset": "reset" }, "enable": "show_link" }, "position": "${builder.position}", "position_left": "${builder.position_left}", "position_right": "${builder.position_right}", "position_top": "${builder.position_top}", "position_bottom": "${builder.position_bottom}", "position_z_index": "${builder.position_z_index}", "blend": "${builder.blend}", "margin": "${builder.margin}", "margin_remove_top": "${builder.margin_remove_top}", "margin_remove_bottom": "${builder.margin_remove_bottom}", "maxwidth": "${builder.maxwidth}", "maxwidth_breakpoint": "${builder.maxwidth_breakpoint}", "block_align": "${builder.block_align}", "block_align_breakpoint": "${builder.block_align_breakpoint}", "block_align_fallback": "${builder.block_align_fallback}", "text_align": "${builder.text_align_justify}", "text_align_breakpoint": "${builder.text_align_breakpoint}", "text_align_fallback": "${builder.text_align_justify_fallback}", "animation": "${builder.animation}", "_parallax_button": "${builder._parallax_button}", "visibility": "${builder.visibility}", "name": "${builder.name}", "status": "${builder.status}", "source": "${builder.source}", "id": "${builder.id}", "class": "${builder.cls}", "attributes": "${builder.attrs}", "css": { "label": "CSS", "description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>, <code>.el-item</code>, <code>.el-title</code>, <code>.el-meta</code>, <code>.el-content</code>", "type": "editor", "editor": "code", "mode": "css", "attrs": { "debounce": 500, "hints": [".el-element", ".el-item", ".el-title", ".el-meta", ".el-content"] } }, "transform": "${builder.transform}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": ["content", "show_title", "show_meta", "show_content", "show_link"] }, { "title": "Settings", "fields": [ { "label": "List", "type": "group", "divider": true, "fields": [ "list_marker", "list_marker_color", "list_style", "list_size", "column", "column_divider", "column_breakpoint", "list_element" ] }, { "label": "List Item", "type": "group", "divider": true, "fields": ["layout"] }, { "label": "Title", "type": "group", "divider": true, "fields": [ "title_style", "title_colon", "title_font_family", "title_color", "title_grid_width", "title_leader", "title_grid_column_gap", "title_grid_row_gap", "title_grid_breakpoint", "title_element" ] }, { "label": "Meta", "type": "group", "divider": true, "fields": ["meta_style", "meta_color", "meta_align"] }, { "label": "Content", "type": "group", "divider": true, "fields": ["content_style"] }, { "label": "Link", "type": "group", "divider": true, "fields": ["link_style"] }, { "label": "General", "type": "group", "fields": [ "position", "position_left", "position_right", "position_top", "position_bottom", "position_z_index", "blend", "margin", "margin_remove_top", "margin_remove_bottom", "maxwidth", "maxwidth_breakpoint", "block_align", "block_align_breakpoint", "block_align_fallback", "text_align", "text_align_breakpoint", "text_align_fallback", "animation", "_parallax_button", "visibility" ] } ] }, "${builder.advanced}" ] } } } elements/grid_item/element.php 0000644 00000003126 15175623010 0012467 0 ustar 00 <?php namespace YOOtheme; return [ 'transforms' => [ 'render' => function ($node, $params) { // Display foreach (['title', 'meta', 'content', 'link', 'image', 'video', 'hover_image', 'hover_video'] as $key) { if (!$params['parent']->props["show_{$key}"]) { $node->props[$key] = ''; if ($key === 'image') { $node->props['icon'] = ''; } } } /** * Auto-correct media rendering for dynamic content * * @var View $view */ $view = app(View::class); foreach (['', 'hover_'] as $prefix) { if ($node->props["{$prefix}image"] && $view->isVideo($node->props["{$prefix}image"])) { $node->props["{$prefix}video"] = $node->props["{$prefix}image"]; $node->props["{$prefix}image"] = null; } elseif ($node->props["{$prefix}video"] && $view->isImage($node->props["{$prefix}video"])) { $node->props["{$prefix}image"] = $node->props["{$prefix}video"]; $node->props["{$prefix}video"] = null; } } // Don't render element if content fields are empty return $node->props['title'] != '' || $node->props['meta'] != '' || $node->props['content'] != '' || $node->props['image'] || $node->props['video'] || $node->props['icon']; }, ], ]; elements/grid_item/updates.php 0000644 00000000322 15175623010 0012476 0 ustar 00 <?php namespace YOOtheme; return [ '2.5.0-beta.1.3' => function ($node) { if (!empty($node->props['tags'])) { $node->props['tags'] = ucwords($node->props['tags']); } }, ]; elements/grid_item/element.json 0000644 00000021373 15175623010 0012655 0 ustar 00 { "@import": "./element.php", "name": "grid_item", "title": "Item", "width": 500, "placeholder": { "props": { "title": "Title", "meta": "", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "image": "", "video": "", "icon": "", "hover_image": "", "hover_video": "" } }, "updates": "./updates.php", "templates": { "render": "./templates/template.php", "content": "./templates/content.php" }, "fields": { "title": { "label": "Title", "source": true }, "meta": { "label": "Meta", "source": true }, "content": { "label": "Content", "type": "editor", "source": true }, "image": { "label": "Image", "type": "image", "source": true, "show": "!video", "altRef": "%name%_alt" }, "video": { "label": "Video", "description": "Select a video file or enter a link from <a href=\"https://www.youtube.com\" target=\"_blank\">YouTube</a> or <a href=\"https://vimeo.com\" target=\"_blank\">Vimeo</a>.", "type": "video", "source": true, "show": "!image" }, "image_alt": { "label": "Image Alt", "source": true, "show": "image && !video" }, "icon": { "label": "Icon", "description": "Instead of using a custom image, you can click on the pencil to pick an icon from the icon library.", "type": "icon", "source": true, "enable": "!image && !video" }, "link": "${builder.link}", "link_text": { "label": "Link Text", "description": "Set a different link text for this item.", "source": true, "enable": "link" }, "link_aria_label": { "label": "Link ARIA Label", "description": "Set a different link ARIA label for this item.", "source": true, "enable": "link" }, "hover_image": { "label": "Hover Image", "description": "Select an optional image that appears on hover.", "type": "image", "source": true, "show": "!hover_video", "enable": "image || video" }, "hover_video": { "label": "Hover Video", "description": "Select an optional video that appears on hover.", "type": "video", "source": true, "show": "!hover_image", "enable": "image || video" }, "tags": { "label": "Tags", "description": "Enter a comma-separated list of tags, for example, <code>blue, white, black</code>.", "source": true }, "panel_style": { "label": "Style", "description": "Select one of the boxed card or tile styles or a blank panel.", "type": "select", "options": { "None": "", "Card Default": "card-default", "Card Primary": "card-primary", "Card Secondary": "card-secondary", "Card Hover": "card-hover", "Tile Default": "tile-default", "Tile Muted": "tile-muted", "Tile Primary": "tile-primary", "Tile Secondary": "tile-secondary" } }, "item_element": "${builder.html_element_item}", "lightbox_image_focal_point": { "label": "Image Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "lightbox_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true }, "image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true, "enable": "image || video" }, "image_text_color": { "label": "Text Color", "description": "Set light or dark color mode for text, buttons and controls if a sticky transparent navbar is displayed above.", "type": "select", "options": { "None": "", "Light": "light", "Dark": "dark" }, "source": true, "enable": "image || video" }, "hover_image_focal_point": { "label": "Focal Point", "description": "Set a focal point to adjust the image focus when cropping.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" }, "source": true }, "status": "${builder.statusItem}", "source": "${builder.source}" }, "fieldset": { "default": { "type": "tabs", "fields": [ { "title": "Content", "fields": [ "title", "meta", "content", "image", "video", "image_alt", "icon", "link", "link_text", "link_aria_label", "hover_image", "hover_video", "tags" ] }, { "title": "Settings", "fields": [ { "label": "Panel", "type": "group", "divider": true, "fields": ["panel_style", "item_element"] }, { "label": "Lightbox", "type": "group", "divider": true, "fields": [ "lightbox_image_focal_point", "lightbox_text_color" ] }, { "label": "Image", "type": "group", "divider": true, "fields": [ "image_focal_point", "image_text_color" ] }, { "label": "Hover Image", "type": "group", "fields": ["hover_image_focal_point"] } ] }, "${builder.advancedItem}" ] } } } elements/grid_item/templates/content.php 0000644 00000002270 15175623010 0014505 0 ustar 00 <?php if ($props['image']) : ?> <img src="<?= $props['image'] ?>" alt="<?= $props['image_alt'] ?>"> <?php endif ?> <?php if ($props['video']) : ?> <?php if ($this->iframeVideo($props['video'], [], false)) : ?> <iframe src="<?= $props['video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['hover_image']) : ?> <img src="<?= $props['hover_image'] ?>" alt> <?php endif ?> <?php if ($props['hover_video']) : ?> <?php if ($this->iframeVideo($props['hover_video'], [], false)) : ?> <iframe src="<?= $props['hover_video'] ?>"></iframe> <?php else : ?> <video src="<?= $props['hover_video'] ?>"></video> <?php endif ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <<?= $element['title_element'] ?>><?= $props['title'] ?></<?= $element['title_element'] ?>> <?php endif ?> <?php if ($props['meta'] != '') : ?> <p><?= $props['meta'] ?></p> <?php endif ?> <?php if ($props['content'] != '') : ?> <div><?= $props['content'] ?></div> <?php endif ?> <?php if ($props['link']) : ?> <p><a href="<?= $props['link'] ?>"><?= $props['link_text'] ?: $element['link_text'] ?></a></p> <?php endif ?> elements/grid_item/templates/template-image.php 0000644 00000000724 15175623010 0015730 0 ustar 00 <?php $image = $this->el('image', [ 'src' => $src, 'alt' => $props['image_alt'], 'loading' => $element['image_loading'] ? false : null, 'width' => $element['image_width'], 'height' => $element['image_height'], 'focal_point' => $focal, 'uk-svg' => $element['image_svg_inline'], 'thumbnail' => true, 'class' => [ 'uk-text-{image_svg_color} {@image_svg_inline}' => $this->isImage($src) == 'svg', ], ]); return $image; elements/grid_item/templates/template-media.php 0000644 00000011325 15175623010 0015724 0 ustar 00 <?php if ($props['video']) { $src = $props['video']; $media = include "{$__dir}/template-video.php"; } elseif ($props['image']) { $src = $props['image']; $focal = $props['image_focal_point']; $media = include "{$__dir}/template-image.php"; } elseif ($props['icon']) { $media = include "{$__dir}/template-icon.php"; } else { return; } // Media $media->attr([ 'class' => [ 'el-image', ], ]); $transition = ''; $decoration = ''; if ($props['image'] || $props['video']) { $media->attr([ 'class' => [ 'uk-transition-{image_transition} uk-transition-opaque' => $props['link'] && ($element['image_link'] || $element['panel_link']), 'uk-inverse-{image_text_color}', 'uk-flex-1 {@panel_expand: image|both}', ], ]); if (in_array($element['panel_expand'], ['image', 'both']) || ($media->name == 'video' && $element['image_width'] && $element['image_height'])) { $media->attr([ 'class' => [ 'uk-object-cover', 'uk-object-{0}' => $props['image_focal_point'], ], 'style' => [ // Keep video responsiveness but with new proportions (because video isn't cropped like an image) 'aspect-ratio: {image_width} / {image_height};' => $media->name == 'video', ], ]); } // Transition + Hover Image if ($element['image_transition'] || $props['hover_image'] || $props['hover_video']) { $transition = $this->el('div', [ 'class' => [ 'uk-inline-clip', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ]); } ($transition ?: $media)->attr('class', [ 'uk-border-{image_border}' => !$element['panel_style'] || ($element['panel_style'] && (!$element['panel_image_no_padding'] || $element['image_align'] == 'between')), 'uk-box-shadow-{image_box_shadow} {@!panel_style}', 'uk-box-shadow-hover-{image_hover_box_shadow} {@!panel_style}' => $props['link'] && ($element['image_link'] || $element['panel_link']), ]); // Decoration if ($element['image_box_decoration'] || $element['image_transition_border']) { $decoration = $this->el('div', [ 'class' => [ 'uk-box-shadow-bottom {@image_box_decoration: shadow}', 'tm-mask-default {@image_box_decoration: mask}', 'tm-box-decoration-{image_box_decoration: default|primary|secondary}', 'tm-box-decoration-inverse {@image_box_decoration_inverse} {@image_box_decoration: default|primary|secondary}', 'tm-transition-border {@image_transition_border}', 'uk-inline', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ]); } } ($decoration ?: $transition ?: $media)->attr('class', [ 'uk-transition-toggle {@image_link}' => $element['image_transition'] || $element['image_transition_border'] || $props['hover_image'] || $props['hover_video'], 'uk-margin[-{image_margin}]-top {@!image_margin: remove}' => $element['image_align'] == 'between' || ($element['image_align'] == 'bottom' && !($element['panel_style'] && $element['panel_image_no_padding'])), ]); // Hover Media $hover_media = ''; if (($props['hover_image'] || $props['hover_video']) && ($props['image'] || $props['video'])) { if ($props['hover_video']) { $src = $props['hover_video']; $hover_media = include "{$__dir}/template-video.php"; } elseif ($props['hover_image']) { $src = $props['hover_image']; $focal = $props['hover_image_focal_point']; $hover_media = include "{$__dir}/template-image.php"; } $hover_media->attr([ 'class' => [ 'el-hover-image', 'uk-transition-{image_transition}', 'uk-transition-fade {@!image_transition}', 'uk-object-{0}' => $props['hover_image_focal_point'], // `uk-cover` already sets object-fit to cover ], 'uk-cover' => true, 'uk-video' => false, // Resets 'alt' => true, // Image 'loading' => false, // Image + Iframe 'preload' => false, // Video ]); } ?> <?php if ($decoration) : ?> <?= $decoration($element) ?> <?php endif ?> <?php if ($transition) : ?> <?= $transition($element) ?> <?php endif ?> <?php if ($media) : ?> <?= $media($element, '') ?> <?php endif ?> <?php if ($hover_media) : ?> <?= $hover_media($element, '') ?> <?php endif ?> <?php if ($transition) : ?> <?= $transition->end() ?> <?php endif ?> <?php if ($decoration) : ?> <?= $decoration->end() ?> <?php endif ?> elements/grid_item/templates/template-link.php 0000644 00000007707 15175623010 0015613 0 ustar 00 <?php namespace YOOtheme; use YOOtheme\Http\Uri; /** @var ImageProvider $imageProvider */ $imageProvider = app(ImageProvider::class); $link = $props['link'] ? $this->el('a', [ 'href' => $props['link'], 'aria-label' => $props['link_aria_label'] ?: $element['link_aria_label'], ]) : null; // Lightbox if ($link && $element['lightbox']) { if ($type = $this->isImage($props['link'])) { if ($type !== 'svg' && ($element['lightbox_image_width'] || $element['lightbox_image_height'])) { $thumbnail = [$element['lightbox_image_width'], $element['lightbox_image_height'], $element['lightbox_image_orientation']]; if (!empty($props['lightbox_image_focal_point'])) { [$y, $x] = explode('-', $props['lightbox_image_focal_point']); $thumbnail += [3 => $x, 4 => $y]; } $props['link'] = (string) (new Uri($props['link']))->withFragment('thumbnail=' . implode(',', $thumbnail)); } $link->attr([ 'href' => $imageProvider->getUrl($props['link']), 'data-alt' => $props['image_alt'], 'data-type' => 'image', ]); } elseif ($this->isVideo($props['link'])) { $link->attr('data-type', 'video'); } elseif (!$this->iframeVideo($props['link'])) { $link->attr('data-type', 'iframe'); } else { $link->attr('data-type', true); } // Caption $caption = ''; if ($props['title'] != '' && $element['title_display'] != 'item') { $caption .= "<h4 class='uk-margin-remove'>{$props['title']}</h4>"; if ($element['title_display'] == 'lightbox') { $props['title'] = ''; } } if ($props['content'] != '' && $element['content_display'] != 'item') { $caption .= $props['content']; if ($element['content_display'] == 'lightbox') { $props['content'] = ''; } } if ($caption) { $link->attr('data-caption', $caption); } // Text Color $element['lightbox_text_color'] = $props['lightbox_text_color'] ?: $element['lightbox_text_color']; if ($element['lightbox_text_color']) { $link->attr('data-attrs', "class: uk-inverse-{$element['lightbox_text_color']}"); } } elseif ($link) { $link->attr([ 'target' => ['_blank {@link_target}'], 'uk-scroll' => str_contains((string) $props['link'], '#'), ]); } if ($link && $element['panel_link']) { $link_container->attr($link->attrs + [ 'class' => [ 'uk-link-toggle', ], ]); $props['title'] = $this->striptags($props['title']); $props['meta'] = $this->striptags($props['meta']); $props['content'] = $this->striptags($props['content']); if ($props['title'] != '' && $element['title_hover_style'] != 'reset') { $props['title'] = $this->el('span', [ 'class' => [ 'uk-link-{title_hover_style: heading}', 'uk-link {!title_hover_style}', ], ], $props['title'])->render($element); } } if ($link && $props['title'] != '' && $element['title_link']) { $props['title'] = $link($element, [], $this->striptags($props['title'])); // title_hover_style is set on title } if ($link && $props['image'] && $element['image_link']) { $props['image'] = $link($element, [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', ], ], $props['image']); } if ($link && ($props['link_text'] || $element['link_text'])) { if ($element['panel_link']) { $link = $this->el('div'); } $link->attr('class', [ 'el-link', 'uk-{link_style: link-(muted|text)}', 'uk-button uk-button-{!link_style: |link-muted|link-text} [uk-button-{link_size}] [uk-width-1-1 {@link_fullwidth}]', // Keep link style if panel link 'uk-link {@link_style:} {@panel_link}', 'uk-text-muted {@link_style: link-muted} {@panel_link}', ]); } return $link; elements/grid_item/templates/template-video.php 0000644 00000001350 15175623010 0015750 0 ustar 00 <?php if ($iframe = $this->iframeVideo($src)) { $video = $this->el('iframe', [ 'src' => $iframe, 'uk-responsive' => true, 'loading' => ['lazy {@image_loading}'], 'class' => [ 'uk-disabled', ], 'uk-video' => [ 'automute: true;', ], ]); } else { $video = $this->el('video', [ 'src' => $src, 'controls' => false, 'loop' => true, 'autoplay' => true, 'muted' => true, 'playsinline' => true, 'preload' => ['none {@image_loading}'], 'uk-video' => true, ]); } $video->attr([ 'width' => $element['image_width'], 'height' => $element['image_height'], ]); return $video; elements/grid_item/templates/template-content.php 0000644 00000012716 15175623010 0016324 0 ustar 00 <?php // Title $title = $this->el($element['title_element'], [ 'class' => [ 'el-title', 'uk-{title_style}', 'uk-card-title {@panel_style} {@!title_style}', 'uk-heading-{title_decoration}', 'uk-font-{title_font_family}', 'uk-link-{title_hover_style} {@title_link}', // Set here to style links which already come with dynamic content (WP taxonomy links) 'uk-text-{title_color} {@!title_color: background}', 'uk-margin[-{title_margin}]-top {@!title_margin: remove}', 'uk-margin-remove-top {@title_margin: remove}', 'uk-margin-remove-bottom', 'uk-flex-1 {@panel_expand: content|both}' => !$props['content'] && (!$props['meta'] || $element['meta_align'] == 'above-title') && (!$props['image'] || $element['image_align'] != 'between'), ], ]); // Meta $meta = $this->el($element['meta_element'], [ 'class' => [ 'el-meta', 'uk-{meta_style}', 'uk-text-{meta_color}', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{meta_margin: remove}-top]' => !in_array($element['meta_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']) || $element['meta_element'] != 'div', 'uk-flex-1 {@panel_expand: content|both}' => $element['meta_align'] == 'below-content' || (!$props['content'] && ($element['meta_align'] == 'above-content' || ($element['meta_align'] == 'below-title' && (!$props['image'] || $element['image_align'] != 'between')))), ], ]); // Content $content = $this->el('div', [ 'class' => [ 'el-content uk-panel', 'uk-{content_style}', '[uk-text-left{@content_align}]', 'uk-dropcap {@content_dropcap}', 'uk-column-{content_column}[@{content_column_breakpoint}]', 'uk-column-divider {@content_column} {@content_column_divider}', 'uk-margin[-{content_margin}]-top {@!content_margin: remove}', 'uk-margin-remove-bottom [uk-margin-{content_margin: remove}-top]' => !in_array($element['content_style'], ['', 'text-meta', 'text-lead', 'text-small', 'text-large']), 'uk-flex-1 {@panel_expand: content|both}' => !($props['meta'] && $element['meta_align'] == 'below-content'), ], ]); // Link $link_container = $this->el('div', [ 'class' => [ 'uk-margin[-{link_margin}]-top {@!link_margin: remove}', 'uk-width-1-1 {@link_fullwidth} {@panel_expand}', ], ]); // Title Grid $grid = $this->el('div', [ 'class' => [ 'uk-child-width-expand', $element['title_grid_column_gap'] == $element['title_grid_row_gap'] ? 'uk-grid-{title_grid_column_gap}' : '[uk-grid-column-{title_grid_column_gap}] [uk-grid-row-{title_grid_row_gap}]', 'uk-margin[-{title_margin}]-top {@!title_margin: remove} {@image_align: top}' => !$props['meta'] || $element['meta_align'] != 'above-title', 'uk-margin[-{meta_margin}]-top {@!meta_margin: remove} {@image_align: top} {@meta_align: above-title}' => $props['meta'], 'uk-flex-1 {@panel_expand: content|both}', ], 'uk-grid' => true, ]); $cell_title = $this->el('div', [ 'class' => [ 'uk-width-{!title_grid_width: expand}[@{title_grid_breakpoint}]', 'uk-margin-remove-first-child', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-width-auto[@{title_grid_breakpoint}] {@title_grid_width: expand}', 'uk-margin-remove-first-child', 'uk-flex uk-flex-column {@panel_expand: content|both}', ], ]); ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $grid($element) ?> <?= $cell_title($element) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '') : ?> <?= $title($element) ?> <?php if ($element['title_color'] == 'background') : ?> <span class="uk-text-background"><?= $props['title'] ?></span> <?php elseif ($element['title_decoration'] == 'line') : ?> <span><?= $props['title'] ?></span> <?php else : ?> <?= $props['title'] ?> <?php endif ?> <?= $title->end() ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-title') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $cell_title->end() ?> <?= $cell_content($element) ?> <?php endif ?> <?php if ($element['image_align'] == 'between') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'above-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['content'] != '') : ?> <?= $content($element, $props['content']) ?> <?php endif ?> <?php if ($props['meta'] != '' && $element['meta_align'] == 'below-content') : ?> <?= $meta($element, $props['meta']) ?> <?php endif ?> <?php if ($props['link'] && ($props['link_text'] || $element['link_text'])) : ?> <?= $link_container($element, $link($element, $props['link_text'] ?: $element['link_text'])) ?> <?php endif ?> <?php if ($props['title'] != '' && $element['title_align'] == 'left') : ?> <?= $cell_content->end() ?> <?= $grid->end() ?> <?php endif ?> elements/grid_item/templates/template.php 0000644 00000023725 15175623010 0014656 0 ustar 00 <?php // Override default settings $element['panel_style'] = $props['panel_style'] ?: $element['panel_style']; // Resets if ($props['icon'] && !($props['image'] || $props['video'])) { $element['panel_image_no_padding'] = ''; } if ($element['panel_style'] || !($props['image'] || $props['video'])) { $element['image_box_decoration'] = ''; $element['image_transition_border'] = ''; } if (!($element['panel_style'] || (!$element['panel_style'] && ($props['image'] || $props['video']) && $element['image_align'] != 'between'))) { $element['panel_padding'] = ''; } if (!(($props['image'] || $props['video']) && $element['image_align'] == 'top' && !$element['panel_style'] && !$element['panel_padding'] && !$element['item_maxwidth'] && (!$element['grid_default'] || $element['grid_default'] == '1') && (!$element['grid_small'] || $element['grid_small'] == '1') && (!$element['grid_medium'] || $element['grid_medium'] == '1') && (!$element['grid_large'] || $element['grid_large'] == '1') && (!$element['grid_xlarge'] || $element['grid_xlarge'] == '1'))) { $element['panel_content_width'] = ''; } // Override default settings if ($element['grid_masonry'] && !(($props['image'] || $props['video']) && in_array($element['image_align'], ['left', 'right']))) { $element['panel_expand'] = ''; } $element['image_text_color'] = $props['image_text_color'] ?: $element['image_text_color']; // If link is not set use image/video field for the lightbox if (!$props['link'] && $element['lightbox']) { $props['link'] = $props['video'] ?: $props['image']; } // New logic shortcuts $element['flex_column_align'] = ''; $element['flex_column_align_fallback'] = ''; if ($element['panel_expand']) { $horizontal = ['left', 'center', 'right']; $vertical = ['top', 'middle', 'bottom']; $element['flex_column_align'] = str_replace($horizontal, $vertical, $element['text_align'] ?? ''); $element['flex_column_align_fallback'] = str_replace($horizontal, $vertical, $element['text_align_fallback'] ?? ''); // `uk-flex-top` prevents child inline elements from taking the whole width, needed for floating shadow + hover image if (!$element['panel_style']) { if ($element['text_align'] && $element['text_align_breakpoint'] && !$element['text_align_fallback']) { $element['flex_column_align_fallback'] = 'top'; } elseif (!$element['text_align']) { $element['flex_column_align'] = 'top'; } } } // Image $props['image'] = $this->render("{$__dir}/template-media", compact('props', 'element')); // Panel/Card/Tile $el = $this->el($props['item_element'] ?: 'div', [ 'class' => [ 'el-item', 'uk-margin-auto uk-width-{item_maxwidth}', 'uk-flex uk-flex-column {@panel_link}' => $props['link'], ], ]); // Link Container $link_container = $props['link'] && $element['panel_link'] ? $this->el('a', [ 'class' => [ 'uk-flex-1', ], ]) : null; ($link_container ?: $el)->attr([ 'class' => [ 'uk-panel [uk-{panel_style: tile-.*}] {@panel_style: |tile-.*}', 'uk-card uk-{panel_style: card-.*} [uk-card-{!panel_padding: |default}]', 'uk-tile-hover {@panel_style: tile-.*} {@panel_link} {@panel_link_hover}' => $props['link'], 'uk-card-hover {@panel_style: card-(default|primary|secondary)} {@panel_link} {@panel_link_hover}' => $props['link'], 'uk-transition-toggle {@panel_link}' => $props['image'] && ($element['image_transition'] || $element['image_transition_border'] || $props['hover_image'] || $props['hover_video']), 'uk-flex uk-flex-column {@panel_expand}', // Image not wrapped in card media container or grid 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand}' => !($element['panel_style'] && str_starts_with($element['panel_style'], 'card-') && $props['image'] && $element['panel_image_no_padding'] && $element['image_align'] != 'between') && !in_array($element['image_align'], ['left', 'right']), ], ]); // Padding || Content Width $content_container = ''; if (($element['panel_padding'] && $props['image'] && (!$element['panel_style'] || $element['panel_image_no_padding']) && $element['image_align'] != 'between') || $element['panel_content_width']) { $content_container = $this->el('div', [ 'class' => [ 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: content|both}', // 1 Column Content Width 'uk-container uk-container-{panel_content_width}', // Image not wrapped in card media container or grid 'uk-width-1-1 {@flex_column_align} {@panel_expand} {!panel_content_width}' => !($element['panel_style'] && str_starts_with($element['panel_style'], 'card-') && $props['image'] && $element['panel_image_no_padding'] && $element['image_align'] != 'between') && !in_array($element['image_align'], ['left', 'right']), ], ]); } ($content_container ?: $link_container ?: $el)->attr('class', [ 'uk-padding[-{!panel_padding: default}] {@panel_style: |tile-.*} {@panel_padding}', 'uk-card-body {@panel_style: card-.*} {@panel_padding}', ]); // Image align $grid = ''; $cell_image = ''; $cell_content = ''; if ($props['image'] && in_array($element['image_align'], ['left', 'right'])) { $grid = $this->el('div', [ 'class' => [ $element['panel_style'] && $element['panel_image_no_padding'] ? 'uk-grid-collapse' : ($element['image_grid_column_gap'] == $element['image_grid_row_gap'] ? 'uk-grid-{image_grid_column_gap}' : '[uk-grid-column-{image_grid_column_gap}] [uk-grid-row-{image_grid_row_gap}]'), // Center vertically 'uk-flex-middle {@image_vertical_align} {@!panel_expand}', // Expand 'uk-flex-1 {@panel_expand}', 'uk-flex-column {@panel_expand} uk-flex-row@{image_grid_breakpoint}', ], 'uk-grid' => true, ]); $cell_image = $this->el('div', [ 'class' => [ 'uk-width-{image_grid_width}[@{image_grid_breakpoint}]', // Order 'uk-flex-last[@{image_grid_breakpoint}] {@image_align: right}', // Center vertically and keep text align 'uk-flex uk-flex-middle[@{image_grid_breakpoint}] uk-flex-{text_align} {@image_vertical_align} {@panel_expand: content}', 'uk-flex-{text_align}[@{text_align_breakpoint} [uk-flex-{text_align_fallback}]] {@panel_expand: content}', // Expand, also when stacking 'uk-flex uk-flex-column {@panel_expand: image|both} [uk-flex-1 uk-flex-initial@{image_grid_breakpoint}]', 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand: image|both}', ], ]); $cell_content = $this->el('div', [ 'class' => [ 'uk-width-expand', // Center vertically 'uk-flex uk-flex-column uk-flex-center[@{image_grid_breakpoint}] {@image_vertical_align} {@panel_expand: image}', // Expand, also when stacking but only for `content` 'uk-flex uk-flex-column {@panel_expand: content|both}', 'uk-flex-1 {@image_grid_breakpoint} {@panel_expand: content}', 'uk-flex-1[@{image_grid_breakpoint} uk-flex-none] {@panel_expand: both}', 'uk-flex-none uk-flex-1@{image_grid_breakpoint} {@panel_expand: image}', ], ]); } ($content_container ?: $cell_content ?: $link_container ?: $el)->attr('class', [ 'uk-margin-remove-first-child {@!panel_content_width}', ]); // Link $link = include "{$__dir}/template-link.php"; // Card Media (Needs to be after link) if ($element['panel_style'] && str_starts_with($element['panel_style'], 'card-') && $props['image'] && $element['panel_image_no_padding'] && $element['image_align'] != 'between') { $props['image'] = $this->el('div', [ 'class' => [ 'uk-card-media-{image_align}', 'uk-flex-1 uk-flex uk-flex-column {@panel_expand: image|both}', 'uk-flex-{flex_column_align}[@{text_align_breakpoint} [uk-flex-{flex_column_align_fallback}]] {@panel_expand: image|both} {@!image_align: left|right}', ], 'uk-toggle' => [ 'cls: uk-card-media-{image_align} uk-card-media-top; mode: media; media: @{image_grid_breakpoint} {@image_align: left|right}', ] ], $props['image'])->render($element); } ?> <?= $el($element, $attrs) ?> <?php if ($link_container) : ?> <?= $link_container($element) ?> <?php endif ?> <?php if ($grid) : ?> <?= $grid($element) ?> <?php endif ?> <?php if ($cell_image) : ?> <?= $cell_image($element) ?> <?php endif ?> <?php if (in_array($element['image_align'], ['left', 'right'])) : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($cell_image) : ?> <?= $cell_image->end() ?> <?php endif ?> <?php if ($cell_content) : ?> <?= $cell_content($element) ?> <?php endif ?> <?php if ($element['image_align'] == 'top') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($content_container) : ?> <?= $content_container($element) ?> <?php endif ?> <?= $this->render("{$__dir}/template-content", compact('props', 'link')) ?> <?php if ($content_container) : ?> <?= $content_container->end() ?> <?php endif ?> <?php if ($element['image_align'] == 'bottom') : ?> <?= $props['image'] ?> <?php endif ?> <?php if ($cell_content) : ?> <?= $cell_content->end() ?> <?php endif ?> <?php if ($grid) : ?> <?= $grid->end() ?> <?php endif ?> <?php if ($link_container) : ?> <?= $link_container->end() ?> <?php endif ?> <?= $el->end() ?> elements/grid_item/templates/template-icon.php 0000644 00000000364 15175623010 0015576 0 ustar 00 <?php $icon = $this->el('span', [ 'class' => [ 'uk-text-{icon_color}', ], 'uk-icon' => [ 'icon: {0};' => $props['icon'], 'width: {icon_width};', 'height: {icon_width};', ], ]); return $icon; bootstrap.php 0000644 00000005751 15175623010 0007302 0 ustar 00 <?php namespace YOOtheme\Builder; use YOOtheme\Builder; use YOOtheme\Config; use YOOtheme\View; return [ 'routes' => [ ['post', '/builder/encode', BuilderController::class . '@encodeLayout'], ['get', '/builder/library', BuilderController::class . '@index'], ['post', '/builder/library', BuilderController::class . '@addElement'], ['delete', '/builder/library', BuilderController::class . '@removeElement'], ], 'events' => [ 'customizer.init' => [ Listener\LoadBuilderData::class => ['@handle', -10], ], ], 'extend' => [ View::class => function (View $view, $app) { $builder = function ($node, $params = []) use ($app) { // support old builder arguments if (!is_string($node)) { $node = json_encode($node); } if (is_string($params)) { $params = ['prefix' => $params]; } return $app(Builder::class)->render($node, $params); }; $view->addFunction('builder', $builder); }, ], 'services' => [ Builder::class => function (View $view, Config $config, UpdateTransform $update) { $config->addFile('builder', __DIR__ . '/config/builder.json'); // Deprecated: BC support e.g. `${builder:margin}` config interpolation in element json files. $config->addFilter('builder', fn($value) => $config->get("builder.{$value}")); $builder = new Builder([$config, 'loadFile'], [$view, 'render']); $builder->addTransform('preload', $update); $builder->addTransform('preload', new DefaultTransform()); if ($config('app.isCustomizer')) { $builder->addTransform('preload', new IndexTransform()); } $builder->addTransform('preload', [CollapseTransform::class, 'preload']); $builder->addTransform('presave', new OptimizeTransform()); $builder->addTransform('prerender', new NormalizeTransform()); $builder->addTransform('precontent', new NormalizeTransform()); $builder->addTransform('prerender', new DisabledTransform()); $builder->addTransform('precontent', new DisabledTransform()); $builder->addTransform('prerender', new PlaceholderTransform()); $builder->addTransform('render', new ElementTransform($view)); $builder->addTransform('render', [CollapseTransform::class, 'render']); $builder->addTransform('render', new VisibilityTransform()); $builder->addTypePath(__DIR__ . '/elements/*/element.json'); return $builder; }, BuilderConfig::class => '', UpdateTransform::class => function (Config $config) { $update = new UpdateTransform($config('theme.version', '')); $update->addGlobals(require __DIR__ . '/updates.php'); return $update; }, ], ]; updates.php 0000644 00000020704 15175623010 0006725 0 ustar 00 <?php namespace YOOtheme; return [ '3.1.0-beta.0.1' => function ($node) { if ( ($target = Arr::get($node->props, 'parallax_target')) && str_starts_with($target, '![uk-grid]') ) { Arr::set($node->props, 'parallax_target', str_replace('[uk-grid]', '', $target)); } }, '3.0.5.1' => function ($node) { if ( (Arr::get($node->props, 'animation') == 'parallax' || Arr::get($node->props, 'item_animation') == 'parallax') && !is_numeric(Arr::get($node->props, 'parallax_easing')) ) { Arr::set($node->props, 'parallax_easing', '1'); } }, '3.0.0-beta.3.1' => function ($node) { if (Arr::get($node->props, 'parallax_target') === false) { Arr::del($node->props, 'parallax_target'); } }, '3.0.0-beta.2.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( $style === 'fjord' && !array_key_exists('@base-h6-font-size', $config('~theme.less', [])) && Arr::get($node->props, 'title_style') === 'h6' && Arr::get($node->props, 'title_element') === 'h4' ) { $node->props['title_style'] = ''; } }, '2.8.0-beta.0.3' => function ($node) { foreach (['x', 'y', 'scale', 'rotate', 'opacity'] as $prop) { $key = "parallax_{$prop}"; // Cleanup old values from before introducing '_start' and '_end' props Arr::del($node->props, $key); $start = implode( ',', array_map('trim', explode(',', Arr::get($node->props, "{$key}_start", ''))), ); $end = implode( ',', array_map('trim', explode(',', Arr::get($node->props, "{$key}_end", ''))), ); if ($start !== '' || $end !== '') { $default = in_array($prop, ['scale', 'opacity']) ? 1 : 0; Arr::set( $node->props, $key, implode(',', [ $start !== '' ? $start : $default, $end !== '' ? $end : $default, ]), ); } Arr::del($node->props, "{$key}_start"); Arr::del($node->props, "{$key}_end"); } }, '2.8.0-beta.0.1' => function ($node) { if (Arr::get($node->props, 'parallax_target')) { $node->props['parallax_target'] = '!.uk-section'; } Arr::updateKeys($node->props, [ 'parallax_viewport' => function ($value) { if (!empty($value) && ($viewport = 100 * (1 - (float) $value))) { return ['parallax_end' => "{$viewport}vh + {$viewport}%"]; } }, ]); }, '2.7.11.1' => function ($node) { unset($node->props['pointer_events']); }, '2.1.1.1' => function ($node) { /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ($style == 'horizon') { if ( (Arr::get($node->props, 'title_style') === 'h6' || (Arr::get($node->props, 'title_element') === 'h6' && empty(Arr::get($node->props, 'title_style')))) && empty(Arr::get($node->props, 'title_color')) ) { $node->props['title_color'] = 'primary'; } } if ($style == 'fjord') { if ( (Arr::get($node->props, 'title_style') === 'h4' || (Arr::get($node->props, 'title_element') === 'h4' && empty(Arr::get($node->props, 'title_style')))) && empty(Arr::get($node->props, 'title_color')) ) { $node->props['title_color'] = 'primary'; } } }, '2.1.0-beta.0.1' => function ($node, array $params) { $type = $params['type']; if (Arr::get($node->props, 'maxwidth') === 'xxlarge') { $node->props['maxwidth'] = '2xlarge'; } // move declaration of uk-hidden class to visibility settings if ($type->element && empty($node->props['visibility']) && !empty($node->props['class'])) { $node->props['class'] = trim( preg_replace_callback( '/(^|\s+)uk-hidden@(s|m|l|xl)/', function ($match) use ($node) { $node->props['visibility'] = "hidden-{$match[2]}"; return ''; }, $node->props['class'], ), ); } }, '1.22.0-beta.0.1' => function ($node) { if (in_array($node->type ?? '', ['joomla_position', 'wordpress_area'])) { Arr::updateKeys($node->props, [ 'grid_divider' => 'divider', 'grid_gutter' => fn($value) => ['column_gap' => $value, 'row_gap' => $value], ]); } }, '1.20.0-beta.1.1' => function ($node) { if ( in_array($node->type ?? '', [ 'joomla_position', 'wordpress_area', 'joomla_module', 'wordpress_widget', ]) ) { Arr::updateKeys($node->props, ['maxwidth_align' => 'block_align']); } }, '1.20.0-beta.0.1' => function ($node) { if (in_array($node->type ?? '', ['joomla_module', 'wordpress_widget'])) { if (Arr::get($node->props, 'title_style') === 'heading-primary') { $node->props['title_style'] = 'heading-medium'; } /** @var Config $config */ $config = app(Config::class); [$style] = explode(':', $config('~theme.style')); if ( in_array($style, [ 'craft', 'district', 'jack-backer', 'tomsen-brody', 'vision', 'florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek', ]) ) { if ( Arr::get($node->props, 'title_style') === 'h1' || (empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1') ) { $node->props['title_style'] = 'heading-small'; } } if (in_array($style, ['florence', 'max', 'nioh-studio', 'sonic', 'summit', 'trek'])) { if (Arr::get($node->props, 'title_style') === 'h2') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h2' ) { $node->props['title_style'] = 'h1'; } } if (in_array($style, ['fuse', 'horizon', 'joline', 'juno', 'lilian', 'vibe', 'yard'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-small'; } } if ($style == 'copper-hill') { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h1' ? '' : 'h1'; } elseif (Arr::get($node->props, 'title_style') === 'h1') { $node->props['title_style'] = Arr::get($node->props, 'title_element') === 'h2' ? '' : 'h2'; } elseif ( empty($node->props['title_style']) && Arr::get($node->props, 'title_element') === 'h1' ) { $node->props['title_style'] = 'h2'; } } if (in_array($style, ['trek', 'fjord'])) { if (Arr::get($node->props, 'title_style') === 'heading-medium') { $node->props['title_style'] = 'heading-large'; } } } }, ]; config/builder.json 0000644 00000040440 15175623010 0010334 0 ustar 00 { "@import": ["../../builder-source/config/builder.json"], "advanced": { "title": "Advanced", "fields": ["name", "status", "source", "id", "class", "attributes", "css", "transform"] }, "advancedItem": { "title": "Advanced", "fields": ["status", "source"] }, "name": { "label": "Name", "description": "Define a name to easily identify this element inside the builder." }, "status": { "label": "Status", "description": "Disable the element and publish it later.", "type": "checkbox", "text": "Disable element", "attrs": { "true-value": "disabled", "false-value": "" } }, "statusItem": { "label": "Status", "description": "Disable the item and publish it later.", "type": "checkbox", "text": "Disable item", "attrs": { "true-value": "disabled", "false-value": "" } }, "id": { "label": "ID", "description": "Define a unique identifier for the element.", "source": true }, "cls": { "label": "Classes", "description": "Define one or more class names for the element. Separate multiple classes with spaces.", "source": true }, "attrs": { "label": "Attributes", "description": "Define one or more attributes for the element. Separate attribute name and value by <code>=</code> character. One attribute per line.", "type": "editor", "editor": "code", "attrs": { "debounce": 500 }, "source": true }, "transform": { "label": "Transform", "description": "Transform the element into another element while keeping its content and settings. Unused content and settings are removed. Transforming into a preset only keeps the content but adopts all preset settings.", "type": "button", "text": "Select Element", "event": "transformBuilderElement" }, "html_element": { "label": "HTML Element", "description": "Define the purpose and structure of the content or give it no semantic meaning.", "type": "select", "options": { "div": "", "address": "address", "article": "article", "aside": "aside", "footer": "footer", "header": "header", "hgroup": "hgroup", "nav": "nav", "section": "section" } }, "html_element_item": { "label": "HTML Element", "description": "Define the purpose and structure of the content or give it no semantic meaning.", "type": "select", "options": { "div": "", "address": "address", "article": "article", "section": "section" } }, "position": { "label": "Position", "description": "Position the element in the normal content flow, or in normal flow but with an offset relative to itself, or remove it from the flow and position it relative to the containing column.", "type": "select", "options": { "Static": "", "Relative": "relative", "Absolute": "absolute" } }, "position_left": { "label": "Left", "description": "Set the horizontal position of the element's left edge in pixels. A different unit like % or vw can also be entered.", "type": "range", "attrs": { "min": -600, "max": 600, "step": 10 }, "enable": "position && !position_right" }, "position_right": { "label": "Right", "description": "Set the horizontal position of the element's right edge in pixels. A different unit like % or vw can also be entered.", "type": "range", "attrs": { "min": -600, "max": 600, "step": 10 }, "enable": "position && !position_left" }, "position_top": { "label": "Top", "description": "Set the horizontal position of the element's top edge in pixels. A different unit like % or vw can also be entered.", "type": "range", "attrs": { "min": -600, "max": 600, "step": 10 }, "enable": "position && !position_bottom" }, "position_bottom": { "label": "Bottom", "description": "Set the horizontal position of the element's bottom edge in pixels. A different unit like % or vw can also be entered.", "type": "range", "attrs": { "min": -600, "max": 600, "step": 10 }, "enable": "position && !position_top" }, "position_z_index": { "label": "Z Index", "description": "Position the element above or below other elements. If they have the same stack level, the position depends on the order in the layout.", "type": "select", "options": { "None": "", "0": "0", "1": "1", "2": "2", "3": "3" }, "enable": "position" }, "blend": { "label": "Blend", "description": "Blend the element with the page content.", "type": "checkbox", "text": "Blend with page content" }, "margin": { "label": "Margin", "description": "Set the vertical margin. Note: The first element's top margin and the last element's bottom margin are always removed. Define those in the grid settings instead.", "type": "select", "options": { "Keep existing": "", "Small": "small", "Default": "default", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "None": "remove-vertical" }, "enable": "position != 'absolute'" }, "margin_remove_top": { "type": "checkbox", "text": "Remove top margin", "enable": "position != 'absolute' && margin != 'remove-vertical'" }, "margin_remove_bottom": { "type": "checkbox", "text": "Remove bottom margin", "enable": "position != 'absolute' && margin != 'remove-vertical'" }, "maxwidth": { "label": "Max Width", "description": "Set the maximum content width.", "type": "select", "options": { "None": "", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" } }, "maxwidth_breakpoint": { "label": "Max Width Breakpoint", "description": "Define the device width from which the max-width will apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "maxwidth" }, "block_align": { "label": "Block Alignment", "description": "Define the alignment in case the container exceeds the element max-width.", "type": "select", "options": { "Left": "", "Center": "center", "Right": "right" }, "enable": "position != 'absolute' && maxwidth" }, "block_align_breakpoint": { "label": "Block Alignment Breakpoint", "description": "Define the device width from which the alignment will apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "position != 'absolute' && maxwidth" }, "block_align_fallback": { "label": "Block Alignment Fallback", "description": "Define an alignment fallback for device widths below the breakpoint.", "type": "select", "options": { "Left": "", "Center": "center", "Right": "right" }, "enable": "position != 'absolute' && maxwidth && block_align_breakpoint" }, "text_align": { "label": "Text Alignment", "description": "Center, left and right alignment may depend on a breakpoint and require a fallback.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right" } }, "text_align_justify": { "label": "Text Alignment", "description": "Center, left and right alignment may depend on a breakpoint and require a fallback.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right", "Justify": "justify" } }, "text_align_breakpoint": { "label": "Text Alignment Breakpoint", "description": "Define the device width from which the alignment will apply.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" }, "enable": "text_align && text_align != 'justify'" }, "text_align_fallback": { "label": "Text Alignment Fallback", "description": "Define an alignment fallback for device widths below the breakpoint.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right" }, "enable": "text_align && text_align_breakpoint" }, "text_align_justify_fallback": { "label": "Text Alignment Fallback", "description": "Define an alignment fallback for device widths below the breakpoint.", "type": "select", "options": { "None": "", "Left": "left", "Center": "center", "Right": "right", "Justify": "justify" }, "enable": "text_align && text_align != 'justify' && text_align_breakpoint" }, "animation": { "label": "Animation", "description": "Override the section animation setting. This option won't have any effect unless animations are enabled for this section.", "type": "select", "options": [ { "text": "Inherit", "value": "" }, { "text": "None", "value": "none" }, { "text": "Parallax", "value": "parallax" }, { "label": "Animations", "options": [ { "text": "Fade", "value": "fade" }, { "text": "Scale Up", "value": "scale-up" }, { "text": "Scale Down", "value": "scale-down" }, { "text": "Slide Top Small", "value": "slide-top-small" }, { "text": "Slide Bottom Small", "value": "slide-bottom-small" }, { "text": "Slide Left Small", "value": "slide-left-small" }, { "text": "Slide Right Small", "value": "slide-right-small" }, { "text": "Slide Top Medium", "value": "slide-top-medium" }, { "text": "Slide Bottom Medium", "value": "slide-bottom-medium" }, { "text": "Slide Left Medium", "value": "slide-left-medium" }, { "text": "Slide Right Medium", "value": "slide-right-medium" }, { "text": "Slide Top 100%", "value": "slide-top" }, { "text": "Slide Bottom 100%", "value": "slide-bottom" }, { "text": "Slide Left 100%", "value": "slide-left" }, { "text": "Slide Right 100%", "value": "slide-right" } ] } ] }, "item_animation": { "type": "checkbox", "text": "Animate items", "show": "!$match(animation, 'none|parallax')" }, "_parallax_button": { "type": "button-panel", "text": "Edit Parallax", "panel": "builder-parallax", "enable": "animation == 'parallax'" }, "visibility": { "label": "Visibility", "description": "Show or hide the element on this device width and larger. If all elements are hidden, columns, rows and sections will hide accordingly.", "type": "select", "options": { "Always": "", "Visible Small (Phone Landscape)": "s", "Visible Medium (Tablet Landscape)": "m", "Visible Large (Desktop)": "l", "Visible X-Large (Large Screens)": "xl", "Hidden Small (Phone Landscape)": "hidden-s", "Hidden Medium (Tablet Landscape)": "hidden-m", "Hidden Large (Desktop)": "hidden-l", "Hidden X-Large (Large Screens)": "hidden-xl" } }, "container_padding_remove": { "label": "Section/Row", "description": "If a section or row has a max width, and one side is expanding to the left or right, the default padding can be removed from the expanding side.", "type": "checkbox", "text": "Remove left or right padding", "enable": "position != 'absolute'" }, "image": { "label": "Image", "type": "image", "source": true, "enable": "!icon", "altRef": "%name%_alt" }, "image_alt": { "label": "Image Alt", "source": true, "enable": "image" }, "icon_width": { "label": "Icon Width", "description": "Set the icon width.", "enable": "icon" }, "icon_color": { "label": "Icon Color", "description": "Set the icon color.", "type": "select", "options": { "None": "", "Muted": "muted", "Emphasis": "emphasis", "Primary": "primary", "Success": "success", "Warning": "warning", "Danger": "danger" }, "enable": "icon" }, "link": { "label": "Link", "type": "link", "description": "Enter or pick a link, an image or a video file.", "attrs": { "placeholder": "http://" }, "source": true }, "link_target": { "type": "checkbox", "text": "Open the link in a new window" }, "link_title": { "label": "Link Title", "description": "Enter an optional text for the title attribute of the link, which will appear on hover.", "source": true }, "link_aria_label": { "label": "Link ARIA Label", "description": "Enter a descriptive text label to make it accessible if the link has no visible text.", "source": true }, "column_width_options_default": { "Fraction Layouts": { "1/1": "", "1/2": "1-2", "1/3": "1-3", "2/3": "2-3", "1/4": "1-4", "3/4": "3-4", "1/5": "1-5", "2/5": "2-5", "3/5": "3-5", "4/5": "4-5", "1/6": "1-6", "5/6": "5-6" }, "Fixed Layouts": { "Expand": "expand", "Auto": "auto", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" } }, "column_width_options": { "-": "", "Fraction Layouts": { "1/1": "1-1", "1/2": "1-2", "1/3": "1-3", "2/3": "2-3", "1/4": "1-4", "3/4": "3-4", "1/5": "1-5", "2/5": "2-5", "3/5": "3-5", "4/5": "4-5", "1/6": "1-6", "5/6": "5-6" }, "Fixed Layouts": { "Expand": "expand", "Auto": "auto", "Small": "small", "Medium": "medium", "Large": "large", "X-Large": "xlarge", "2X-Large": "2xlarge" } }, "column_order_first_options": { "None": "", "Always": "xs", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" } } config/customizer.json 0000644 00000035245 15175623010 0011121 0 ustar 00 { "@import": [ "../../builder-templates/config/customizer.json", "../../builder-${app.platform}/config/customizer.json" ], "panels": { "builder": { "title": "Builder", "heading": false, "width": 500, "priority": 20 }, "builder-parallax": { "title": "Parallax", "width": 500, "fields": { "parallax_x": { "text": "Translate X", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "parallax_y": { "text": "Translate Y", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "parallax_scale": { "text": "Scale", "type": "parallax-stops", "attrs": { "min": 0.5, "max": 2, "step": 0.1 } }, "parallax_rotate": { "text": "Rotate", "type": "parallax-stops", "attrs": { "min": 0, "max": 360, "step": 10 } }, "parallax_opacity": { "text": "Opacity", "type": "parallax-stops", "attrs": { "min": 0, "max": 1, "step": 0.1 } }, "parallax_blur": { "text": "Blur", "type": "parallax-stops", "attrs": { "min": 0, "max": 100, "step": 1 } }, "_parallax_description": { "description": "Animate properties to specific values. Add multiple stops to define start, intermediate and end values along the animation sequence for each property. Optionally, specify percentage to position the stops along the animation sequence. Translate and scale can have optional <code>%</code>, <code>vw</code> and <code>vh</code> units.", "type": "description" }, "parallax_transform_origin": { "label": "Transform Origin", "description": "Define the origin of the element's transformation when scaling or rotating the element.", "type": "select", "options": { "Top Left": "top-left", "Top Center": "top-center", "Top Right": "top-right", "Center Left": "center-left", "Center Center": "", "Center Right": "center-right", "Bottom Left": "bottom-left", "Bottom Center": "bottom-center", "Bottom Right": "bottom-right" } }, "parallax_easing": { "label": "Easing", "description": "Set the animation easing. Zero transitions at an even speed, a negative value starts off quickly while a positive value starts off slowly.", "type": "range", "attrs": { "min": -2, "max": 2, "step": 0.1 } }, "parallax_target": { "label": "Target", "description": "The animation starts and stops depending on the element position in the viewport. Alternatively, use the position of a parent container.", "type": "select", "options": { "Element": "", "Column": "!.tm-grid-expand>*", "Row": "!.tm-grid-expand", "Section": "!.uk-section", "Next Section": "![class*='uk-section-'] ~ [class*='uk-section-']" } }, "parallax_start_end": { "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the target's height.", "type": "grid", "width": "1-2", "fields": { "parallax_start": { "label": "Start" }, "parallax_end": { "label": "End" } } }, "parallax_zindex": { "label": "Z Index", "type": "checkbox", "text": "Set a higher stacking order." }, "parallax_breakpoint": { "label": "Breakpoint", "description": "Display the parallax effect only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" } } }, "help": { "Builder": [ { "title": "Creating Parallax Effects", "src": "https://www.youtube-nocookie.com/watch?v=PKVnGZjd0dE&list=PLrqT0WH0HPdPfykSwhMt6Jl2_RgJ6ixU-", "duration": "9:59", "documentation": "support/yootheme-pro/joomla/joomla/elements#parallax-settings", "support": "support/search?tags=125&q=parallax" }, { "title": "Creating Sticky Parallax Effects", "src": "https://www.youtube-nocookie.com/watch?v=_fykqti6DYc&list=PLrqT0WH0HPdPfykSwhMt6Jl2_RgJ6ixU-", "duration": "19:01", "documentation": "support/yootheme-pro/joomla/joomla/elements#sticky-parallax-settings", "support": "support/search?tags=125&q=sticky%20parallax" } ] } }, "background-parallax": { "title": "Parallax", "width": 500, "fields": { "background_parallax_background": { "text": "Background", "type": "parallax-stops", "input": "color" }, "_background_parallax_description": { "description": "Add multiple stops to define start, intermediate and end colors along the animation sequence. Optionally, specify percentage to position the stops along the animation sequence.", "type": "description" }, "background_parallax_easing": { "label": "Easing", "description": "Set the animation easing. Zero transitions at an even speed, a negative value starts off quickly while a positive value starts off slowly.", "type": "range", "attrs": { "min": -2, "max": 2, "step": 0.1 } }, "background_parallax_start_end": { "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the target's height.", "type": "grid", "width": "1-2", "fields": { "background_parallax_start": { "label": "Start" }, "background_parallax_end": { "label": "End" } } } } }, "image-parallax": { "title": "Parallax", "width": 500, "fields": { "image_parallax_bgx": { "text": "Translate X", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "image_parallax_bgy": { "text": "Translate Y", "type": "parallax-stops", "attrs": { "min": -600, "max": 600, "step": 10 } }, "_image_parallax_description": { "description": "Animate properties to specific values. Add multiple stops to define start, intermediate and end values along the animation sequence. Optionally, specify percentage to position the stops along the animation sequence. Translate can have optional <code>%</code>, <code>vw</code> and <code>vh</code> units.", "type": "description" }, "image_parallax_easing": { "label": "Easing", "description": "Set the animation easing. Zero transitions at an even speed, a negative value starts off quickly while a positive value starts off slowly.", "type": "range", "attrs": { "min": -2, "max": 2, "step": 0.1 } }, "image_parallax_target": { "label": "Target", "description": "The animation starts and stops depending on the section position in the viewport. Alternatively, for example for sticky sections, use the position of next section.", "type": "select", "options": { "Section": "", "Next Section": "![class*='uk-section-'] ~ [class*='uk-section-']" } }, "image_parallax_start_end": { "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the target's height.", "type": "grid", "width": "1-2", "fields": { "image_parallax_start": { "label": "Start" }, "image_parallax_end": { "label": "End" } } }, "image_parallax_breakpoint": { "label": "Breakpoint", "description": "Display the parallax effect only on this device width and larger.", "type": "select", "options": { "Always": "", "Small (Phone Landscape)": "s", "Medium (Tablet Landscape)": "m", "Large (Desktop)": "l", "X-Large (Large Screens)": "xl" } } } }, "media-overlay-parallax": { "title": "Parallax", "width": 500, "fields": { "media_overlay_parallax_opacity": { "text": "Opacity", "type": "parallax-stops", "attrs": { "min": 0, "max": 1, "step": 0.1 } }, "_media_overlay_parallax_description": { "description": "Add multiple stops to define start, intermediate and end opacity along the animation sequence. Optionally, specify percentage to position the stops along the animation sequence.", "type": "description" }, "media_overlay_parallax_easing": { "label": "Easing", "description": "Set the animation easing. Zero transitions at an even speed, a negative value starts off quickly while a positive value starts off slowly.", "type": "range", "attrs": { "min": -2, "max": 2, "step": 0.1 } }, "media_overlay_parallax_target": { "label": "Target", "description": "The animation starts and stops depending on the section position in the viewport. Alternatively, for example for sticky sections, use the position of next section.", "type": "select", "options": { "Section": "", "Next Section": "![class*='uk-section-'] ~ [class*='uk-section-']" } }, "media_overlay_parallax_start_end": { "description": "The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset, e.g. <code>100px</code>, <code>50vh</code> or <code>50vh + 50%</code>. Percent relates to the target's height.", "type": "grid", "width": "1-2", "fields": { "media_overlay_parallax_start": { "label": "Start" }, "media_overlay_parallax_end": { "label": "End" } } } } } } } src/Builder/BuilderConfig.php 0000644 00000000443 15175623010 0012147 0 ustar 00 <?php namespace YOOtheme\Builder; use YOOtheme\Builder; use YOOtheme\ConfigObject; class BuilderConfig extends ConfigObject { /** * Constructor. */ public function __construct(Builder $builder) { parent::__construct(['elements' => $builder->types]); } } src/Builder/IndexTransform.php 0000644 00000001434 15175623010 0012377 0 ustar 00 <?php namespace YOOtheme\Builder; class IndexTransform { /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array &$params) { if ($params['context'] !== 'render') { return; } if (empty($params['prefix'])) { return; } $node->attrs ??= []; if (empty($params['parent'])) { $node->attrs['data-id'] = "{$params['prefix']}#root"; return; } $prefix = empty($params['data-id']) ? "{$params['prefix']}#" : "{$params['data-id']}-"; $node->attrs['data-id'] = $params['data-id'] = $prefix . $params['i']; $node->attrs['data-element'] = $params['type']->element ?? null; } } src/Builder/ElementType.php 0000644 00000003104 15175623010 0011663 0 ustar 00 <?php namespace YOOtheme\Builder; use YOOtheme\Arr; /** * @property bool $container * @property bool $element */ class ElementType implements \JsonSerializable { /** * @var array */ public $data; /** * Constructor. * * @param array $data */ public function __construct(array $data = []) { $this->data = $data; } /** * Gets a data value. * * @param string $key * * @return mixed */ public function __get($key) { return $this->data[$key] ?? null; } /** * Checks if a data value exists. * * @param string $key * * @return bool */ public function __isset($key) { return isset($this->data[$key]); } /** * Handles method calls. * * @param string $name * @param array $args * * @return mixed */ public function __call($name, array $args) { $method = $this->$name; if (!is_callable($method)) { trigger_error( sprintf('Call to undefined method %s::%s()', __CLASS__, $name), E_USER_ERROR, ); } if ($method instanceof \Closure) { $method = $method->bindTo($this); } return call_user_func_array($method, $args); } /** * Returns data for JSON serialize. * * @return array */ #[\ReturnTypeWillChange] public function jsonSerialize() { return Arr::omit($this->data, ['templates', 'transforms', 'updates', 'path']); } } src/Builder/CollapseTransform.php 0000644 00000001360 15175623010 0013070 0 ustar 00 <?php namespace YOOtheme\Builder; class CollapseTransform { /** * Transform "preload" callback. * * @param object $node * @param array $params */ public static function preload($node, array $params) { if ($params['context'] !== 'render') { return; } $node->parent = !empty($node->children) && $params['type']->container; } /** * Transform "render" callback. * * @param object $node * @param array $params * * @return bool */ public static function render($node, array $params) { return empty($node->parent) || !empty($node->children) || ($node->props['prevent_collapse'] ?? false); } } src/Builder/DefaultTransform.php 0000644 00000000621 15175623010 0012711 0 ustar 00 <?php namespace YOOtheme\Builder; class DefaultTransform { /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array $params) { $type = $params['type']; // Defaults if ($type->defaults && !empty($params['parent'])) { $node->props += $type->defaults; } } } src/Builder/Listener/LoadBuilderData.php 0000644 00000001177 15175623010 0014205 0 ustar 00 <?php namespace YOOtheme\Builder\Listener; use YOOtheme\Builder\BuilderConfig; use YOOtheme\Metadata; class LoadBuilderData { public Metadata $metadata; public BuilderConfig $config; public function __construct(Metadata $metadata, BuilderConfig $config) { $this->config = $config; $this->metadata = $metadata; } public function handle(): void { $this->metadata->set( 'script:builder-data', sprintf( 'window.yootheme ||= {}; var $builder = yootheme.builder = %s;', json_encode($this->config), ), ); } } src/Builder/PlaceholderTransform.php 0000644 00000001507 15175623010 0013553 0 ustar 00 <?php namespace YOOtheme\Builder; class PlaceholderTransform { /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array $params) { $type = $params['type']; // Placeholder props if ( isset($type->placeholder['props']) && !array_any($type->placeholder['props'], fn($value, $key) => isset($node->props[$key])) ) { $node->props = array_merge($node->props, $type->placeholder['props']); } // Placeholder children if (isset($type->placeholder['children']) && empty($node->children)) { $node->children = array_map( fn($value) => (object) $value, $type->placeholder['children'], ); } } } src/Builder/NormalizeTransform.php 0000644 00000001306 15175623010 0013266 0 ustar 00 <?php namespace YOOtheme\Builder; class NormalizeTransform { /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array $params) { $type = $params['type']; $node->attrs ??= []; $node->children ??= []; // Default to "null", if field not exists $fields = $type->fields ?? []; foreach ($type->panels ?? [] as $panel) { if (isset($panel['fields'])) { $fields += $panel['fields']; } } foreach (array_diff_key($fields, $node->props) as $name => $value) { $node->props[$name] = null; } } } src/Builder/OptimizeTransform.php 0000644 00000002411 15175623010 0013124 0 ustar 00 <?php namespace YOOtheme\Builder; class OptimizeTransform { /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array $params) { // remove empty name if (isset($node->name) && $node->name == '') { unset($node->name); } // remove empty children if (empty($node->children)) { unset($node->children); } $type = $params['type']; if (!$type) { return; } foreach ($node->props as $name => $value) { // skip default values if (isset($type->defaults[$name])) { continue; } // skip placeholder props if (isset($type->placeholder['props'][$name])) { continue; } // remove empty values if ($value === '') { unset($node->props[$name]); } } // remove null props $node->props = array_filter($node->props, fn($value) => isset($value)); // sort props ksort($node->props); // remove empty props if (empty($node->props)) { unset($node->props); } } } src/Builder/DisabledTransform.php 0000644 00000000525 15175623010 0013037 0 ustar 00 <?php namespace YOOtheme\Builder; class DisabledTransform { /** * Transform callback. * * @param object $node * @param array $params * @return bool */ public function __invoke($node, array $params) { return !isset($node->props['status']) || $node->props['status'] !== 'disabled'; } } src/Builder/BuilderController.php 0000644 00000003237 15175623010 0013071 0 ustar 00 <?php namespace YOOtheme\Builder; use YOOtheme\Builder; use YOOtheme\Http\Request; use YOOtheme\Http\Response; use YOOtheme\Storage; class BuilderController { public function index(Request $request, Response $response, Storage $storage, Builder $builder) { $library = $storage('library') ?: []; $library = array_map('json_encode', $library); $library = array_map([$builder, 'load'], $library); return $response->withJson($library); } public function encodeLayout(Request $request, Response $response, Builder $builder) { $layout = $request->getParam('layout'); if (!$layout) { $request->abort(400, 'Missing request parameters.'); } return $response->withJson( $builder->withParams(['context' => 'save'])->load(json_encode($layout)), ); } public function addElement( Request $request, Response $response, Storage $storage, Builder $builder ) { $id = $request->getParam('id'); $element = $request->getParam('element'); if (!$id || !$element) { $request->abort(400, 'Missing request parameters.'); } $element = $builder->withParams(['context' => 'save'])->load(json_encode($element)); $storage->set("library.{$id}", $element); return $response->withJson($element); } public function removeElement(Request $request, Response $response, Storage $storage) { $id = $request->getQueryParam('id'); if ($id) { $storage->del("library.{$id}"); } return $response->withJson(['message' => 'success']); } } src/Builder/VisibilityTransform.php 0000644 00000006035 15175623010 0013461 0 ustar 00 <?php namespace YOOtheme\Builder; class VisibilityTransform { protected static array $bounds = [['', 's', 'm', 'l', 'xl'], ['s', 'm', 'l', 'xl', '']]; /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array $params) { $type = $params['type']; $parent = $params['parent']; if (empty($parent) || !($type->element || $type->container)) { return; } $visibility = $this->intersect( $this->toRange($node->props['visibility'] ?? ''), $node->props['child_visibility'] ?? false, ); // Column may prevent collapsing and should not be visible while stacking than if (!$node->children && ($node->props['prevent_collapse'] ?? false)) { foreach (['default', 'small', 'medium', 'large', 'xlarge'] as $i => $width) { $value = $node->props["width_{$width}"] ?? ''; if ($value && $value !== '1-1') { $visibility = $this->intersect( $visibility, $this->toRange(static::$bounds[0][$i]), ); break; } } } $node->attrs['class']['uk-visible@{0}'] = $visibility[0]; $node->attrs['class']['uk-hidden@{0}'] = $visibility[1]; $parent->props['child_visibility'] = $this->merge( $visibility, $parent->props['child_visibility'] ?? false, ); } /** * Convert to visibility range. * * @param string|array $visibility * * @return string[] */ protected function toRange($visibility): array { if (is_array($visibility)) { return $visibility; } $hidden = str_starts_with($visibility, 'hidden-'); return [$hidden ? '' : $visibility, $hidden ? substr($visibility, 7) : '']; } /** * Returns intersection of two visibility ranges. * * @param string[] $rangeA * @param string[] $rangeB * * @return string[] */ protected function intersect($rangeA, $rangeB): array { if (!$rangeB) { return $rangeA; } [$lower, $upper] = static::$bounds; return [ $lower[max(array_search($rangeA[0], $lower), array_search($rangeB[0], $lower))], $upper[min(array_search($rangeA[1], $upper), array_search($rangeB[1], $upper))], ]; } /** * Returns union of two visibility ranges. * * @param string[] $rangeA * @param string[] $rangeB * * @return string[] */ protected function merge($rangeA, $rangeB): array { if (!$rangeB) { return $rangeA; } [$lower, $upper] = static::$bounds; return [ $lower[min(array_search($rangeA[0], $lower), array_search($rangeB[0], $lower))], $upper[max(array_search($rangeA[1], $upper), array_search($rangeB[1], $upper))], ]; } } src/Builder/UpdateTransform.php 0000644 00000005276 15175623010 0012562 0 ustar 00 <?php namespace YOOtheme\Builder; class UpdateTransform { /** * @var string */ protected $version; /** * @var array */ protected $updates = []; /** * @var array */ protected $globals = []; /** * Constructor. * * @param string $version */ public function __construct($version) { $this->version = $version; } /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array &$params) { if (isset($node->version)) { $params['version'] = $node->version; } elseif (empty($params['version'])) { $params['version'] = '1.0.0'; } if (empty($params['parent'])) { $node->version = $this->version; } else { unset($node->version); } $version = $params['version']; // check node version if (version_compare($version, $this->version, '>=')) { return; } if (!isset($params['updateContext'])) { $params['updateContext'] = new \ArrayObject(); } // apply update callbacks foreach ($this->resolveUpdates($params['type'], $version) as $update) { $update($node, $params); } } /** * Adds global updates for any type. * * @param array $globals * * @return $this */ public function addGlobals(array $globals) { $this->globals[] = $globals; return $this; } /** * Resolves updates for a type and current version. * * @param object $type * @param string $version * * @return array */ protected function resolveUpdates($type, $version) { if (isset($this->updates[$type->name][$version])) { return $this->updates[$type->name][$version]; } $updates = $this->globals; if (isset($type->updates)) { if (is_array($type->updates)) { $updates[] = $type->updates; } elseif (is_string($type->updates) && is_file($type->updates)) { $updates[] = require $type->updates; } } $resolved = []; foreach ($updates as $update) { foreach ($update as $ver => $func) { if (version_compare($ver, $version, '>') && is_callable($func)) { $resolved[$ver][] = $func; } } } uksort($resolved, 'version_compare'); return $this->updates[$type->name][$version] = $resolved ? array_merge(...array_values($resolved)) : []; } } src/Builder/ElementTransform.php 0000644 00000026703 15175623010 0012727 0 ustar 00 <?php namespace YOOtheme\Builder; use YOOtheme\Builder; use YOOtheme\View; class ElementTransform { /** * @var View */ protected $view; public function __construct(View $view) { $this->view = $view; } /** * Transform callback. * * @param object $node * @param array $params */ public function __invoke($node, array $params) { $type = $params['type']; if (empty($params['parent']) || !($type->element || $type->container)) { return; } $node->attrs += [ 'id' => !empty($node->props['id']) ? $node->props['id'] : null, 'class' => !empty($node->props['class']) ? [$node->props['class']] : [], ]; $this->parallax($node); $this->position($node, $params); $this->blend($node, $params); $this->margin($node); $this->maxWidth($node); $this->textAlign($node); $this->customAttributes($node); $this->customCSS($node, $params); if ($type->element) { $this->animation($node, $params); $this->containerPadding($node, $params); } } /** * @param object $node * @param array $params */ public function animation($node, array $params) { /** @var Builder $builder */ $builder = $params['builder']; $path = $params['path']; if (!empty($node->props['image_svg_inline']) && !empty($node->props['image_svg_animate'])) { $node->props['image_svg_inline'] = [ 'stroke-animation: true; attributes: uk-scrollspy-class:uk-animation-stroke', ]; } if ($builder->parent($path, 'section', 'animation')) { $attr = 'uk-scrollspy-class'; $value = $node->props['animation'] ?? null; $value = in_array($value, ['none', 'parallax']) ? false : (!empty($value) ? ['uk-animation-{0}' => $value] : true); } else { if (!empty($node->props['image_svg_inline'])) { $attr = 'uk-scrollspy'; $value = ['target: [uk-scrollspy-class];']; } // Reset animation if there is no section animation, // so no look up is needed in Grid and Gallery to animate filter navigation if (($node->props['animation'] ?? null) !== 'parallax') { $node->props['animation'] = 'none'; } } if (!empty($value) && !empty($attr)) { foreach (!empty($node->props['item_animation']) ? $node->children : [$node] as $child) { $child->attrs[$attr] = $value; } } } /** * @param object $node */ public function parallax($node) { if (empty($node->props['animation']) || $node->props['animation'] !== 'parallax') { return; } $node->attrs['class'][] = 'uk-position-z-index uk-position-relative {@parallax_zindex}'; $node->attrs['class'][] = 'uk-transform-origin-{parallax_transform_origin}'; if ($options = $this->view->parallaxOptions($node->props)) { $node->attrs['uk-parallax'] = $options; } } /** * @param object $node * @param array $params */ public function position($node, array $params) { if (empty($node->props['position'])) { return; } foreach (['left', 'right', 'top', 'bottom'] as $pos) { if ( !empty($node->props["position_{$pos}"]) && is_numeric($node->props["position_{$pos}"]) ) { $node->props["position_{$pos}"] .= 'px'; } } $node->attrs['class'][] = 'uk-position-{position} [uk-width-1-1 {@position: absolute}]'; $node->attrs['style'][] = 'left: {position_left}; {@!position_right}'; $node->attrs['style'][] = 'right: {position_right}; {@!position_left}'; $node->attrs['style'][] = 'top: {position_top}; {@!position_bottom}'; $node->attrs['style'][] = 'bottom: {position_bottom}; {@!position_top}'; $node->attrs['style'][] = 'z-index: {position_z_index};'; if ($node->props['position'] == 'absolute') { $params['parent']->props['element_absolute'] = true; } } /** * @param object $node */ public function blend($node, array $params) { if (empty($node->props['blend'])) { return; } if ($params['parent']->props['position_sticky']) { $node->attrs['class'][] = 'uk-blend-overlay'; } else { $node->attrs['class'][] = 'uk-blend-difference'; } } /** * @param object $node */ public function margin($node) { if (($node->props['position'] ?? '') === 'absolute') { return; } if ($node->type !== 'row') { $node->attrs['class'][] = 'uk-margin {@margin: default}'; $node->attrs['class'][] = 'uk-margin-{!margin: |default}'; if (empty($node->props['margin']) || $node->props['margin'] !== 'remove-vertical') { $node->attrs['class'][] = 'uk-margin-remove-top {@margin_remove_top}'; $node->attrs['class'][] = 'uk-margin-remove-bottom {@margin_remove_bottom}'; } } } /** * @param object $node */ public function maxWidth($node) { if (empty($node->props['maxwidth'])) { return; } $node->attrs['class'][] = 'uk-width-{maxwidth}[@{maxwidth_breakpoint}]'; if (empty($node->props['position']) || $node->props['position'] !== 'absolute') { // Left $node->attrs['class'][] = 'uk-margin-auto-right{@!block_align}{@block_align_fallback}[@{block_align_breakpoint}]'; $node->attrs['class'][] = 'uk-margin-remove-left{@!block_align}{@block_align_fallback}@{block_align_breakpoint}'; // Right $node->attrs['class'][] = 'uk-margin-auto-left{@block_align: right}[@{block_align_breakpoint}]'; $node->attrs['class'][] = 'uk-margin-remove-right{@block_align: right}{@block_align_fallback: center}@{block_align_breakpoint}'; // Center $node->attrs['class'][] = 'uk-margin-auto{@block_align: center}[@{block_align_breakpoint}]'; // Fallback $node->attrs['class'][] = 'uk-margin-auto-left{@block_align_fallback: right} {@block_align_breakpoint}'; $node->attrs['class'][] = 'uk-margin-auto{@block_align_fallback: center} {@block_align_breakpoint}'; } } /** * @param object $node */ public function textAlign($node) { if (empty($node->props['text_align'])) { return; } $node->attrs['class'][] = $node->props['text_align'] === 'justify' ? 'uk-text-{text_align}' : 'uk-text-{text_align}[@{text_align_breakpoint} [uk-text-{text_align_fallback}]]'; } /** * @param object $node */ public function customAttributes($node) { if (empty($node->props['attributes'])) { return; } foreach (explode("\n", $node->props['attributes']) as $attribute) { [$name, $value] = array_pad(explode('=', $attribute, 2), 2, ''); $name = trim($name); if ($name && !in_array($name, ['id', 'class'])) { $node->attrs[$name] = $value ? preg_replace('/^([\'"])(.*)(\1)/', '$2', $value) : true; } } } /** * @param object $node * @param array $params */ public function customCSS($node, array $params) { if (empty($node->props['css'])) { return; } if (empty($node->attrs['id'])) { $node->attrs['id'] = $this->getUniqueId($params['prefix']); } $css = static::prefixCSS($node->props['css'], '#' . addcslashes($node->attrs['id'], '#')); $css = preg_replace('/[\r\n\h]+/u', ' ', $css); $css = preg_replace('/\s*([{}])\s*/', '$1', $css); $root = end($params['path']); $root->props['css'] = trim(($root->props['css'] ?? '') . $css); } /** * @param object $node * @param array $params */ public function containerPadding($node, array $params) { if ( empty($node->props['container_padding_remove']) || ($node->props['position'] ?? '') === 'absolute' ) { return; } /** @var Builder $builder */ $builder = $params['builder']; $path = $params['path']; $parent = $params['parent']; // Container Padding Remove $row = $builder->parent($path, 'row'); $orderFirstColumn = array_find( $row->children, fn($column) => !empty($column->props['order_first'] ?? null), ); $orderLastColumn = array_find( array_reverse($row->children), fn($column) => empty($column->props['order_first'] ?? null), ); $index = array_search($parent, $row->children); $first = $parent === $orderFirstColumn || (!$orderFirstColumn && $index === 0); $last = $parent === $orderLastColumn || (!$orderLastColumn && $index + 1 === count($row->children)); foreach (['row', 'section'] as $type) { if ( !in_array($builder->parent($path, $type, 'width'), [ 'default', 'small', 'large', 'xlarge', ]) || !($dir = $builder->parent($path, $type, 'width_expand')) ) { continue; } $node->attrs['class']['uk-container-item-padding-remove-left'] = $first && $dir === 'left'; $node->attrs['class']['uk-container-item-padding-remove-right'] = $last && $dir === 'right'; break; } } /** * Prefix CSS classes. * * @param string $css * @param string $prefix * * @return string */ protected static function prefixCSS($css, $prefix = '') { $pattern = '/([@#:.\w[\]][\\\\@#:,>~="\'+\-^$.()\w\s[\]*]*)({(?:[^{}]+|(?R))*})/'; if (preg_match_all($pattern, $css, $matches, PREG_SET_ORDER)) { $keys = []; foreach ($matches as $match) { [$match, $selector, $content] = $match; if (in_array($key = sha1($match), $keys)) { continue; } if ($selector[0] != '@') { $selector = preg_replace('/(^|,)\s*/', "$0{$prefix} ", $selector); $selector = preg_replace( '/\s\.el-(element|section|row|column)/', '', $selector, ); } $css = str_replace($match, $selector . static::prefixCSS($content, $prefix), $css); $keys[] = $key; } } return $css; } protected function getUniqueId($prefix) { static $prefixes = []; if (!isset($prefixes[$prefix])) { $prefixes[$prefix] = 0; } return "{$prefix}#" . $prefixes[$prefix]++; } } src/Builder.php 0000644 00000016354 15175623010 0007443 0 ustar 00 <?php namespace YOOtheme; use YOOtheme\Builder\ElementType; class Builder { /** * @var callable */ public $renderer; /** * @var callable */ public $loader; /** * @var array */ public $params; /** * @var array */ public $types = []; /** * @var array */ public $resolved = []; /** * @var array */ public $transforms = []; /** * Constructor. * * @param callable $loader * @param callable $renderer * @param array $params */ public function __construct(callable $loader, callable $renderer, array $params = []) { $params['builder'] = $this; $this->params = $params; $this->loader = $loader; $this->renderer = $renderer; } /** * Clone callback. */ public function __clone() { $this->params['builder'] = $this; } /** * Returns an instance with given parameters. * * @param array $params * * @return static */ public function withParams(array $params = []) { $clone = clone $this; $clone->params = array_merge($clone->params, $params); return $clone; } /** * Loads nodes from data. * * @param string $data * @param array $params * * @return object|void */ public function load($data, array $params = []) { $params += $this->params + ['context' => null]; if (is_object($node = json_decode($data))) { // Workaround for layouts with {type: ""} if (empty($node->type)) { $node->type = 'layout'; } // Apply (pre)load transforms $node = $this->applyTransforms('load', $node, $params); // Apply (pre)context transforms if ($params['context']) { $node = $this->applyTransforms($params['context'], $node, $params); } return $node; } } /** * Renders a node. * * @param mixed $node * @param array $params * * @return string|void */ public function render($node, array $params = []) { $params += $this->params + ['context' => 'render']; if (is_string($node)) { $node = $this->load($node, $params); } if (is_array($node)) { $result = ''; foreach ($node as $i => $child) { $result .= $this->render($child, ['i' => $i] + $params); } return $result; } if (isset($node, $this->types[$node->type]->templates[$params['context']])) { $templ = $this->types[$node->type]->templates[$params['context']]; $params = array_merge($params, (array) $node, compact('node')); return call_user_func($this->renderer, $templ, $params); } } /** * Finds a parent node in path. * * @param array $path * @param string $type * @param string $prop * * @return mixed|null|void */ public function parent(array $path, $type, $prop = null) { foreach ($path as $node) { if ($node->type !== $type) { continue; } if ($prop) { return $node->props[$prop] ?? null; } return $node; } } /** * Adds a node type. * * @param array $type * * @return $this */ public function addType(array $type) { $type = Event::emit('builder.type|filter', $type); if (isset($type['name'])) { $this->types[$type['name']] = new ElementType($type); } return $this; } /** * Adds node types from path. * * @param string|string[] $paths * @param string $basePath * * @return $this */ public function addTypePath($paths, $basePath = null) { foreach ((array) $paths as $path) { $files = glob(Path::resolve($basePath, $path)); $types = array_map($this->loader, $files ?: []); foreach ($types as $type) { $this->addType($type); } } return $this; } /** * Adds a node transform. * * @param string $context * @param callable $transform * @param int|null $offset * * @return $this */ public function addTransform($context, callable $transform, $offset = null) { if (!isset($this->transforms[$context])) { $this->transforms[$context] = []; } Arr::splice($this->transforms[$context], $offset, 0, [$transform]); $this->resolved = []; return $this; } /** * Applies node transforms. * * @param string $context * @param object $node * @param array $params * * @return object|void */ protected function applyTransforms($context, $node, array $params) { $node->props = (array) ($node->props ?? []); if (isset($node->type, $this->types[$node->type])) { $params['type'] = $this->types[$node->type]; if (empty($params['path'])) { $params['path'] = []; } if (empty($params['parent'])) { $params['parent'] = null; } foreach ($this->resolveTransforms($params['type'], "pre{$context}") as $transform) { if ($transform($node, $params) === false) { return; } } if (!empty($node->children)) { $children = []; $childParams = $params; array_unshift($childParams['path'], $childParams['parent'] = $node); // use for-loop to allow adding nodes in transform for ($i = 0; $i < count($node->children); $i++) { if ( $child = $this->applyTransforms( $context, $node->children[$i], ['i' => $i] + $childParams, ) ) { $children[] = $child; } } $node->children = $children; } foreach ($this->resolveTransforms($params['type'], $context) as $transform) { if ($transform($node, $params) === false) { return; } } } return $node; } /** * Resolves transforms for a type and context. * * @param object $type * @param string $context * * @return array */ protected function resolveTransforms($type, $context) { $key = "{$type->name}:{$context}"; if (!isset($this->resolved[$key])) { $resolved = []; if (isset($this->transforms[$context])) { $resolved = array_merge($resolved, $this->transforms[$context]); } if (isset($type->transforms[$context])) { $resolved[] = $type->transforms[$context]; } $this->resolved[$key] = $resolved; } return $this->resolved[$key]; } }
| ver. 1.4 |
Github
|
.
| PHP 8.3.23 | Generation time: 0.05 |
proxy
|
phpinfo
|
Settings