Skip to content

Add column settings editor #323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
siimha wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add column settings editor #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
675f6ae
Add row settings editor
siimha Jun 11, 2020
e79c2b4
Change key naming
siimha Jun 11, 2020
394e9a4
Remove duplicate code
siimha Jun 11, 2020
41bcc21
Rename page data item keys & classnames
siimha Jun 11, 2020
e7b54cb
Check for empty string
siimha Jun 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions components/template-tools.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,5 +105,63 @@
{% endif %};

site.bindRootItemSettings(rootItemValuesObj);

//==========================================================================
// Modular content area settings
//==========================================================================

{% if page.data.column_settings %}
var valuesObj = {{ page.data.column_settings | json }};
{% else %}
var valuesObj = {items_count: "1"};
{% endif %};

var settingsBtn = document.querySelector('.js-settings-btn');

var SettingsEditor = new Edicy.SettingsEditor(settingsBtn, {

@tambeta tambeta Jun 15, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Siin peaks eelnema kontroll, kas settingsBtn on väärtustatud.

menuItems: [
{
"title": "Columns count",

@tambeta tambeta Jun 15, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Siin peaks nähtavasti ka tõlked olema, aga see teada.

"type": "select",
"key": "items_count",
"list": [
{"title": "1", "value": "1"},
{"title": "2", "value": "2"},
{"title": "3", "value": "3"},
{"title": "4", "value": "4"},
{"title": "5", "value": "5"},
{"title": "6", "value": "6"},
{"title": "7", "value": "7"},
{"title": "8", "value": "8"},
]
},
{
"title": "Min item width in px",
"type": "number",
"min": 1,
"key": "min_width",
"placeholder": "Set min row item width in px"
},
{
"title": "Item padding in px",
"type": "number",
"min": 1,
"key": "padding",
"placeholder": "Set item padding in px"
}
],

values: valuesObj,

commit: function(data) {
pageData.set('column_settings', data, {
success: function() {
// reloading is necessary to rerender the content areas
window.location.reload();
}
});
}
});
document.querySelector('.js-settings-btn').removeAttribute('disabled');

@tambeta tambeta Jun 15, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Piisab

settingsBtn.removeAttribute('disabled');

</script>
{% endeditorjsblock %}
60 changes: 57 additions & 3 deletions layouts/common_page.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,41 @@
<head prefix="og: http://ogp.me/ns#">
{% include "html-head" sidebar: true %}
{% include "template-styles" %}

{% assign column_settings = page.data.column_settings %}

{% if column_settings.items_count != nil and column_settings.items_count != "" %}

@tambeta tambeta Jun 15, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kas Liquidis mingit blank?-stiilis kontrolli (a la Ruby) ei ole, või peabki alati nil ja "" vastu kontrollima?

{% assign column_count = column_settings.items_count %}
{% else %}
{% assign column_count = 1 %}
{% endif %}

<style>
.container-column-flex {
display: flex;
flex-wrap: wrap;
{% if column_settings.padding != nil and column_settings.padding != "" %}
margin: 0 -{{column_settings.padding}}px;
{% endif %}
}
.col-item {
flex: auto;
{% if column_settings.min_width != nil and column_settings.min_width != "" %}
min-width: {{column_settings.min_width}}px;
{% if column_settings.padding %}
{% endif %}
Comment on lines +29 to +30

@tambeta tambeta Jun 15, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Siin on read vahetusse läinud.

padding: {{column_settings.padding}}px;
{% endif %}
}

.container-column-{{column_count}} .col-item {
{% if column_settings.padding != nil and column_settings.padding != "" %}
width: calc(100%/{{column_count}} - {{column_settings.padding}}*2px);
{% else %}
width: calc(100%/{{column_count}});
{% endif %}
}
</style>
</head>

<body class="common-page{% if site.data.has_header_bg_color %} header-top-with-bg{% endif %}">
Expand All @@ -23,16 +58,35 @@
{% endif %}

<main class="page-content" role="main">
<div class="main-inner-row content-full">
<div class="main-content top-row">
<div class="main-inner-column content-full">
<div class="main-content top-column">
<div class="wrap">
{% if editmode or main_has_content %}
<div class="inner{% if editmode or left_has-content or right_has_content %} has-bottom-content{% endif %}">
{% include "menu-breadcrumbs" %}

{% comment %}TODO: Remove duplicate content-arera class.{% endcomment %}
<section class="content-area">
<div class="content-body content-area" data-search-indexing-allowed="true">{% content %}</div>
{% if editmode %}
<button disabled class="js-settings-btn">columns editor</button>
{% endif %}
Comment on lines +70 to +72

@tambeta tambeta Jun 15, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See võiks ka sisse trepitud olla ühtsuse ja ilusa koodi mõttes. Allpool samamoodi.


{% assign count = 1 %}

{% if column_count %}
{% assign count = column_count | to_num %}
{% endif %}

<div class="content-body container-column-flex container-column-{{ column_count }}">
{% for i in (1..count) %}
{% if forloop.first != true %}
{% assign name = "col-" | append: i %}
{% endif %}
<div class="col-item" data-search-indexing-allowed="true">
{% content name=name %}
</div>
{% endfor %}
</div>
</section>
</div>
{% endif %}
Expand Down