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
    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?

    darkblueorange
    @darkblueorange

    Hi @anthonyjb
    First thanks a lot for the nice work on ContentTools ! :thumbsup:

    Maybe I missed something, but once inserted I don't think we can update an image.
    I would like to do so, I tried to add some listener on any new inserted image with the following piece of code :

    let zone = document.querySelector(freshly_added_image_selector);
    zone.addEventListener("click", (e) => {
                        let dialog = new ContentTools.ImageDialog(); // First step first, here just trying to open correctly the image dialog box. Then I will try to pass the existing image information to be able to update it. 
                        let modal = new ContentTools.ModalUI();
                        editor.attach(modal);
                        editor.attach(dialog);
                        modal.show();
                        dialog.show();
                    })

    But of course dialog element is not mounted as it should be, lacking closing event and so on.
    So I'm wondering if I should go into tweaking the JS generated (I don't know CoffeeScript), looking into ContentTools.ImageDialog() or ContentTools.Tools.Image()
    But struggling a bit (I'm not really a JS guy, so I struggle a bit to understand the flow of each mounted elements and events attached to it, how you catch it ...)

    Anthony Blackshaw
    @anthonyjb
    Hey @darkblueorange so we support image updates in our inhouse implemention of CT and if you email me at ant@getme.co.uk I can send you our code for this. Not going to lie its quite a lot of code as its a rewrite for the image editor that has support for some additional features such as client-side editing and the picture element - but the bit you want (updating an existing image) can at least in part be pulled from the updated image tool code.