lukaskleinschmidt / kirby-sortable

Making subpage managing a breeze

Kirby Sortable

A toolkit for managing subpages in the content area.

Table of contents

1. Features
2. Installation
3. Blueprint
4. Permissions
5. Customize
6. Known Bugs
7. Donate

1 Features

This project started as a simple field and has grown into a reliable and extendable plugin. It includes the sortable, modules, redirect and options field. In addition to the four fields the plugin has its own registry.

Fields

sortable

The core field. It is the base for the modules field.
Change appereance in the blueprint or build your own field based on this one.

modules

The modules field is an extended sortable field. Bundled with the modules-plugin it is a very powerful tool. You can find further informations here.
To disable the field add c::get('sortable.field.modules', false); to your config.php.

redirect

Redirect a user to the parent of the currently visited panel page. Useful for pages that act as a container. You can find further informations here.
To disable the field add c::get('sortable.field.redirect', false); to your config.php.

options

This field is used internally by the sortable field for the copy and paste functionality.

Registry

With the registry you are able to customize the visual appearance and modify or add custom functionality. The registry makes it possible to register layouts, actions, variants and translations. Learn more about how to register components in the customize section.

2 Installation

There are several ways to install the plugin.
Please make sure you meet the minimum requirements.

Requirements

• PHP 5.4+
• Kirby 2.3+
• Kirby Modules Plugin 1.3+
  when you want to use the modules field

Git

To clone or add the plugin as a submodule you need to cd to the root directory of your Kirby installation and run one of the corresponding command:
$ git clone https://github.com/lukaskleinschmidt/kirby-sortable.git site/plugins/sortable
$ git submodule add https://github.com/lukaskleinschmidt/kirby-sortable.git site/plugins/sortable

Kirby CLI

If you're using the Kirby CLI, you need to cd to the root directory of your Kirby installation and run the following command: kirby plugin:install lukaskleinschmidt/kirby-sortable

Download

You can download the latest version of the plugin here.
To install the plugin, please put it in the site/plugins directory.
The plugin folder must be named sortable.

site/plugins/
    sortable/
        sortable.php
        ...

3 Blueprint

After installing the plugin you can use the new field types. This blueprint shows all available options of the sortable field.

fields:
  title:
    label: Title
    type:  text

  sortable:
    label: Sortable
    type:  sortable

    sortable: true

    layout:  base
    variant: null

    limit: false

    parent: null
    prefix: null

    options:
      limit: false

Options

sortable

Disable sorting when necessary.

layout

Load a registerd layout. The layout defines how a entry is rendered. Learn how to register your own layout.

variant

Load a registerd variant. A variant is used to change the naming of the field from page to modules for example. Learn how to register your own variant.

limit

Limit he number of visible pages. Example blueprint from the modules field.

fields:
  modules:
    label: Modules
    type:  modules

    # Allow 5 visible modules overall
    limit: 5

    # Template specific option
    options:

      # Allow only 3 modules per template (applies to all templates)
      limit: 3
      module.gallery:

        # Allow only 1 visible gallery module (overwrites the current limit of 3)
        limit: 1

parent

Uid to use when looking for the container page. If left empty the field will look for subpages in the current page.

# home.yml

fields:
  events:
    label: Events
    type:  sortable

    parent: events

site/content/
    home/
        home.txt
        events/
            event-1/
                event.txt
            event-2/
                event.txt
        ...

prefix

Template prefix to filter available subpages.

# home.yml

fields:
  events:
    label: Events
    type:  sortable

    prefix: event.

site/content/
    home/
        home.txt
        event-1/
            event.default.txt
        event-2/
            event.default.txt
        subpage/
            default.txt
        ...

4 Permissions

Since v2.4.0 you can now disable sorting independently from the panel.page.visibility permission. The new panel.page.sort permission will disable sorting as soon as one module denies sorting.

Keep in mind that the panel.page.visibility permission will additionally to disabling the visibility toggle still disable sorting also.

5 Customize

With the registry you are able to customize the visual appearance and modify or add functionality. The registry makes it possible to register layouts, actions, variants and translations.

// site/plugins/sortable-variants/sortable-variants.php

// Make sure that the sortable plugin is loaded
$kirby->plugin('sortable');

if(!function_exists('sortable')) return;

$kirby->set('field', 'variants', __DIR__ . DS . 'field');

$sortable = sortable();
$sortable->set('layout',  'variant', __DIR__ . DS . 'layout');
$sortable->set('variant', 'variants', __DIR__ . DS . 'variant');
$sortable->set('action',  '_add', __DIR__ . DS . 'actions' . DS . '_add');
$sortable->set('action',  '_paste', __DIR__ . DS . 'actions' . DS . '_paste');
$sortable->set('action',  '_duplicate', __DIR__ . DS . 'actions' . DS . '_duplicate');

A plugin can take care of registering all kinds of extensions, which will then be available in the sortable field or any field based on that.

List of registry extensions

These are all possible registry extensions you can register this way:

layout

// The layout directory must exist and it must have a PHP file with the same name in it
sortable()->set('layout', 'mylayout', __DIR__ . DS . 'mylayout');

Have a look at the base layout or the module layout.

action

// The action directory must exist and it must have a PHP file with the same name in it
sortable()->set('action', 'myaction', __DIR__ . DS . 'myaction');

Have a look at the actions.

variant

// The variant directory must exist and can have multiple tranlation files
sortable()->set('variant', 'myvariant', __DIR__ . DS . 'myvariant');

Have a look at the modules variant or the sections variant.

translation

// The translation file must exist at the given location
sortable()->set('translation', 'en', __DIR__ . DS . 'en.php');
sortable()->set('translation', 'sv_SE', __DIR__ . DS . 'sv_SE.php');

Have a look at the translations.

Examples

• kirby-sortable-variants
• kirby-sortable-events

6 Known Bugs

Long title can cause the entries to overflow the content area.

• #37
• getkirby-v2/panel#986

Put the following code in your custom panel css.

.form-blueprint-checklist > fieldset {
  min-width: 0;
}

@-moz-document url-prefix() {
  .form-blueprint-checklist > fieldset {
    display: table-cell;
  }
}

---

Readonly has no effect.

• #35

One simple and fast way is to disable functionality with some custom panel css.

/* disable global actions */
.field-is-readonly .sortable__action,
.field-is-readonly .sortable__action .icon {
  pointer-events: none;
  color: #c9c9c9;
}

/* disable sorting */
.field-is-readonly .sortable [data-handle] {
  pointer-events: none;
  color: #c9c9c9;
}

/*
 * enable entry actions
 * only necessary when you want to disable
 * sorting but still want the actions to work
 */
.field-is-readonly .sortable-layout__action {
  pointer-events: auto;
}

/* disable entry actions */
.field-is-readonly .sortable-layout__action {
  pointer-events: none;
  color: #c9c9c9;
}

7 Donate

If you enjoy this plugin and want to support me you can buy me a beer :)

kirby-sortable's Issues

Make readme more clear

Perhaps make a FAQ section or add some examples / configurations.

Disable field when readonly is set to true in the blueprint

Hello, thank you very much for this plugin : it is exactly what I was looking for.

It seems that it is not yet possible to disable the field via blueprint or permissions.

Not sure if it's the best option but here's a css solution :

.field-is-readonly .sortable a,
.field-is-readonly .sortable .sortable-layout [data-handle],
.field-is-readonly .sortable .sortable-layout__action{
  cursor: default;
  pointer-events: none;
}
.field-is-readonly .sortable .sortable-layout {
  background: #efefef;
  border-color: #ddd;
  color: #777;
}
.field-is-readonly .sortable .sortable-layout__icon {
  border-left-color: #ccc;
  background: #efefef;
}
.field-is-readonly .sortable .sortable-layout__action {
  color: #c9c9c9;
}

Rename plugin name in packages.json

When installing from Kirby's CLI your plugin is overwriting the Kirby's modules plugin.

Since the PHP entry point file is modules-field.php, this line should be: modules-field.

Which setup of the modules-plugin is the field assuming is in use?

I am struggling a little with setting up modules correctly, could someone document how the modules-plugin should be setup in order for the field and plugin to work together.

The readme at https://github.com/getkirby-plugins/modules-plugin talks about two methods of setting up.

Option 1

site/blueprints/default.yml

title: Default
pages:
  template:
    - module.text
    - module.gallery

Option 2

site/blueprints/default.yml

title: Default
pages:
  template: default
  build:
    - title: _modules
      uid: modules
      template: modules
...

site/blueprints/modules.yml

title: Modules
pages:
  template:
    - module.text
    - module.gallery

Does it make a difference which I use or is there one option I should be using in order for the field to work correctly?

In the readme for this field when you mention the blueprint, is that to go in the blueprints created in either of the options?

For example do I put them in the default blueprint..

site/blueprints/default.yml

title: Default
pages:
  template: default
  build:
    - title: _modules
      uid: modules
      template: modules
fields:
  modules:
    label: Modules
    type: modules

I am fairly competent with Kirby and the general use of blueprints, snippets, fields, templates and controllers. But I am finding the concept of these modules hard to implement and would appreciate a little more information if possible.

At the moment without the field when I create a new page it then creates a folder "_modules" and then I open that folder, and then add another "page" choose the template and then fill in the content.

The above workflow does seems a little complicated, but I can just about get my head around it and what is actually happening. But the idea of a "page within a page within a page" is not something I would want or expect a client to have to deal with.

Hopefully someone can explain a little on how these modules should be used. Thanks

Copy Page / recursively endless spinn

Hi,
If I copy A page and paste that page inside the page that i copied, it creates a recursively endless spinn, and creates endless subpages.

Is this a Bug or how do I prevent this from happening !?
Of Course it works if I copy another and paste that page inside the page.

How to override the language variables ?

I tried copying the language variables to my config file to override them (my client doesn't understand modules but sections are fine) but to no effect. Is there any way to override the language variables without touching at the plugin files ?

Add user feedback when reaching a limit

Some form of modal.

Class 'PermissionsException' not found

If I want to delete a module with the delete button I get the error:

Class 'PermissionsException' not found

it gives me the following debug infos:
.../site/plugins/modules-field/fields/modules/controller.php
on line 64 - 66

if($page->ui()->delete() === false) {
  throw new PermissionsException();
}

I'm on Kirby 2.4.0.

Missing path

Hi,

I've set up a clean kirby, installed the modules plugin, which works fine as far as could see.

Than I installed the modules field:

• adding/creating modules works fine
• modules are created in content/page/modules subdirectory
• modules are there but it shows 'no modules yet'

For the field in panel I get this:

Do you have any idea?

Thanks,
Arno

Replace add form with a context menu

Remove on extra click.
Perhaps keep the form modal when there are more than a few templates to choose from.

Error 500 on update if status:false in child's blueprint

Hi,

I have an error returned each time the field is updated.
After investigation it looks like the error is caused by the fact that status option is set to false in the child's blueprint.
Maybe would it be nice to add a warning or so?
Cheers :-)

Inconsistant plugin name

The repo is called kirby-field-modules and the folder when downloaded is like kirby-field-modules-master.

But the plugin folder should be renamed modules-field. Maybe match the repo with the plugin name or the other way around.

(nice field by the way)

Undefined property field::options

I've just installed the latest version of the plugin and the field and get an error in the panel:

Notice: Undefined property: Kirby\Panel\Models\Page\Blueprint\Field::$options in D:\Git\Natasa\site\fields\modules\controller.php on line 9
Warning: array_filter() expects parameter 1 to be array, null given in D:\Git\Natasa\site\fields\modules\controller.php on line 69

As far as I can tell, everything is working fine except for that part :(

Here's my blueprint. I have tried with just label and type and with every combination of options I could think of:

  modules:
    label: Sections
    type: modules
    style: items
    readonly: false
    options:
      redirect: false
      preview: true
      delete: true
      limit: null
      edit: true

How to set the module icon

In your preview - you have different icons for text and gallery - how did you achieve that?

Disable sorting based on roles

Hi,

We would need to have the option to disable sorting based on roles (and maybe other conditions). The current method in the blueprint with sortable: false is too global to do this and I can't find another method to do this with the currently possible extension options.

In my opinion this could be done nicely by binding it to a role permission. For instance if we have a permission like panel.page.sort and set it to false this would disable sorting in Kirby-Sortable.

What do you think?

Kind regards,
Georg

Feature request: Limit the number of modules you can create

It would be a great feature if you could be able to limit the number of modules that you can create in some way.

Then you can have a field like this:

With a small indication of the amount of modules you got and if you have reached the limit. This would be very handy if you build something like a two column layout where you just want 2 elements to fill the left and the right column and don't want to worry of a 3rd module getting mistakenly created that crashes the layout.

Cheers
Andreas

Error on pasting modules using the Modules field

Hello,

When I click the paste button located under the page's modules, I get an error that reads 'syntax error, unexpected '::' (T_PAAMAYIM_NEKUDOTAYIM)'

Am I doing something wrong?

Update readme

Repo name changed

Multilang title for modules not working like expected

If I use translation strings inside yaml (site/modules/mymodule.yml), like so:

title:
  de: Mein Modul
  en: My Module

in the module overview it prints out the generic module name rather than the correct language string.

I accidentally opened this issue over at the kirby-modules repo first, so if it's a problem with the modules plugin, here's the link to the issue: https://github.com/getkirby-plugins/modules-plugin/issues/12

Error: mb_strpos(): Empty delimiter

If I use "kirby-sortable" on my website I get the error "mb_strpos(): Empty delimiter" when I want to add a new module in the contentarea (cf. screens). I am using PHP 7.1. You can see the parameters in the screenshot. Is there any solution? I dont know what to do. On my local Mamp-Server everything works fine. Thanks for help a lot!

Screens:

Multilang titles in module overview

In the module overview, the title shown on each module is from the title field of the module. This title field is saved upon creation of the module.

Would it be possible to show the (translated) name of the master module, instead of the saved title of the created module instance?

I'm asking, because I've run into some problems on a multi language site.

If I use translation strings inside yaml site/modules/mymodule.yml:

title:
  de: Mein Modul
  en: My Module
  sv_SE: Min Modul

If I create a new instance of this module, the current title translation is then saved in the title field of the created module automatically. And it is this saved title field that is shown on the overview list. This is not good if several authors with different languages are editing pages with modules. For example, if I am creating some modules, the Swedish translation is used and saved as the title field. This Swedish translation is then shown in the overview list. This is not good, because later when an english author is logged in, this Swedish translation is shown in the overview list.

So, I would like to propose to change this behavior so the translated name of the master module is shown in the overview list instead.

Adding a <span> on icons text for css selecting?

I got a suggestion to make to help the modules readability when using it with columns.

Currently i am using the modules on a page where i got a 2/3 - 1/3 column layout like this:

As you see there is really just not much space for displaying the modules name e.g. "infobox". Now my thoguth was, that I don't need the text for "edit" and "delete" because they need so much space. I would like to hide it. However the generated html does not have a selector for the text element and so you can't hide it with css. It is like this:

<a href=""><i></i>edit</a>
and I would like to have something like that:
<a href=""><i></i><span class="maybe a class">edit</span></a>

So my suggestion is to add in file modules/styles/module.php a surrounding tag for the text element.

    <a class="modules-entry-button btn btn-with-icon modules-edit-button" href="<?php __($module->url('edit')); ?>">
      <?php i('pencil', 'left')?>
      <span><?php. _l('fields.structure.edit') ?></span>
    </a>
    <a data-modal class="modules-entry-button btn btn-with-icon modules-delete-button" href="<?php __($field->url('delete', array('uid' => $module->uid()))); ?>">
      <?php i('trash-o', 'left') ?>
      <span><?php _l('fields.structure.delete') ?></span>
    </a>

It would be great if the end result could be something like this:

Whats your thoughts on this one?

Add contextmenu for smaller screens

Skipping modal (hacky solution)

public function routes() {
    return array(
      array(
        'pattern' => '(:any)',
        'method'  => 'POST|GET',
        'action'  => 'adder',
        'filter'  => 'auth',
      ),
    );
  }

<?php foreach($page->blueprint()->pages()->template() as $template): ?>
        <?php $url = $field->url() .'/'. $template->name(); ?>
        <a href="<?php echo $url ?>" data-action=""><?php echo ucfirst($template->name())  ?></a>
<?php endforeach; ?>

public function adder($template) {

        $page  = $this->field()->origin();
        $entries = $this->field()->entries();

        if($page->ui()->create() === false) {
            throw new Kirby\Panel\Exceptions\PermissionsException();
        }

        $uid = $template . '-' . uniqid();
        $uri = $page->uri() . DS . $uid;

        try {
            $page->create($uri, $template, array(
                'title' => ucfirst($template)
            ));

            $entries->add($uid);
            $this->update($this->field()->entries()->pluck('uid'));
            $this->notify(':)');
            $this->redirect($this->model());
        } catch(Exception $e) {
            echo $e->getMessage();
        }
    }

Drag axis

Just question, in the settings of jquery ui sortable
https://github.com/lukaskleinschmidt/kirby-sortable/blob/master/fields/sortable/assets/js/sortable.js#L11-L12

is there reason there is no axis: 'y' ? I mean it might be little aesthetic nuance, but i end up changing it in the plugin all the time. For the sortable usecase i think you don't want "module blocks" to move everywhere.

Duplicate button

Drag and Drop not working in IE 11

Hi,

drag and drop of sortable elements seems not to work with IE 11. The mouse icon changes but the elements are not dragable.
Do you have any idea?

Kind regards,
Georg

Long module titles break the layout

The .sortable-layout__title element has white-space set to nowrap and breaks the layout of the panel when there's too much text inside:

This is especially noticable on the mobile version, where even short titles are enough to push everything off to the right:

Hide page in module section

I have updated the modules and sortable plugin to the latest version. So far all is working but one thing i can't get done. In the Panel on the right side where the modules are diplayed, also the normal page are shown. how can i disable the normal pages in the sortable section? in the old version of modules and sortable plugin, normal pages are hidden in the module section on the right side. do i miss something?

Inline editing of modules

I really like this plugin. But the one thing that keeps me from using it, is the fact that you jump to a different page when editing a module. Since each module is a separate subpage, it's the natural behavior in Kirby.

This is in my opinion a problem for the user, since you lose context when editing a module. I like more the approach that the Kirby Builder Plugin uses. When editing a module, you are still on the same page, and you don't lose the context.

Would it technically be possible to add the functionality to this plugin, so that you can edit the modules inline, without opening a new page? If so, I would flag this as a future feature request.

This issue (in my opinion) is kind of related to the recent discussion about getting rid of modals for in the Panel.

Inline editing without losing context would be ideal. But as I said, it might not even be technically possible for this plugin, since the modules is saved as subpages?

Add page title for new entries

I use the sortable field for displaying blogpost entries, so no modules plugin is used...
Is there a way to add the page title field, when adding new entries, like the build in way on adding new pages. Then you would already have readable page urls and you don't have to change them afterwards.
I remember that is was discussed at some places, but I couldn't find where.

Thanks for all your effort and this awesome plugin.

Role based actions in layouts

Hi,

is it possible to to access the current role of the panel user in a custom layout?
$this only contains Page and Field data and the other default Kirby variables also don't work.
For instance I want to hide toggle or delete buttons if the current user is not in the admin role.
Is there any way to achieve this?

Kind regards,
Georg

Hide subpage containing modules

I setup the modules plugin, so that they are in a subpage with the UID modules and not direct children of the parent page (as you recommended here).

So with this fields module installed, is there a way to completely hide the modules folder form the subpages and only show real ones?

Easier way of disabling default actions

Might be nice to have the option to remove the copy & paste actions globally when using type: sortable.

Perhaps something like:

c::set('sortable.field.add', true);
c::set('sortable.field.copy', false);
c::set('sortable.field.paste', false);

I just couldn't figure out how to do this following the instructions in the Customize section in the readme.

Removed Modules break the panel

I noticed that the removal of the last module of a page breaks the panel. Only when deleting the module via the page/module sidebar, though. When deleting it in the field I guess some sort of "hook" gets triggered and it works as intended.
Seems like the field looks at the saved modules sequence that's saved to the page content and doesn't check if the module exists. If I remove a module and another last one still exists it doesn't happen.

Can you reproduce this @lukaskleinschmidt?

I think the field should remove its content responsible for the modules sorting when there are no modules anymore.

EDIT: If I remove these lines that seem to sort the modules according to the sequence found in the content file, the error disappears.

EDIT 2: I think I solved it with this commit: medienbaecker@f6ea8e1.

Show module template in tooltip

PHP 7.4.x and Kirby 2.5.13

We have to update your k2 installation because of php upgrade. is the sortable/modules plugin compatible with the latest kirby 2.5.13 patch and php 7.4.x?

Is the modules-plugin required?

In the readme it states "This field is build on top of Kirby Modules Plugin."

Does that mean the original plugin (https://github.com/getkirby-plugins/modules-plugin) is not required?

Or is this field more of an extension of the original plugin?

in the add modal are modules and page templates shown mixed

I've a page where i use some modules and have also the possibility to add subpages. So when I want create a new module the add modal shows me the subpage templates as well. Don't know if it's a bug or a feature, but for my case it would be better if I only have the module templates there.

For me a workaround helps me quite well, I'd edit the site/plugins/sortable/sortable/actions/add/forms/add.php that only modules with prefix are shown.

foreach($page->blueprint()->pages()->template()->filterBy('name', '*=', $field->prefix()) as $template) { $options[$template->name()] = $template->title(); }

Rename modules & update blueprint in filestructure

Kirby 2.5.12
Latest Modules & Sortables plugin
PHP 7.2

Maybe this two issues are related to each other:
You can reproduce this in the kirby starterkit. here a basic test installation:

app.zip

** Renaming module slug does not proper update the folder .txt modules: entry **
When a modules slug title is changed in the panel, the .txt files Module reference is still the "old" slug. i have to go back to the parent page of the module and hit save once to update the .txt in the filesystem. Step 1 to 5 to reproduce.

Renaming an module title/slug to a number leads to invisible modules in the panel
There seems to be a problem with numbers in the module title/slug. When i create a module and change the title/slug to a number the module is then no longer visible in the panel backend.