[Pkg-javascript-devel] Bug#736552: [PATCH] Add jQuery FullScreen Plugin
Jerome Charaoui
jerome at riseup.net
Fri Jan 31 02:09:20 UTC 2014
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA256
Tags: patch
Here's a patch against the jquery-goodies' source code Git tree.
- ---
debian/control | 11 ++
debian/copyright | 6 ++
debian/libjs-jquery-fullscreen.README.Debian | 13 +++
debian/libjs-jquery-fullscreen.docs | 1 +
debian/libjs-jquery-fullscreen.install | 1 +
debian/rules | 6 ++
fullscreen/jquery.fullscreen.js | 147
+++++++++++++++++++++++++++
fullscreen/readme.md | 75 ++++++++++++++
8 files changed, 260 insertions(+)
create mode 100644 debian/libjs-jquery-fullscreen.README.Debian
create mode 100644 debian/libjs-jquery-fullscreen.docs
create mode 100644 debian/libjs-jquery-fullscreen.install
create mode 100644 fullscreen/jquery.fullscreen.js
create mode 100644 fullscreen/readme.md
diff --git a/debian/control b/debian/control
index 914a50c..3af8f2d 100644
- --- a/debian/control
+++ b/debian/control
@@ -316,3 +316,14 @@ Description: Simple slideshow plugin for jQuery
A simple slideshow plugin for jQuery packed with a useful set of
features to
help novice and advanced developers alike create elegant and
user-friendly
slideshows.
+
+Package: libjs-jquery-fullscreen
+Architecture: all
+Depends: ${misc:Depends}, libjs-jquery
+Recommends: javascript-common
+Homepage:
http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
+Description: jQuery FullScreen Plugin
+ A jQuery 1.7 plugin that wraps around the Full Screen API and works
around
+ various browser differences. Works in FF 10, Chrome and Safari. It
is useful
+ for presenting users with an easier to read version of your web
pages, or
+ zooming <canvas> and <video> elements.
diff --git a/debian/copyright b/debian/copyright
index 10cafbd..078d2f4 100644
- --- a/debian/copyright
+++ b/debian/copyright
@@ -106,6 +106,12 @@ Files: slides/*
Copyright: 2011 Nathan Searles, http://nathansearles.com
License: Apache-2.0
+Files: fullscreen/*
+Copyright: 2012 Martin Angelov
+Homepage:
http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
+License: Expat
+Source: https://github.com/martinaglv/jQuery-FullScreen/issues/13
+
Files: debian/*
Copyright: (c) 2009-2011 Marcelo Jorge Vieira <metal at debian.org>
License: MIT or GPL-2+ or BSD or Apache-2.0
diff --git a/debian/libjs-jquery-fullscreen.README.Debian
b/debian/libjs-jquery-fullscreen.README.Debian
new file mode 100644
index 0000000..35e78ef
- --- /dev/null
+++ b/debian/libjs-jquery-fullscreen.README.Debian
@@ -0,0 +1,13 @@
+libjs-jquery-fullscreen for Debian
+----------------------------------
+
+In order to make use of fullscreen in your html, include the following
+lines in your html header
+
+ <script language="javascript" type="text/javascript"
+ src="/javascript/jquery/jquery.js"></script>
+
+ <script language="javascript" type="text/javascript"
+ src="/javascript/jquery-fullscreen/jquery.fullscreen.js"></script>
+
+ -- Jerome Charaoui <jerome at riseup.net>, Sun, 26 Jan 2014 19:41:54 -0500
diff --git a/debian/libjs-jquery-fullscreen.docs
b/debian/libjs-jquery-fullscreen.docs
new file mode 100644
index 0000000..c97d3b7
- --- /dev/null
+++ b/debian/libjs-jquery-fullscreen.docs
@@ -0,0 +1 @@
+fullscreen/readme.md
diff --git a/debian/libjs-jquery-fullscreen.install
b/debian/libjs-jquery-fullscreen.install
new file mode 100644
index 0000000..1e23cc1
- --- /dev/null
+++ b/debian/libjs-jquery-fullscreen.install
@@ -0,0 +1 @@
+fullscreen/jquery.fullscreen.js /usr/share/javascript/jquery-fullscreen
diff --git a/debian/rules b/debian/rules
index 4edbfeb..e33ee42 100755
- --- a/debian/rules
+++ b/debian/rules
@@ -27,6 +27,7 @@ override_dh_auto_build:
yui-compressor resize/jquery.ba-resize.js -o
resize/jquery.ba-resize.min.js
yui-compressor uploadify/jquery.uploadify.js -o
uploadify/jquery.uploadify.min.js
yui-compressor slides/source/slides.jquery.js -o
slides/source/slides.min.jquery.js
+ yui-compressor fullscreen/jquery.fullscreen.js -o
fullscreen/jquery.fullscreen.min.js
override_dh_installchangelogs:
dh_installchangelogs --package libjs-jquery-livequery
livequery/ChangeLog.markdown
@@ -59,3 +60,8 @@ override_dh_auto_clean:
rm -f resize/jquery.ba-resize.min.js
rm -f uploadify/jquery.uploadify.min.js
rm -f slides/source/slides.min.jquery.js
+ rm -f fullscreen/jquery.fullscreen.min.js
+
+override_dh_gencontrol:
+ dh_gencontrol -plibjs-jquery-fullscreen -- -v1.2
+ dh_gencontrol --remaining-packages
diff --git a/fullscreen/jquery.fullscreen.js
b/fullscreen/jquery.fullscreen.js
new file mode 100644
index 0000000..78499f0
- --- /dev/null
+++ b/fullscreen/jquery.fullscreen.js
@@ -0,0 +1,147 @@
+/**
+ * @name jQuery FullScreen Plugin
+ * @author Martin Angelov, Morten Sjøgren
+ * @version 1.2
+ * @url
http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
+ * @license MIT License
+ */
+
+/*jshint browser: true, jquery: true */
+(function($){
+ "use strict";
+
+ // These helper functions available only to our plugin scope.
+ function supportFullScreen(){
+ var doc = document.documentElement;
+
+ return ('requestFullscreen' in doc) ||
+ ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
+ ('webkitRequestFullScreen' in doc);
+ }
+
+ function requestFullScreen(elem){
+ if (elem.requestFullscreen) {
+ elem.requestFullscreen();
+ } else if (elem.mozRequestFullScreen) {
+ elem.mozRequestFullScreen();
+ } else if (elem.webkitRequestFullScreen) {
+ elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+ }
+ }
+
+ function fullScreenStatus(){
+ return document.fullscreen ||
+ document.mozFullScreen ||
+ document.webkitIsFullScreen ||
+ false;
+ }
+
+ function cancelFullScreen(){
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitCancelFullScreen) {
+ document.webkitCancelFullScreen();
+ }
+ }
+
+ function onFullScreenEvent(callback){
+ $(document).on("fullscreenchange mozfullscreenchange
webkitfullscreenchange", function(){
+ // The full screen status is automatically
+ // passed to our callback as an argument.
+ callback(fullScreenStatus());
+ });
+ }
+
+ // Adding a new test to the jQuery support object
+ $.support.fullscreen = supportFullScreen();
+
+ // Creating the plugin
+ $.fn.fullScreen = function(props){
+ if(!$.support.fullscreen || this.length !== 1) {
+ // The plugin can be called only
+ // on one element at a time
+
+ return this;
+ }
+
+ if(fullScreenStatus()){
+ // if we are already in fullscreen, exit
+ cancelFullScreen();
+ return this;
+ }
+
+ // You can potentially pas two arguments a color
+ // for the background and a callback function
+
+ var options = $.extend({
+ 'background' : '#111',
+ 'callback' : $.noop( ),
+ 'fullscreenClass' : 'fullScreen'
+ }, props),
+
+ elem = this,
+
+ // This temporary div is the element that is
+ // actually going to be enlarged in full screen
+
+ fs = $('<div>', {
+ 'css' : {
+ 'overflow-y' : 'auto',
+ 'background' : options.background,
+ 'width' : '100%',
+ 'height' : '100%'
+ }
+ })
+ .insertBefore(elem)
+ .append(elem);
+
+ // You can use the .fullScreen class to
+ // apply styling to your element
+ elem.addClass( options.fullscreenClass );
+
+ // Inserting our element in the temporary
+ // div, after which we zoom it in fullscreen
+
+ requestFullScreen(fs.get(0));
+
+ fs.click(function(e){
+ if(e.target == this){
+ // If the black bar was clicked
+ cancelFullScreen();
+ }
+ });
+
+ elem.cancel = function(){
+ cancelFullScreen();
+ return elem;
+ };
+
+ onFullScreenEvent(function(fullScreen){
+ if(!fullScreen){
+ // We have exited full screen.
+ // Detach event listener
+ $(document).off( 'fullscreenchange mozfullscreenchange
webkitfullscreenchange' );
+ // Remove the class and destroy
+ // the temporary div
+
+ elem.removeClass( options.fullscreenClass ).insertBefore(fs);
+ fs.remove();
+ }
+
+ // Calling the facultative user supplied callback
+ if(options.callback) {
+ options.callback(fullScreen);
+ }
+ });
+
+ return elem;
+ };
+
+ $.fn.cancelFullScreen = function( ) {
+ cancelFullScreen();
+
+ return this;
+ };
+}(jQuery));
diff --git a/fullscreen/readme.md b/fullscreen/readme.md
new file mode 100644
index 0000000..32d3ef0
- --- /dev/null
+++ b/fullscreen/readme.md
@@ -0,0 +1,75 @@
+# jQuery FullScreen Plugin
+
+A jQuery 1.7 plugin that wraps around the *[Full Screen
API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode)* and
works around various browser differences. Works in FF 10, Chrome and
Safari. It is useful for presenting users with an easier to read
version of your web pages, or zooming *<canvas>* and
*<video>* elements.
+
+## How to use
+
+Include jquery.fullscreen.js in your page along with version 1.7 of
the jQuery library. This gives you the `$('#elem').fullScreen()`
method. You can optionally pass an object with properties:
+
+<table>
+ <tr>
+ <th>Property</th>
+ <th>Value</th>
+ <th>Meaning</th>
+ </tr>
+ <tr>
+ <td>background</td>
+ <td>a color hash</td>
+ <td>This is the color that will be used for the background.</td>
+ </tr>
+ <tr>
+ <td>callback</td>
+ <td>a function</td>
+ <td>The callback function will be called on a full screen
change event. It has one argument - a boolean indicating whether we
are in full screen or not.</td>
+ </tr>
+ <tr>
+ <td>fullscreenClass</td>
+ <td>a string</td>
+ <td>This is the CSS class that will be added to elements in
fullscreen mode. The default class is "fullScreen".</td>
+ </tr>
+</table>
+
+After the plugin makes your element full screen, it will add the
`fullScreen` class on it (unless overridden with the `fullscreenClass`
parameter), so you can easily style it.
+
+## Example
+
+```js
+// The plugin sets the $.support.fullscreen flag:
+if($.support.fullscreen){
+
+ // ...
+ // Show your full screen button here
+ // ...
+
+ $('#fullScreen').click(function(e){
+
+ $('#content').fullScreen();
+
+ // You can also pass a hash with properties:
+ // $('#content').fullScreen({
+ // 'background' : '#111',
+ // 'callback' : function(isFullScreen){
+ // // ...
+ // // Do some cleaning up here
+ // // ...
+ // }
+ // });
+ });
+}
+```
+
+You can then apply additional styles to your element. Take the
opportunity to increase the font size, hide distractions and make for
a better reading experience.
+
+```css
+
+#content.fullScreen{
+ /* Give the element a width and margin:0 auto; to center it. */
+}
+
+```
+
+If you later wish **to cancel the full screen view**, you can do so
by calling the `fullScreen()` method again.
+
+## Demo
+
+Go to
[Tutorialzine](http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/)
for a live demo.
- --
1.8.5.2
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1
Comment: Using GnuPG with Icedove - http://www.enigmail.net/
iQEcBAEBCAAGBQJS6wXQAAoJEK/ZGpI6kvtM4f0H/j1+X+wKZrOwB2aX38UG2ssQ
q6QbOGlCrRul3xNlHMoLXFT8NgClM77qtBKsJz07+a/lJHXLcW8MY0EEzAGLLTts
1esc6qm2Ezi7TvsrCnmmJ7moKuWp+qJC5THEHLi+ZKJICKbVJG51hbkZKcfLtnb7
JP/ng9HRd9/DVmT8I0q7L3arvvxH34nnq5TI5mBCSDB2txJTHo52tjHCRla4tLRP
QVI0vmwNeBkUjiCA/d4jJFdaJ7zJIHRxX1SsCXUmvQHzaH0lK6iuepTcm269gqlM
9MzRcQvKof2WWlAKNYAl8xmYFLitEzQbfPr5rQJMpIFbCKtameOZ885sx3PGwdY=
=7lxn
-----END PGP SIGNATURE-----
More information about the Pkg-javascript-devel
mailing list