CuteForm

↑ Parent: MagiCollection

← Previous: Collectible

CuteForm is a Javascript library that transforms your form <select> into selectable images. Learn more.

Because it is used a lot by forms and filter forms in MagiCircles, an integration is provided directly within the collections, so you don't need to add extra Javascript dependencies.

The setting filter_cuteform in the collection itself, or in the list view, add view and item view seperately allow you to customize your cuteform settings.

You may also configure cuteform for your own form in your own standalone pages or anywhere else using the utility function cuteFormFieldsForContext, which takes the same dictionary expected by filter_cuteform in collection, as well as the context and an optional form object.

Dictionary of:

• Key = field name
• Value = dictionary of:
  • type: CuteFormType.Images, .HTML, .YesNo or .OnlyNone, will be images if not specified
  • to_cuteform: 'key' or 'value' or lambda that takes key and value, will be 'key' if not specified. Can also take i, key, value if i_choice
  • choices: list of pair, if not specified will use form
  • selector: will be #id_{field_name} if not specified
  • transform: when to_cuteform is a lambda: CuteFormTransform.No, .ImagePath, .Flaticon, .FlaticonWithText, .ImageWithText
  • image_folder: only when to_cuteform = 'images' or transform = .ImagePath, will specify the images path
  • extra_settings: any other CuteForm configuration to pass to the Javascript function
  • title: recommended when you provide 'modal': 'true' in extra_settings, to show a Select xxx as a title when the modal opens

Example:

${PROJECT}/magicollections.py:

from magi.magicollections import MagiCollection
from magi.utils import getCharacterImageFromPk

class CardCollection(MagiCollection):
    ...
    filter_cuteform = {
        'member_id': {
            'to_cuteform': lambda k, v: getCharacterImageFromPk(k),
            'title': _('Member'),
            'extra_settings': {
                'modal': 'true',
                'modal-text': 'true',
            },
        },
        'i_rarity': {
            'type': CuteFormType.HTML,
        },
        'is_promo': {
            'type': CuteFormType.OnlyNone,
        },
        'i_attribute': {},
        'trainable': {
            'type': CuteFormType.OnlyNone,
        },
        'member_band': {
            'image_folder': 'band',
            'to_cuteform': 'value',
            'title': _('Band'),
            'extra_settings': {
                'modal': 'true',
                'modal-text': 'true',
            },
        },
    }

Merged fields in MagiFiltersForm

See "Merge fields" section in MagiFiltersForm to learn more about merged fields.

To configure the CuteForm settings of a merged filter, you can use mergedFieldCuteForm.

It takes as a parameters:

• the current cuteform details (usually filter_cuteform)
• any extra settings you'd want to pass to the resulting field made from merged fields
• the list of merged fields as an ordered dict
• optional: merged_field_name if you specified a field name when you created your merged field
• optional: model, required if your to_cuteform functions expect i, key, value for your i choices

${PROJECT}/magicollections.py:

from collections import OrderedDict
from magi.utils import mergedFieldCuteForm, staticImageURL

class CardCollection(MagiCollection):
    ...

    filter_cuteform = ...
    mergedFieldCuteForm(filter_cuteform, {
        'title': string_concat(_('Character'), '/', _('Group'), ' / ', _('Team')),
        'extra_settings': {
            'modal': 'true',
            'modal-text': 'true',
        },
    }, OrderedDict ([
        ('character', lambda k, v: getCharacterImageFromPk(k)),
        ('i_group', lambda k, v: staticImageURL(k, folder='i_group')),
        ('i_team', None),
    ]))

You can use None instead of a lambda if you want to use the same to_cuteform as in the original filter_cuteform or fallback to default behavior.

Separators in modals

Especially useful for merged fields, you can show a separator between sections using modal_cuteform_separators:

${PROJECT}/forms.py:

    modal_cuteform_separators = {
        'by_value_prefixes': [
            ['is_main', ['main']],
            ['i_unit', [3]],
            ['i_subunit', [3, 6]],
        ],
        'hr': True,
        'margin': True,
    }

To detect where to insert the separators, there are various options:

Setting	Example	Resulting selector
by_name_prefix_nth with Name/Value	['idol', [5]]	[data-cuteform-name^="idol"] .cuteform-elt:eq(5)
by_name_prefix_value with Name/Value	['idol', [5]]	[data-cuteform-name^="idol"] .cuteform-elt[data-cuteform-val="5"]
by_name with Name	['idol']]	[data-cuteform-name^="idol"]
by_name with Name/Value	['idol', [5]]	[data-cuteform-name^="idol"] :nth-child(5)
by_value_prefixes with Name/Value	['idol', [5]]	[data-cuteform-val="idol-5"]
by_value_prefixes with Name	['idol']	[data-cuteform-val^="idol"]

Settings available:

Name	Description	Default
hr	Display a hr visible separator (without it, it just adds a new line)	False
with_margin	Adds a 5px margin around the separator (hr or not)	False
callback_before	A callback to call before adding the separator(s)	None

→ Next: Alt views