Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Anthony Blackshaw
    @anthonyjb
    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
    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
    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
    sure
    Anthony Blackshaw
    @anthonyjb
    ty :)
    Christian Knuth
    @ikkez
    <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
    how are you flagging an area as editable?
    Christian Knuth
    @ikkez
    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
    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
    oh okay.. hmm yeah that makes sense
    Anthony Blackshaw
    @anthonyjb
    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
    so do i need to edit the editor.init() to include data-region?
    Anthony Blackshaw
    @anthonyjb
    editor.init('[data-region], [data-fixture]', ...
    Christian Knuth
    @ikkez
    ah yes you wrote that above
    Anthony Blackshaw
    @anthonyjb
    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
    OMG that was it
    Anthony Blackshaw
    @anthonyjb
    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
    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
    yep
    good news :)
    Christian Knuth
    @ikkez
    omg omg omg.. i'm soo amazed
    Anthony Blackshaw
    @anthonyjb
    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
    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
    yeah time is always an issue :) Good luck with your project and shout if I can be of any help again
    Christian Knuth
    @ikkez
    alright, thanks :)
    winston-w
    @winston-w

    Hi @anthonyjb I'm having trouble with getting list and table fixtures to work, so I wanted to ask if that is something that's not implemented or if I'm just using the library wrong.

    If it's not implemented, what would be your suggested way of adding a single editable, non removable table?