Giter Site home page Giter Site logo

azahraoui / oc-easyspa-plugin Goto Github PK

View Code? Open in Web Editor NEW

This project forked from luketowers/oc-easyspa-plugin

0.0 1.0 0.0 22 KB

Adds Single Page Application like features to the OctoberCMS frontend using the OctoberCMS AJAX framework

License: Other

PHP 37.94% JavaScript 62.06%

oc-easyspa-plugin's Introduction

About

Adds Single Page Application like features to the OctoberCMS frontend using the OctoberCMS AJAX framework. More specifically, it enables (through the adding of a component to your layout) loading and updating page content through AJAX.

Requirements

This plugin requires the Ajax Framework to be included in your layout/page in order to handle requests.

Current Support

Only loading new pages (Static Pages or CMS Pages, any URL that is controlled by the CMS) is currently supported. Components on dynamically loaded pages will also work, and assets will be dynamically added and removed as required.

Installation

To install from the Marketplace, click on the "Add to Project" button and then select the project you wish to add it to before updating the project to pull in the plugin.

To install from the backend, go to Settings -> Updates & Plugins -> Install Plugins and then search for LukeTowers.EasySPA.

To install from the repository, clone it into plugins/luketowers/easyspa and then run composer update from your project root in order to pull in the dependencies.

To install it with Composer, run composer require luketowers/oc-easyspa-plugin from your project root.

Usage

To use this plugin, simply attach the [easySPA] component to any layouts that you want to be able to have their pages loaded over AJAX. The loader needs to be attached to an element on the page that contains anchor tags with the URLs to the pages that are to be loaded. This is done by adding the data-control="easy-spa-loader" attribute onto the containing element. There is also an optional attribute data-refresh-partials that can be used to define additional partials that should be refreshed when the page is load in the form of partialPath1:#partialSelector1 with additional partials appended with an & symbol.

Example Layout:

description="Default layout"
[easySPA]
==
<html>
    <head>
        ...
    </head>
    <body data-control="easy-spa-loader" data-refresh-partials="site/header:#site-header">
        <header id="site-header">
            {% partial 'site/header' %}
        </header>

        {% page %}

        <footer>
            ...
        </footer>
    </body>
</html>

oc-easyspa-plugin's People

Contributors

luketowers avatar

Watchers

Abdessalam Z. avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.