These are chat archives for GetmeUK/ContentTools

5th
Dec 2018
Christian Knuth
@ikkez
Dec 05 2018 10:16
hey @anthonyjb are you around? I'm trying to create an accordeon element with contentflow with 2 nested flow elements but I am kind of stuck
Christian Knuth
@ikkez
Dec 05 2018 10:51
can a fixture be a snippet at the same time?
and can a snippet be a flow element at the same time?
Christian Knuth
@ikkez
Dec 05 2018 11:19
does a fixture need a data-name?
Christian Knuth
@ikkez
Dec 05 2018 11:49
is it possible to disable editing on snippets, because i want to have snippets that only contains flows (which then contains editable snippets)
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:11
Hey @ikkez
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:25
ok just looking through the video
so first thing snippets must have a single root element
The way the content is breaking it looks like it's messing up outside of the snippet
just looking through the code examples you sent me
Christian Knuth
@ikkez
Dec 05 2018 13:31
ok
well the 2nd ul accordion in the template file is wrapper in { } which my template engine is excluding from rendering, I just left this one there for testing... if you meant that with "must have a single root elm"
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:34
so that's not it - I also wondered if the snippet Ids are always unique but looks like they are
could you send me a snapshot of the HTML in the page when the editing starts to break - should help me spot the issue?
(I can't see anything obvious in your templates - but I can't see what they generate easily either)
Christian Knuth
@ikkez
Dec 05 2018 13:39
sure
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:41
ty :)
Christian Knuth
@ikkez
Dec 05 2018 13:41
<article class="uk-article" data-cf-flow="article-body" data-cf-flow-label="Hauptspalte">

    <div data-cf-snippet="1544013198">
        <ul uk-accordion="" data-cf-flow="accordion_1544013198"
            data-cf-flow-label="accordion_1544013198" data-ce-tag="div"
            class="uk-accordion">
            <li data-cf-snippet="1544013198.1" data-ce-tag="p">
                <a href="#" class="uk-accordion-title" data-fixture="" data-ce-tag="p">Titel</a>

                <div class="uk-accordion-content"
                     data-cf-flow="accordion-item_1544013198.1"
                     data-cf-flow-label="accordion-item_1544013198.1" aria-hidden="true"
                     hidden="">
                    <div class="content-snippet" data-cf-snippet="1544013198.2">
                        <p>Lorem Ipsun</p>
                    </div>
                    <div class="content-snippet" data-cf-snippet="1544013343">
                        <p>Lorem Ipsun</p>
                    </div>
                </div>
            </li>
            <li data-cf-snippet="1544013314" data-ce-tag="p">
                <a href="#" class="uk-accordion-title" data-fixture="" data-ce-tag="p">Titel</a>

                <div class="uk-accordion-content" data-cf-flow="accordion-item_1544013314"
                     data-cf-flow-label="accordion-item_1544013314" aria-hidden="true"
                     hidden="">
                    <div class="content-snippet" data-cf-snippet="1544013314.1">
                        <p>Lorem Ipsun</p>
                    </div>
                </div>
            </li>
            <li data-cf-snippet="1544013319" data-ce-tag="p">
                <a href="#" class="uk-accordion-title" data-fixture="" data-ce-tag="p">Titel</a>

                <div class="uk-accordion-content" data-cf-flow="accordion-item_1544013319"
                     data-cf-flow-label="accordion-item_1544013319" aria-hidden="true"
                     hidden="">
                    <div class="content-snippet" data-cf-snippet="1544013319.1">
                        <p>Lorem Ipsun</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div data-cf-snippet="1544013203">
        <ul uk-accordion="" data-cf-flow="accordion_1544013203"
            data-cf-flow-label="accordion_1544013203" data-ce-tag="div"
            class="uk-accordion">
            <li data-cf-snippet="1544013203.1" data-ce-tag="p">
                <a href="#" class="uk-accordion-title" data-fixture="" data-ce-tag="p">Titel</a>

                <div class="uk-accordion-content"
                     data-cf-flow="accordion-item_1544013203.1"
                     data-cf-flow-label="accordion-item_1544013203.1" aria-hidden="true"
                     hidden="">
                    <div class="content-snippet" data-cf-snippet="1544013203.2">
                        <p>Lorem Ipsun</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</article>
ok thats better
thats the rendered template
browser snapshot
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:45
how are you flagging an area as editable?
Christian Knuth
@ikkez
Dec 05 2018 13:46
editor.init('[data-cf-snippet], [data-fixture]', 'data-cf-snippet',function (domElement) {
        return domElement.hasAttribute('data-fixture');
    });
flowMgr.init(flowsQuery = '[data-cf-flow]', api = new ContentFlow.BaseAPI(basePath+'content-api/'+pageId+'/'));
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:46
ok so yeah that's the issue
you making it editable at the top level
you can't do that you need to mark each individual region you want to be editable
I'll send you a revised html snippet
Christian Knuth
@ikkez
Dec 05 2018 13:47
oh okay.. hmm yeah that makes sense
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:48
I would change the init to something like data-region and data-fixture
<article 
    class="uk-article" 
    data-cf-snippet="1"
    >

    <ul 
        data-cf-flow="accordion_1"
        data-cf-flow-label="accordian_1" 
        class="uk-accordion"
        >
        <li data-cf-snippet="2">
            <a href="#" class="uk-accordion-title" data-fixture="title" data-ce-tag="p">
                Title
            </a>
            <div class="uk-accordion-content" data-region="content">
                <p>Content</p>
            </div>
        </li>
        <li data-cf-snippet="3">
            <a href="#" class="uk-accordion-title" data-fixture="title" data-ce-tag="p">
                Title
            </a>
            <div class="uk-accordion-content" data-region="content">
                <p>Content</p>
            </div>
        </li>
    </ul>

</article>
so uk-article is a snippet that contains a flow
<article 
    class="uk-article" 
    data-cf-snippet="1"
    >

    <ul 
        data-cf-flow="accordion_1"
        data-cf-flow-label="accordian_1" 
        class="uk-accordion"
        >
        ... insert snippets here...
    </ul>

</article>
The list items are each snippets with an editable fixture for the title and a region (for free form editing) for the body

        <li data-cf-snippet="2">
            <a href="#" class="uk-accordion-title" data-fixture="title" data-ce-tag="p">
                Title
            </a>
            <div class="uk-accordion-content" data-region="content">
                <p>Content</p>
            </div>
        </li>
does that make sense?
Christian Knuth
@ikkez
Dec 05 2018 13:53
so do i need to edit the editor.init() to include data-region?
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:54
editor.init('[data-region], [data-fixture]', ...
Christian Knuth
@ikkez
Dec 05 2018 13:54
ah yes you wrote that above
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:54
snippets should not be set to editable
fixtures and regions should both have unique identifiers
we tend to use data-name
so your second argument to the init function would be data-name
Christian Knuth
@ikkez
Dec 05 2018 13:56
OMG that was it
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:56
and then against each element with data-region or data-fixture you'd have another data-attribute of data-name=... unique id ...
ok cool :+1:
Christian Knuth
@ikkez
Dec 05 2018 13:57
ah okay, so data-name, so it can be used as identifier for both, regions and fixtures
got it
i currently just added the regions change and it instantly looks like perfect now :D
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:58
yep
good news :)
Christian Knuth
@ikkez
Dec 05 2018 13:58
omg omg omg.. i'm soo amazed
Anthony Blackshaw
@anthonyjb
Dec 05 2018 13:59
haha - we've got quite a bit of experience using ContentFlow now, considering there's no docs I was amazed you'd gotten this far - looks really good in your video
Christian Knuth
@ikkez
Dec 05 2018 14:04
yeah it took me some nights but with this possibilites now it's going to be a pretty gread frontend editor :) .. still got some parts to solve, but i was just stuck here and there wasnt much details in the docs yet, but i understand that,... I also still got some undocumented features in my libs at github.. probably a usual developer issue :D
I'll go through this again and test it once more carefully, but thanks a lot for the helping hand :-*
Anthony Blackshaw
@anthonyjb
Dec 05 2018 14:05
yeah time is always an issue :) Good luck with your project and shout if I can be of any help again
Christian Knuth
@ikkez
Dec 05 2018 14:06
alright, thanks :)