popcorn.slide.js

popcorn.slide.js

// PLUGIN: SLIDE

(function (Popcorn) {
  
  /**
   * SLIDE popcorn plug-in = This will be helpful in creating slideshow.
   * Adds HTML DIV SLIDE to an element on the page.
   * Options parameter will need a start, end, target and ID OF SOURCE DIV.
   * Start is the time that you want this plug-in to execute
   * End is the time that you want this plug-in to stop executing 
   * ID is the ID if the source DIV element which will be embeded in target.
   * Target is the id of the document element that the text needs to be 
   * attached to, this target element must exist on the DOM
   * 
   * @param {Object} options
   * 
   * Example:
     var p = Popcorn('#video')
        .footnote({
          start: 5, // seconds
          end: 15, // seconds
          slide: 'div1',
          target: 'footnotediv'
        } )
   *
   */
  Popcorn.plugin( "slide" , {
    
    manifest: {
      about:{
        name: "Popcorn SLIDE Plugin",
        version: "0.1",
        author: "@nsisodiya",
        website: "narendrasisodiya.com"
      },
      options:{
        start    : {elem:'input', type:'text', label:'In'},
        end      : {elem:'input', type:'text', label:'Out'},
        target   : 'footnote-container',
      }
    },
    _setup: function(options) {
      
      options._container = document.createElement( 'div' );
      options._container.style.display = "none";
      if (document.getElementById(options.target)) {
        document.getElementById(options.target).appendChild(options._container);
      }      
    },
    /**
     * @member footnote 
     * The start function will be executed when the currentTime 
     * of the video  reaches the start time provided by the 
     * options variable
     */
    start: function(event, options){
    
      if (document.getElementById(options.slide)) {
        options._container.innerHTML = document.getElementById(options.slide).innerHTML;
      }

      options._container.style.display = "inline";
    },
    /**
     * @member footnote 
     * The end function will be executed when the currentTime 
     * of the video  reaches the end time provided by the 
     * options variable
     */
    end: function(event, options){
      options._container.style.display = "none";
    }
   
  });

})( Popcorn );