[Pkg-javascript-commits] [jquery-goodies] 01/08: Added upstream version of jQuery-FullScreen
Marcelo Jorge Vieira
metal at moszumanska.debian.org
Mon Feb 10 02:01:04 UTC 2014
This is an automated email from the git hooks/post-receive script.
metal pushed a commit to branch master
in repository jquery-goodies.
commit a95cc2d2576d80d420cfa00c9c4d7b435d102b82
Author: Marcelo Jorge Vieira <metal at alucinados.com>
Date: Sun Feb 9 21:56:53 2014 -0200
Added upstream version of jQuery-FullScreen
---
fullscreen/fullscreen/jquery.fullscreen.js | 147 +++++++++++++++++++++++++++++
fullscreen/readme.md | 75 +++++++++++++++
2 files changed, 222 insertions(+)
diff --git a/fullscreen/fullscreen/jquery.fullscreen.js b/fullscreen/fullscreen/jquery.fullscreen.js
new file mode 100644
index 0000000..78499f0
--- /dev/null
+++ b/fullscreen/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.
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/jquery-goodies.git
More information about the Pkg-javascript-commits
mailing list