├── .gitignore
├── README.md
├── assets
├── css
│ └── structuretab.css
└── js
│ └── structuretab.js
├── structure-tabs.gif
└── structuretab.php
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Kirby-Structure-Tabs
2 | Tabbed Fields for Structured Content
3 |
4 | 
5 |
6 | The structure tab field type is designed specifically for use within the structure field and will not work outside of that context.
7 |
8 | The structure tab field also has the ability to track which tab was open when the user closed the modal. Essentially each time you click on one of that tabs, you're checking the box for that group of content and unchecking the box for the other groups.
9 |
10 | This data can be useful in your templates.
11 |
12 |
13 | #### Blueprint Example
14 | ``` YAML
15 | title: Page
16 | pages: true
17 | files: true
18 | fields:
19 | title:
20 | label: Title
21 | type: text
22 | modules:
23 | label: Modules
24 | type: structure
25 | entry: >
26 | {{projecttitle}}
27 | {{projectdate}}
28 | {{projectdescription}}
29 | {{name}}
30 | {{email}}
31 | fields:
32 | tab1:
33 | label: Project Info
34 | type: structuretab
35 | projecttitle:
36 | label: Project Title
37 | type: text
38 | width: 1/2
39 | projectdate:
40 | label: Project Date
41 | type: date
42 | width: 1/2
43 | projectdescription:
44 | label: Project Description
45 | type: textarea
46 | tab2:
47 | label: Author
48 | type: structuretab
49 | name:
50 | label: Name
51 | type: text
52 | email:
53 | label: Email
54 | type: email
55 | ```
56 |
--------------------------------------------------------------------------------
/assets/css/structuretab.css:
--------------------------------------------------------------------------------
1 | .modal-content-large{
2 | width: 80%;
3 | max-width: 1024px;
4 | }
5 |
6 | .group-title{
7 | position: absolute;
8 | top: -9999px;
9 | left: -9999px;
10 | opacity: 0;
11 | height: 0;
12 | width: 0;
13 | font-size: 0;
14 | }
15 |
16 | ul.tabs{
17 | width: 100%;
18 | margin-bottom: 20px;
19 | padding: 0px;
20 | list-style: none;
21 | border-bottom: 4px solid #dddddd;
22 | float: right;
23 | }
24 |
25 | ul.tabs li{
26 | display: inline-block;
27 | padding: 8px;
28 | margin-right: 5px;
29 | margin-bottom: -4px;
30 | background: none;
31 | display: inline-block;
32 | cursor: pointer;
33 | font-weight: 600;
34 | padding: 10px 15px;
35 | }
36 |
37 | ul.tabs li.current{
38 | border-bottom: 4px solid #8dae28;
39 | background: #efefef;
40 | }
41 |
42 | .group{
43 | display: none;
44 | padding: 15px;
45 | }
46 |
47 | .group.current{
48 | display: inherit;
49 | }
--------------------------------------------------------------------------------
/assets/js/structuretab.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | $(document).ready(function() {
3 |
4 | if (app && typeof app == 'object') {
5 | $(app.modal).on('view:load', initModalModules);
6 | }
7 |
8 | function initModalModules() {
9 |
10 | if ($('.modal-content input.structuretab').length)
11 |
12 | if ($(".modal-content").length){
13 | $('.modal-content').removeClass("modal-content-fixed");
14 | $(".modal-content .form").prepend($("").addClass("tabs"));
15 | }
16 |
17 | else{
18 | $('.modal-content .input.structuretab').first().closest('.field-grid-item').prepend($("").addClass("tabs"));
19 | }
20 |
21 | $('.modal-content label.structuretab').each(function() {
22 | var title = "" + $(this).closest(".field-grid-item").text().trim() + "";
23 | $(".tabs").append(title);
24 | });
25 |
26 | $('.modal-content label.structuretab').each(function() {
27 | $(this).closest(".field-grid-item").addClass("group-title");
28 | });
29 |
30 | $('.modal-content .group-title').each(function() {
31 | $(this).nextUntil(".modal-content .group-title").andSelf().wrapAll('');
32 | });
33 |
34 | $('.modal-content .group').each(function() {
35 | var id = $(this).find(".group-title label.structuretab").attr('name');
36 | $(this).attr('id', id);
37 | });
38 |
39 | if (!$('.modal-content .group.current').length) {
40 | $('.tabs li').first().addClass('current');
41 | var first_group = $('.group').first();
42 | first_group.addClass('current');
43 | first_group.find('input.structuretab').attr('checked', true);
44 | }
45 |
46 | $('.modal-content .tabs li').click(function() {
47 | $(this).addClass("current");
48 | $(this).siblings().removeClass("current");
49 | var tab_id = $(this).attr('href');
50 | $('.group').removeClass('current');
51 | $("#" + tab_id).addClass('current');
52 | $("#" + tab_id).find('input.structuretab').prop('checked', true);
53 | $("#" + tab_id).siblings().find('input.structuretab').prop('checked', false);
54 | });
55 |
56 | }
57 |
58 |
59 | });
60 | }(jQuery));
--------------------------------------------------------------------------------
/structure-tabs.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ian-cox/Kirby-Structure-Tabs/ff8514ae89d9c9294f95650733dca921af8d08ad/structure-tabs.gif
--------------------------------------------------------------------------------
/structuretab.php:
--------------------------------------------------------------------------------
1 | array(
7 | 'structuretab.js'
8 | ),
9 | 'css' => array(
10 | 'structuretab.css'
11 | )
12 | );
13 |
14 | public function input() {
15 |
16 | $input = new Brick('input', null);
17 | $input->addClass('structuretab');
18 | $input->attr(array(
19 | 'id' => $this->id(),
20 | 'name' => $this->name(),
21 | 'required' => $this->required(),
22 | 'autofocus' => $this->autofocus(),
23 | 'autocomplete' => $this->autocomplete(),
24 | 'readonly' => $this->readonly(),
25 | 'type' => 'checkbox',
26 | 'checked' => v::accepted($this->value()),
27 | ));
28 |
29 | $wrapper = parent::input();
30 | $wrapper->tag('label');
31 | $wrapper->text($this->i18n($this->text()));
32 | $wrapper->attr('for', $this->id());
33 | $wrapper->removeAttr('id');
34 | $wrapper->addClass('structuretab');
35 | $wrapper->prepend($input);
36 |
37 | return $wrapper;
38 |
39 | }
40 |
41 | public function result() {
42 |
43 | $result = parent::result();
44 | return v::accepted($result) ? true : false;
45 |
46 | }
47 |
48 | public function validate() {
49 | return v::accepted($this->value());
50 | }
51 |
52 | }
--------------------------------------------------------------------------------