Code Monkey home page Code Monkey logo

laravel-instantclick's Introduction

An InstantClick middleware for Laravel 5

Latest Version on Packagist Software License Build Status SensioLabsInsight Quality Score Total Downloads

InstantClick is a plugin that makes following links in your website instant by leverages ajax to speed up the loading time of your pages.

InstantClick uses pushState and Ajax (a combo known as pjax), replacing only the body and the title in the head.

Devmatic is a web development company aims to make developers life easier. You’ll find an overview of all our projects on our website.

Ajax brings two nice benefits in and of itself:

  • Your browser doesn’t have to throw and recompile scripts and styles on each page change anymore.
    
  • You don’t get a white flash while your browser is waiting for a page to display, making your website feel faster. 
    

This package provides a middleware that can return the response that this plugin expects.

Video Tutorial & Overview

IMAGE ALT TEXT HERE

Installation & Usage

  • You can install the package via composer:
$ composer require devmatic/laravel-instantclick
  • Next you must add the \Devmatic\InstantClick\Middleware\FilterIfInstantClick-middleware to the kernel.
// app/Http/Kernel.php

...
protected $middleware = [
    ...
    \Devmatic\InstantClick\Middleware\FilterIfInstantClick::class,
];
  • Copy the included instantclick.js to your proper public asset folder then include it at your layout file like this:
	<script src="/path/to/instantclick.js" data-no-instant></script>
    <script data-no-instant>InstantClick.init();</script>

Important Note

please use the included instantclick.js file because I modify it by adding $xhr.setRequestHeader(‘X-INSTANTCLICK’, true) to give the middleware the ability to identify InstantClient requests and give the proper response to it.

How it Works

The provided middleware provides the behaviour that the Instant Click plugin expects of the server:

An X-INSTANTCLICK request header is set to differentiate a InstantClick request from normal XHR requests. In this case, if the request is InstantClick, we skip the layout html and just render the inner contents of the body.

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

$ composer test

Contributing

Please see CONTRIBUTING for details.

Credits

The middleware in this package was originally written by Freek Van der Herten for return the response that Pjax jquery plugin expects, I edit his middleware and InstantClick plugin to make it work for Laravel. His original code can be found in this repo on GitHub.

License

The MIT License (MIT). Please see License File for more information.

laravel-instantclick's People

Contributors

diaafares 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.