diff --git a/.gitignore b/.gitignore index b2725ba75..fe8c86da8 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ dist \.\#* \#*\# package-lock.json -node_modules \ No newline at end of file +node_modules +.env diff --git a/Makefile b/Makefile index e66c1b0a4..9c7f9f857 100644 --- a/Makefile +++ b/Makefile @@ -14,13 +14,14 @@ VERSION ?= $(shell git show -s --pretty=format:%h) RHINO ?= java -jar ${BUILD_DIR}/js.jar -CLOSURE_COMPILER = ${BUILD_DIR}/google-compiler-20100917.jar +# CLOSURE_COMPILER = ${BUILD_DIR}/google-compiler-20100917.jar +CLOSURE_COMPILER = google-closure-compiler compile = @@${MINJAR} $(1) \ --compilation_level SIMPLE_OPTIMIZATIONS \ --js_output_file $(2) # minify -MINJAR ?= java -jar ${CLOSURE_COMPILER} +MINJAR ?= npx ${CLOSURE_COMPILER} # source POPCORN_SRC = ${PREFIX}/popcorn.js diff --git a/build/google-compiler-20100917.jar b/build/google-compiler-20100917.jar deleted file mode 100644 index 4dfa5ad0b..000000000 Binary files a/build/google-compiler-20100917.jar and /dev/null differ diff --git a/package.json b/package.json index 3f3a54124..63cb16cf4 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,10 @@ "url": "https://github.com/menismu/popcorn-js" }, "dependencies": { - "express": "^4.16.4" + "dotenv": "^6.2.0", + "express": "^4.16.4", + "google-closure-compiler": "^20191027.0.0", + "http-server": "^0.11.1" }, "license": "MIT" } diff --git a/plugins/figure/popcorn.figure.html b/plugins/figure/popcorn.figure.html new file mode 100755 index 000000000..237cf2acb --- /dev/null +++ b/plugins/figure/popcorn.figure.html @@ -0,0 +1,64 @@ + + + + Popcorn Figure Plug-in Demo + + + + + +

Popcorn Figure Plug-in Demo

+

Two figures will appear at 5 seconds.

+

First one (with an overlayed text) will disappear at 15 seconds.

+

Second one (without an overlayed text) will disappear at 45 seconds.

+
+ +
+
+ + + diff --git a/plugins/figure/popcorn.figure.js b/plugins/figure/popcorn.figure.js new file mode 100755 index 000000000..8e04790b9 --- /dev/null +++ b/plugins/figure/popcorn.figure.js @@ -0,0 +1,151 @@ +// PLUGIN: FIGURE + +(function ( Popcorn ) { + +/** + * Figures popcorn plug-in + * Shows an figure element + * Options parameter will need a start, end, href, target and src. + * 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 + * href is the url of the destination of a anchor - optional + * Target is the id of the document element that the iframe needs to be attached to, + * this target element must exist on the DOM + * Src is the url of the image that you want to display + * text is the overlayed text on the figure - optional + * + * @param {Object} options + * + * Example: + var p = Popcorn('#video') + .figure({ + start: 5, // seconds + end: 15, // seconds + href: 'http://www.drumbeat.org/', + src: 'http://www.drumbeat.org/sites/default/files/domain-2/drumbeat_logo.png', + text: 'DRUMBEAT', + target: 'figurediv' + } ) + * + */ + + let i=0; + + Popcorn.plugin( "figure", function (options) { + + return { + _setup: function( options ) { + // console.log(options); + let figure = options.figure = document.createElement( "figure" ), + img = document.createElement( "img" ), + target = document.getElementById( options.target ); + figure.appendChild(img); + figure.style.display = "none"; + figure.classList.add("figure-plugin"); + figure.id = options.id || `popcorn-figure${i}`; + i++; + if (options.text) { + let caption = document.createElement ("figcaption"); + caption.innerHTML = options.text; + figure.appendChild(caption); + } + // options.anchor = document.createElement( "a" ); + // options.anchor.style.position = "relative"; + // options.anchor.style.textDecoration = "none"; + // options.anchor.style.display = "none"; + + // add the widget's div to the target div. + // if target is