These are chat archives for GetmeUK/ContentTools

20th
Apr 2017
Samuell
@Samuell1
Apr 20 2017 09:38
@anthonyjb how you prevent anchor <a href=""><div>content editor...</div></a> redirecting if its around content editor? if i click its redirect, but needs to show editing :D
Anthony Blackshaw
@anthonyjb
Apr 20 2017 10:43
@abishekrsrikaanth here's the recommended approach for auto-saving (http://getcontenttools.com/tutorials/saving-strategies#auto-saving) however you can also call lastModified against a region to determine if it's been modified since the last check, there's some example code for this here: https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/editor.coffee#L523
@abishekrsrikaanth the approach for this is to capture whenever an element is mounted on to the root and then access it's domElement and apply your own events - though the click event would probably be a bad one to override as it's used for selecting an element in the tree, can you provide an example of what you're struggling with an I'll see what I can recommend
@Samuell1 not sure I fully understand - once the editor is active (editing) then links on the page should be ignored and attempts to leave the page (e.g through the history nav) should be met with a confirmation dialog?
Samuell
@Samuell1
Apr 20 2017 10:54
@anthonyjb i mean if i have content editor and around him its anchor but if i click it to edit, it redirects to that anchor not starts editing :/
Anthony Blackshaw
@anthonyjb
Apr 20 2017 11:13
@Samuell1 are you adding a custom start editing button?
oh sorry I see
you mean if you have editable content within a link
so the solution I usually use for that scenario is add a attribute to these special case links:
<a href="..." data-ignore-in-editor>...</a>
Then when the editor starts I bind to the links and prevent their default behaviour so that they don't cause that issue
Had to do something similar for the 3 main sections here on this page: https://www.bagshaws.com/
Samuell
@Samuell1
Apr 20 2017 11:26
@anthonyjb oh nice, data-ignore-in-editor its defined in contentools?
Anthony Blackshaw
@anthonyjb
Apr 20 2017 11:34
no you have to implement the behaviour yourself I'm afraid
I will try to dig up the code from that project today - though might be later this evening before I get to it
Samuell
@Samuell1
Apr 20 2017 12:25
:+1: thanks
Anthony Blackshaw
@anthonyjb
Apr 20 2017 12:27

    # Ye old switcher roo!
    # --
    # Function for switching a tag with another tag whilst still retaining all
    # of the attributes and inner HTML.
    yeOldSwitcherRoo = (oldElement, newElementType='div') ->
        $(oldElement).each ->
            # Create the new element
            newElement = $('<' + newElementType + ' data-element-switched></' + newElementType + '>')
            # Loop through the attributes of the old element and apply them to
            # the new element.
            $.each @attributes, ->
                if @specified
                    $(newElement).attr(@name, @value)
            # Insert the content of the old element into the new element, and
            # then remove the old one.
            $(newElement).html($(oldElement).html())
            $(oldElement).after(newElement).remove()

    # Anchor tags with editable content
    # --
    # When the content editor is initialised and the user starts editing content,
    # check to see if any links contain editable components. If they do, prevent
    # the default click behaviour. Re-enable it after editing is complete.
    editorCls = ContentTools.EditorApp.getCls()
    editor.start = () ->
        # Find all editable areas within links and loop through them
        editableContentWithinLinks = $('a *[data-editable]').closest('a')
        for oldElement in editableContentWithinLinks
            yeOldSwitcherRoo(oldElement)
        @_domRegions = document.querySelectorAll('*[data-editable]')
        editorCls.prototype.start.call(this)
    editor.stop = () ->
        editorCls.prototype.stop.call(this)
        # Find all editable areas within links and loop through them
        editableContentWithinLinks = $('*[data-element-switched]')
        for oldElement in editableContentWithinLinks
            yeOldSwitcherRoo(oldElement, 'a')
Hopefully the above is some use - I didn't write it a colleague did but it should work
Samuell
@Samuell1
Apr 20 2017 12:29
thanks i look at it on weekend
Abishek R Srikaanth
@abishekrsrikaanth
Apr 20 2017 13:56
@anthonyjb regarding overriding the event that I was checking is about handling updates for image component of the ContentTools. With the limited timeline in hand for my current project, I was thinking of doing a quick and dirty version to update an image by triggerring a custom event and show a model of my own. I may not have the time to update->test->validate the coffee script and mess stuff up and just want to continue with what is currently on there. I just have to wait till that feature is released on ContentTools