getgrav / grav-plugin-lightslider

Grav LightSlider Plugin
https://getgrav.org
MIT License
14 stars 15 forks source link

Added association with admin templates, JS fixed, added lang files #16

Closed Piterden closed 8 years ago

Piterden commented 8 years ago

I've make some corrects in JS-code (get slider settings in the loop, wrap in scope) and have tested this patch with clean official version of Grav + Admin Plugin and default Animatter theme without any changes in template except one. It was moving JS assets pipe render (vendor) to the bottom part of page in base.twig template.

Any way I don't force you to move your JS to the "before closed body tag" position. There is some more useful changes in this PR:

In readme you have wrote: "This plugin is provided as a modular page within Grav." But it's not completely truth, because plugin provides templates only for public part of site and disallow visibility of its templates for user inside admin interface. I suppose much more convenient and secure is to add slides from within admin interface.

  • [x] I've fix this problem, by patching plugin handling events (add onGetPageTemplates to register tpls)
  • [x] Also I've add blueprint yaml-config which provides 2 new form tabs for slides and for settings to the lightslider modular page
  • [x] Another patch is creating of lang files and setting some PLUGIN_VARS for creating further admin multilang interface.

I'm not finished yet, therefore only image slider mode works well.

@TODO

imageMode:
  - image
  - link to promo page / outside link
textMode:
  - image
  - header
  - description
  - link to promo page / outside link
videoMode: (if possible)
  - video (We can parse popular video services by video id)
  - link to promo page / outside link
Piterden commented 8 years ago

O, sorry, I forget to show changes which I've implemented in Animatter theme. There is only one file to change

{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
<!DOCTYPE html>
<html lang="{{ grav.language.getActive ?: theme_config.default_lang }}">
<head>

{% block head %}
    <meta charset="utf-8" />
    <title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>
    {% include 'partials/metadata.html.twig' %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png', true) }}" />
    <link rel="canonical" href="{{ page.url(true, true) }}" />

    {% block stylesheets %}
        {% do assets.addCss('theme://css/pure-0.5.0/grids-min.css', 103) %}
        {% do assets.addCss('theme://css-compiled/nucleus.css',102) %}
        {% do assets.addCss('theme://css-compiled/template.css',101) %}
        {% do assets.addCss('theme://css/custom.css',100) %}
        {% do assets.addCss('theme://css/font-awesome.min.css',100) %}
        {% do assets.addCss('theme://css/slidebars.min.css') %}

        {% if browser.getBrowser == 'msie' and browser.getVersion == 10 %}
            {% do assets.addCss('theme://css/nucleus-ie10.css') %}
        {% endif %}
        {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
            {% do assets.addCss('theme://css/nucleus-ie9.css') %}
            {% do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}
        {% endif %}
    {% endblock %}
    {{ assets.css() }}

    // There was js assets block right here

{% endblock head%}
</head>
<body id="top" class="{{ page.header.body_classes }}">
    <div id="sb-site">
        {% block header %}
        <header id="header">
            <div id="logo">
                <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
            </div>
            <div id="navbar">
                {% block header_extra %}{% endblock %}
                {% if config.plugins.langswitcher.enabled %}
                {% include 'partials/langswitcher.html.twig' %}
                {% endif %}
                {% block header_navigation %}
                {% include 'partials/navigation.html.twig' %}
                {% endblock %}
                <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
            </div>
        </header>
        {% endblock %}

        {% block showcase %}{% endblock %}

        {% block body %}
        <section id="body" class="{{ class }}">
            {% block content %}{% endblock %}
        </section>
        {% endblock %}

        {% block footer %}
        <footer id="footer">
            <div class="totop">
                <span><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
            </div>
            <p><a href="http://getgrav.org">Grav</a> was <i class="fa fa-code"></i> with <i class="fa fa-heart"></i> by <a href="http://www.rockettheme.com">RocketTheme</a>.</p>
        </footer>
        {% endblock %}
    </div>
    <div class="sb-slidebar sb-left sb-width-thin">
        <div id="panel">
        {% include 'partials/navigation.html.twig' %}
        </div>
    </div>

    /**
     * This block of code was moved from the top
     */
    {% block javascripts %}
        {% do assets.addJs('jquery',101) %}
        {% do assets.addJs('theme://js/modernizr.custom.71422.js',100) %}
        {% do assets.addJs('theme://js/antimatter.js') %}
        {% do assets.addJs('theme://js/slidebars.min.js') %}
    {% endblock %}
    {{ assets.js() }}
    // End of moved block

    {% block bottom %}
        {{ assets.js('bottom') }}
        <script>
        $(function () {
            $(document).ready(function() {
              $.slidebars({
                hideControlClasses: true,
                scrollLock: true
              });
            });
        });
        </script>
    {% endblock %}
</body>
</html>