FancyBox Pelican Plugin - are you done already?

The FancyBox is almost complete. Need to adjust some elements. But main functionality is almost complete.

Down below are all functions that I've created:

Replace function.

Needed to create a replace function for replacing fancybox markdown element from article with a fancybox-type element used with fancybox javascript engine.

Test for replace function:

def assert_replace(article, expected):
    "Asserts replace equals expected"
    assert replace(article) == expected

def test_given_article_with_fancybox_replace():
    "Checks if Replace method makes replacement of <fancybox></fancybox>element into <a class='fancybox_group'></a> "

    article = Article('Data data data\n <{}>TEST</{}>\ndata data data'.format(FANCYBOXNAME, FANCYBOXNAME))
    expected = 'Data data data\n <a class="{}">TEST</a>\ndata data data'.format(CLASS_SELECTOR)
    assert_replace(article, expected)

def test_given_multiple_fancybox_elements_in_article_replace():
    "Checks if multiple fancybox elements will be replaced with fancybox-type engine element"

    article = Article('Data data data\n <{}>TEST</{}>\ndata <{}>TEST</{}>data <{}>TEST</{}>data'.format(FANCYBOXNAME, FANCYBOXNAME, FANCYBOXNAME, FANCYBOXNAME, FANCYBOXNAME, FANCYBOXNAME))

    expected = 'Data data data\n <a class="{}">TEST</a>\ndata <a class="{}">TEST</a>data <a class="{}">TEST</a>data'.format(CLASS_SELECTOR, CLASS_SELECTOR, CLASS_SELECTOR)

    assert_replace(article, expected)

Source code:

def replace(article):
    "Replaces fancybox tag with <a class='fancybox'></a>"

    elements_fancybox, soup = find_fancybox_element(article)
    for fancybox in elements_fancybox: = TAG_REPLACEMENT
        fancybox['class'] = CLASS_SELECTOR
        fancybox['href'] = fancybox.text
        fancybox.append( BeautifulSoup("", "html.parser").new_tag("img", href=fancybox.string) )
    return str(soup)

Add Dependency function.

"add_dependency" function - adds all javascript and css dependency files as / to source of markdown article. Probably now it's not added, but soon this "dependency" will only be added if element is found in markdown article source file.

Test for "add dependency" function:

def test_given_article_add_dependency():
    "Checks if article contains css element after using 'add_css' function - only if fancybox element exists"

    expected_content = '<script src="" type="text/javascript"></script><script src="fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>'
    expected_content += '<link href="fancybox/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css"/>'

    article_content = 'Data data data\n <{}>TEST</{}>\ndata data data'.format(FANCYBOXNAME, FANCYBOXNAME)
    article = Article(article_content)

    expected = Article(expected_content + article_content)

    assert str(add_dependency(article)._content) == str(expected._content)

Source code:

def add_dependency(article):
    'Adds CSS/JS dependency to article only if article contains fancybox element'
    script_tag = BeautifulSoup("", "html.parser").new_tag("script", type="text/javascript", src="")
    css_tag = BeautifulSoup("", "html.parser").new_tag("link", rel="stylesheet", type="text/css", href="", media="screen")
    script_tag['src'] = DEPS_JS_JQUERY_URL

    content = str(script_tag)

    script_tag['src'] = DEPS_JS_FANCYBOX_URL
    content += str(script_tag)

    css_tag['href'] = DEPS_CSS_FANXYBOX_URL
    content += str(css_tag)

    article._content = content + article._content
    return article

Add Binding Fancyboxscript function.

This function adds Javascript binding between fancybox elements in markdown source and fancybox engine.

Tests :

def test_given_article_add_binding_fancyboxscript():
    "Checks if article contains javascript binding between name of class and fancybox script"
    article_content = 'Data data data\n <{}>TEST</{}>\ndata data data'.format(FANCYBOXNAME, FANCYBOXNAME)
    expected_content = article_content
    expected_content += "<script>"
    expected_content += """$(document).ready(function() {$("a.fancybox").fancybox({'hideOnContentClick': true});});"""
    expected_content += "</script>"

    article = Article(article_content)
    expected = Article(expected_content)
    assert str(add_binding_fancyboxscript(article)._content) == str(expected._content)

Source code:

def add_binding_fancyboxscript(article):
    "Adds biding for fancybox script with class selector"
    binding = "<script>"
    binding += JS_BIDING_CONTENT
    binding += "</script>"
    article._content = article._content + binding
    return article

Source code of plugin-itself

def fancybox_plugin(generator):
    "Fanxybox plugin - temporary code placement"
    for article in generator.articles:
        article._content = add_dependency(article)._content
        article._content = add_binding_fancyboxscript(article)._content
        article._content = replace(article)

What needs to be done (a follow-up article about that :) )

In short - functions needs to be change into methods, links to js/css needs to be adjusted. Some additional tests needs to be added.

Final result

Final result can be checked at this branch

Code commits done for this post:

Tools and applications used:


1. Make ALMOST final commits for source-code of fancybox plugin

What's next

1. Make final commit for source-code of fancybox plugin

2. Start working on plugin for asciinema player.

3. See ISSUES task-list for this 'mini' growing project :)


comments powered by Disqus