lazy_loading_page 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5af87dfee621fc240bc5285b2dfea1f4e8c1be00
+  data.tar.gz: 3989e27efdfb2a07413b10105897f200256b2dc2
+SHA512:
+  metadata.gz: 1a5b9e2d099300039bbc1ba4825f7a0ac2603c6bea5b348b7830fde5763e8089579d870d3cb2d2563256197e104921f3a48cf94a319ac2f454ae0be6a74915e7
+  data.tar.gz: 84bf6a37a8f9b7219fc61ba764d501c55539d0809ac078e9cc9b2158cfbf1b9a2d690fe71254c6ae469ff4aabfdf964e1470397fe5598c86c50d8378b7e395d8

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 Jignesh Satam
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,120 @@
+# lazy_loading_page
+***Load page lazily as an when required***
+***
+
+
+lazy_loading_page is a gem that helps to **load page lazily** that is as an **when required**. The gem ***reduces page load time*** and ***reduces server ram*** by loading important content of the page in the first call and then by triggering calls to load the remaining page. The gem give **Reactjs** like **functionality** in your ruby-on-rails application.
+
+## Installation
+
+Add this line to your application's **Gemfile**:
+
+```ruby
+gem 'lazy_loading_page'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install lazy_loading_page
+
+Add the following line to your **application.js** file:
+
+    //= require lazy_load
+
+Add the following line to your **application.css** file:
+
+    *= require lazy_load
+
+## Usage
+Call the following method from view file (.html.erb / .html.haml) and pass a url as a parameter
+
+### .html.erb example
+
+**Passing url as string**
+```erb
+<%= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications") %>
+```
+**Passing url string with parameters**
+```erb
+<%= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5") %>
+```
+**Passing url as helper method**
+```erb
+<%= lazy_load(notifications_path) %>
+```
+**Passing url as helper method with parameters**
+```erb
+<%= lazy_load(notifications_path(page: 1, count: 5)) %>
+```
+### Configuring lazy loading page
+Configuration can be achieved by passing parameters to lazy_load method
+Following are some **configuration examples**:
+```erb
+<%= lazy_load(notifications_path(page: 1, count: 5), id: "my_lazy_loader", type: "script", success: "afterSuccess()") %>
+
+<%= lazy_load(notifications_path, class: "lazy_loaders", loader: "off", type: "json", failure: "afterFailure()", complete: "afterComplete(my_arg1, my_arg2)") %>
+
+<%= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5", later: true, id: "later_lazy_loader",  failure: "onSuccess(my_arg1)", complete: "onComplete()") %>
+```
+### Note
+When using configuration option `later: true` **explicit trigger** the request call.
+By calling the function `delayedLoading(elementToLoad);` in your javascript and passing the **lazy_loading element/elements** as argument.
+**lazy_loading element/elements has class** `lazy_load`
+
+***Checkout the*** [***Demo***](http://lazy-loading-page-app.herokuapp.com/)
+
+***lazy-loading-page app implementation*** [@Github](https://github.com/JigneshSatam/lazy_loading_page_app)
+
+
+### .html.haml example:
+```haml
+= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications")
+
+= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5")
+
+= lazy_load(notifications_path)
+
+= lazy_load(notifications_path(page: 1, count:5))
+
+= lazy_load(notifications_path(page: 1, count: 5), id: "my_lazy_loader", type: "script", success: "afterSuccess()")
+
+= lazy_load(notifications_path, class: "lazy_loaders", loader: "off", type: "json", failure: "afterFailure()", complete: "afterComplete(my_arg1, my_arg2)")
+
+= lazy_load("http://lazy-loading-page-app.herokuapp.com/notifications?page=1&count=5", later: true, id: "later_lazy_loader",  failure: "onSuccess(my_arg1)", complete: "onComplete()")
+```
+
+## Configurations:
+
+|Attributes|Defaults|Options|Description
+|:----------:|:--------:|:-------:|-----------|
+|type|null|script/json|**Type of request** to be made.|
+|later|null|true|This will **stop the implicit loading** of the request, so that user can **explicit load the request** when required.|
+|id|null|`userdefined`|Can **attach ID** to the object loaded in the DOM, it can be **helpful in explicit loading** of the request.|
+|loader|on|off|This can be used to **turn on / off** the **loading effect**.|
+|class|null|`userdefined`|Can **attach class** to the object loaded in the DOM, it can be **helpful in explicit loading** of the request.|
+
+## Callbacks:
+
+|Callback|Example|Description
+|:-----:|-----------|---------|
+|success| functionAfterSuccess(arg1, arg2); |This function will be called when the request is successful.|
+|failure| functionAfterFailure(arg1, arg2); |This function will be called when the request fails.|
+|complete| functionAfterComplete(arg1, arg2); |This function will be called when the request is completed.|
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release` to create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/lazy_loading_page/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/README.rdoc

@@ -0,0 +1,3 @@
+= LazyLoadingPage
+
+This project rocks and uses MIT-LICENSE.

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'LazyLoadingPage'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/lazy_load.js

@@ -0,0 +1,196 @@
+("turbolinks:load DOMContentLoaded ready".split(" ")).forEach(function(e){
+  if (window.lazyLoaderInitialize === undefined) {
+    document.addEventListener(e, function() {
+      lazyLoad();
+    });
+    window.lazyLoaderInitialize = true;
+  }
+});
+
+function lazyLoad(){
+  var $lazy_loaders = document.querySelectorAll(".lazy_load:not([data-later='true']):not([data-loading='started'])");
+  lazyLoadElements($lazy_loaders);
+}
+
+function lazyLoadElements(elements){
+  for (var i = 0; i < elements.length; i++) {
+    (function(i){
+      $lazy_loader = elements[i];
+      lazyLoadElement($lazy_loader);
+    })(i);
+  };
+}
+
+function delayedLoading(ele){
+  if ((ele instanceof NodeList) || ((window.jQuery !== undefined || window.$ !== undefined) && (ele instanceof jQuery))) {
+    lazyLoadElements(ele);
+  }
+  else if(ele instanceof HTMLElement){
+    lazyLoadElement(ele);
+  }
+}
+
+function lazyLoadElement(ele){
+  if (!ele.classList.contains("lazy_load"))
+    return false;
+  var id = ele.getAttribute("data-id");
+  var url = ele.getAttribute("data-url");
+  if (ele.getAttribute("data-loader") != "false")
+    addLoader(ele);
+  var xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = function(){ajaxCallback(xhttp, id);};
+  xhttp.open("GET", url, true);
+  if (ele.getAttribute("data-type") == "script")
+    xhttp.setRequestHeader('Accept', 'text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*');
+  if (ele.getAttribute("data-type") == "json")
+    xhttp.setRequestHeader('Accept', "application/json, text/javascript, */*");
+  xhttp.setRequestHeader("X-CSRF-Token", document.querySelector("[name='csrf-token']").content);
+  xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+  xhttp.send();
+  ele.setAttribute("data-loading", "started");
+}
+
+function addLoader(ele){
+  if (document.querySelector("[data-id='"+ ele.getAttribute("data-id") +"'][class='loading-container']"))
+    return false;
+  var loader_img = document.createElement("div");
+  loader_img.setAttribute("class", "loading-container");
+  loader_img.setAttribute("data-id", ele.getAttribute("data-id"));
+  if (["script", "json"].indexOf(ele.getAttribute("data-type")) >= 0)
+    loader_img.setAttribute("data-type", ele.getAttribute("data-type"));
+  if (ele.getAttribute("data-success") != null)
+    loader_img.setAttribute("data-success", ele.getAttribute("data-success"));
+  if (ele.getAttribute("data-failure") != null)
+    loader_img.setAttribute("data-failure", ele.getAttribute("data-failure"));
+  if (ele.getAttribute("data-complete") != null)
+    loader_img.setAttribute("data-complete", ele.getAttribute("data-complete"));
+  var span = document.createElement("span");
+  span.setAttribute("class", "loading-indicator");
+  for(var j=0; j<3; j++){
+    var i = document.createElement("i");
+    span.appendChild(i);
+  }
+  loader_img.appendChild(span);
+  ele.parentElement.replaceChild(loader_img, ele);
+  loader_img.appendChild(ele);
+}
+
+function ajaxCallback(xhttp, id) {
+  var elementToReplace = document.querySelectorAll("[data-id='"+id+"']")[0];
+  switch(xhttp.readyState) {
+    case XMLHttpRequest.UNSENT:
+      // code block
+      break;
+    case XMLHttpRequest.OPENED:
+      // code block
+      break;
+    case XMLHttpRequest.HEADERS_RECEIVED:
+      // code block
+      break;
+    case XMLHttpRequest.LOADING:
+      // code block
+      break;
+    case XMLHttpRequest.DONE:
+      requestComplete(xhttp, elementToReplace);
+      callbackFor(elementToReplace, "complete", xhttp);
+      break;
+    default:
+      requestComplete(xhttp, elementToReplace);
+      callbackFor(elementToReplace, "complete", xhttp);
+      break;
+  }
+}
+
+function requestComplete(xhttp, elementToReplace){
+  if (xhttp.status == 200) {
+    requestSuccess(xhttp, elementToReplace);
+    callbackFor(elementToReplace, "success", xhttp);
+  }
+  else{
+    requestFailure(xhttp, elementToReplace)
+    callbackFor(elementToReplace, "failure", xhttp);
+  }
+}
+
+function requestSuccess(xhttp, elementToReplace){
+  var parentElement = elementToReplace.parentNode;
+  if (elementToReplace.getAttribute("data-type") == "script"){
+  // if(true){
+    javascriptResponseActions(xhttp, parentElement, elementToReplace);
+  }
+  else if(elementToReplace.getAttribute("data-type") == "json"){
+    // JSON.parse(xhttp.response);
+    parentElement.removeChild(elementToReplace);
+  }
+  else{
+    plainResponseActions(xhttp, parentElement, elementToReplace);
+  }
+  lazyLoad();
+}
+
+function requestFailure(xhttp, elementToReplace){
+  if (elementToReplace.classList.contains("loading-container"))
+    elementToReplace = elementToReplace.querySelector('.lazy_load')
+  loadElement(elementToReplace);
+}
+
+function javascriptResponseActions(xhttp, parentElement, elementToReplace){
+  var newScript = document.createElement("script");
+  newScript.innerHTML = xhttp.responseText;
+  parentElement.insertBefore(newScript, elementToReplace);
+  parentElement.removeChild(elementToReplace);
+}
+
+function plainResponseActions(xhttp, parentElement, elementToReplace){
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(xhttp.responseText, "text/html");
+  var newElements = doc.querySelector("body");
+  if (window.$ !== undefined){
+  // if (false){
+    new_ele = $(xhttp.responseText);
+    if (newElements !== null){
+      new_ele = $(newElements.innerHTML);
+    }
+    $(elementToReplace).replaceWith(new_ele);
+  }
+  else{
+    var template = document.createElement("template");
+    if (newElements !== null){
+      template.innerHTML = newElements.innerHTML;
+    }
+    else{
+      template.innerHTML = xhttp.responseText;
+    }
+    var childNodes = template.content.childNodes
+    var newElement = elementToReplace
+    var scriptTags = [];
+    for(var i= childNodes.length-1; i>=0 ; i--){
+      newPreviousElement = childNodes[i];
+      parentElement.insertBefore(newPreviousElement, newElement);
+      if(newPreviousElement.nodeName == "SCRIPT"){
+        scriptTags.push(newPreviousElement.textContent);
+        eval();
+      }
+      newElement = newPreviousElement;
+    }
+    runScripts(scriptTags);
+    parentElement.removeChild(elementToReplace);
+  }
+}
+
+function runScripts(scriptTags){
+  scriptTags.forEach( function(scriptTag){
+    eval(scriptTag)
+  });
+}
+
+function callbackFor(ele, option, xhttp){
+  var userFunction = ele.getAttribute("data-"+ option);
+  if (userFunction !== null){
+    userFunctionArray = userFunction.split("(");
+    var extractAttributes = userFunctionArray[1].split(")")[0];
+    var attributes = extractAttributes.split(",").map(function(arg){return arg.trim()})
+    var functionName = userFunctionArray[0];
+    eval(functionName).apply(xhttp, attributes);
+  }
+}

data/app/assets/stylesheets/lazy_load.css

@@ -0,0 +1,49 @@
+@-webkit-keyframes bouncedelay {
+  0%, 100%, 80% {
+    -webkit-transform: scale(0);
+    transform: scale(0)
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1)
+  }
+}
+@keyframes bouncedelay {
+  0%, 100%, 80% {
+    -webkit-transform: scale(0);
+    transform: scale(0)
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1)
+  }
+}
+.loading-indicator{
+  display: inline-block;
+  vertical-align: middle;
+}
+.loading-indicator i{
+  position: relative;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: #A6ADAD;
+  border-radius: 50%;
+  line-height: 0;
+  -webkit-transform-origin: center center;
+  transform-origin: center center;
+  -webkit-animation: bouncedelay 1.3s infinite linear;
+  animation: bouncedelay 1.3s infinite linear
+}
+.loading-indicator i:nth-child(2){
+  -webkit-animation-delay: .3s;
+  animation-delay: .3s
+}
+.loading-indicator i:nth-child(3){
+  -webkit-animation-delay: .6s;
+  animation-delay: .6s
+}
+.loading-container {
+  text-align: center;
+  padding: 1em 1em
+}

data/app/helpers/lazy_loading_page/application_helper.rb

@@ -0,0 +1,18 @@
+module LazyLoadingPage
+  module ApplicationHelper
+    def lazy_load(url, options = {})
+      options = options.symbolize_keys
+      id = options[:id].presence
+      classes = ("lazy_load " + options[:class] rescue "lazy_load")
+      params = options[:params]
+      data_merge_hash = {}
+      options[:later].present? && (options[:later].to_s.downcase == "true") && (data_merge_hash[:later] = true)
+      options[:loader].present? && (options[:loader].to_s.downcase == "off") && (data_merge_hash[:loader] = false)
+      options[:type].present? && (["script", "json"].include?(options[:type])) && (data_merge_hash[:type] = options[:type])
+      options[:success].present? && data_merge_hash[:success] = options[:success]
+      options[:failure].present? && data_merge_hash[:failure] = options[:failure]
+      options[:complete].present? && data_merge_hash[:complete] = options[:complete]
+      content_tag("input", nil, type:"hidden", id: id, class: classes, data: {id: SecureRandom.uuid, url: url}.merge!(data_merge_hash))
+    end
+  end
+end