fabiobiondi / angular-fullscreen Goto Github PK

Hi
i am trying to go fullscreen after adding a css class to an element ... here is the code:

function MainCtrl($scope, Fullscreen) {
$scope.isFullscreen = false;
$scope.toggleFullScreen = function() {
$animate.addClass($element, 'test').then(function() {
$scope.$apply(function() {
$scope.isFullscreen = !$scope.isFullscreen;
});
});
}
}

changing the property inside the promise call has no effect ... is there any solution to this?

thanks

I'm unable to add this package through bower install angular-fullscreen -S
I'm using bower 1.3.9. It's the only package I can't download as it freezes on checkout.
I don't know if it's a general problem or specific to this repo.
Any hint?

Thanks!

Hey. Would it perhaps be of interest to utilize sindresoruhus/screenfull.js as its browser compatibility is superb? It's also heavily maintained (1.7k+ stars).

does anyone know how to enable ngtouch to make it work when you press the buttons on mobile devices? Thank you

Since by convention, the name for versions newer than 2 is just Angular and for earlier versions is Angular JS, this package should be named as angularjs-fullscreen so it removes confusions about it

I am using the version 1.0.1

Chrome's webkitRequestFullscreen is changed in version 71 and it takes an object for the parameter instead. This is where the error occurs:

Simply not passing the parameter to webkitRequestFullscreen will resolve this, as keyboard availability is not supported anymore.

I understand that this repo is not maintained anymore, so I won't submit a PR. Just for anyone who's still using this legacy library.

not sure if this is MIT or GPL

Doesn't works properly on IE11, for instance, if I enter to fullscreen mode using F11 key, then I can't toggle the fullscreen using this plugin. When entering in fullscreen using the plugin, a view with height 100% and width 100% doesn't works fine.

I'd like to include some UI elements inside of the fullscreen section of the page - but the click handler installed by the 'fullscreen' directive is interfering. I would actually suggest removing it alltogether so users can pick the behavior they want.

Here's the code in question

$element.on('click', function (ev) {
                  Fullscreen.enable(  $element[0] );
               });

Newer versions of Safari have changed the fullscreen API from *FullScreen to *Fullscreen. This check isn't in the current code for this repo. I'll try to get a PR in sometime today.

This may be just in my opinion but I think the name for the dependency isn't appropriate, maybe if it was called - "ng-fullscreen", or what a lot of current angular projects use "ui-fullscreen". Either way great project!

Thid project should go to bower as fast as possible. This would make everyones life so much easier.

Hello,
You should change this line:

define("FBAngular", ['angular'], function (angular) { return createModule(angular); } );

to:

define(['angular'], function (angular) { return createModule(angular); } );

To improve the portability of the module ;)

I don't know how the most obvious could have escaped, but it renders the library simply unusable...

1. On a page that has any text input control, initiate full-screen mode via this library
2. Set focus to the edit control and try to enter something;

Edit control doesn't accept any text, except spaces. If we exit full-screen via browser and set it again, using F11, then the problem is gone.

This is a fundamental issue that prevents us from using the library completely.

Tested in: Chrome 30, 31, 32.

the if at line 79
if ($attrs.onlyWatchedProperty !== undefined) {

should be placed before the $element.on('click')
or better removed at all, using:
`

if you want both functionalitys you cand write it like this:
`

Hi,
When i click a button, video need to go fullscreen. But i can't do it.
please help!

Hey,

Could you add bower.json file?

PS. nice extension!

First of all, thanks for the plugin.
It works fine for me in all browsers except IE 11, where the scroll-bar disappears when the page is in full-screen mode. Any fixes for that?

The nested property in scope (i.e. 'uiControls.isFullscreen'), that is passed to the fullscreen attribute, is not updated correctly on 'FBFullscreen.change' event. Usage a nested property (with '.') in $scope is quite often, if not recommended due to the scope prototypical inheritance (http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model)

The following code (angular-fullscreen.js, line 89)

$scope[$attrs.fullscreen] = false;

causes that the new property 'uiControls.isFullscreen' is set on $scope object, instead of setting property isFullscreen in $scope.uiControls object.

I see the two solutions - adopting one of the methods described in http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key or creating angular expression and evaluating it in the $scope (worse performance, but a lot less of code), i.e. replacing the line 89 with:

$scope.$eval($attrs.fullscreen + '= false');


I just tried it and it seems to be working. However, my element is centered to screen (smaller than usual) instead of using full screen. Did I miss any settings?

HI,

I need to disable fullscreen on double click. We are using below code to display image in fullscreen when user clicks on fullscreen icon.

$scope.goFullScreen = function (id) {
                if (Fullscreen.isEnabled() === null || angular.equals(Fullscreen.isEnabled(), undefined)) {
                    Fullscreen.enable($("#myId" + id)[0]);
                } else {
                    Fullscreen.cancel();
                    $("#myId" + id).removeClass("fullscreen_IE");
                }
            };

Now we need to disable fullscreen when user double click on any image, but the below code always executes.

if (navigator.userAgent.indexOf("Firefox") != -1)
                            {

                                $element.on('dblclick', function (ev) {
                                    Fullscreen.enable($element[0]); //comment this line because of disable double click fullscreen
                                });

                            }else{

                                $element.on('dblclick', function (ev) {
                                    Fullscreen.enable($element[0]);

                                });

                            }

How do I prevent this by either doing changes in my custom function or making a new one.
P.S. : I do not want to make any changes in angular-fullscreen.js library.

Thanks.

using $watch for attributes is wrong use $observe insted:
http://docs.angularjs.org/api/ng/type/$compile.directive.Attributes

error : 'FBAngular is not found'
line 115:
define("FBAngular", ['angular'], function (angular) { return createModule(angular); } );

change as follows
define(['angular'], function (angular) { return createModule(angular); } );

Hi author,

Do you know why fullscreenmode stop working if the URL change? I use angular-ui router in my app. Whenever I switch to fullscreenmode and click on ui-sref, it stops fullscreenmode.

Do you have any advice in this case?

Thanks!
Henry

Maybe I'm not understanding something, but shouldn't the event be broadcasted rather than emitted? https://github.com/fabiobiondi/angular-fullscreen/blob/master/src/angular-fullscreen.js#L16

As bower is already used in the project, it would be nice to install "angular-fullscreen" via bower.

http://bob.yexley.net/creating-and-maintaining-your-own-bower-package/

When we are entering full screen in chrome it first show normaln full screen for about second and then just show label of link or icon or whatever is inside tag

I'd like my complete document to go fullscreen when my page loads. But when I try to insert Fullscreen.all() at the end of controller, nothing happens. I also tried the same thing with timeout of 10 sec, in case some things aren't loading and causing the problem. This didn't help either.

Is there any way to do it.

Thanks

I can see you have changed the AngularJS dependencies version in bower.json from ~1.2.1 to >=1.2.1 however it seems that you never published it to bower as I have pulled latest package 1.0.0 and it still contains old angular dependency that doesn't work with Angular 1.3.

Pressing ESC does not call goFullscreen() function when in fullscreen. But the function gets triggerd when the element is clicked. I wanted a small element to occupy fullscreen when clicked but It did not occupy the whole witdh and height of the screen so I used the function to set class. But since ESC is not triggered the set class does not get unset when ESC is pressed but it does when the button is pressed

angularjs is in bower, it would be nice if bower.json listed it as a dependency so that we could know which versions of angularjs this is compatible with

on firefox the mozfullscreenchange event is fired on the document not on the element,
so the full screen will work only once to fix that you need to do this:
angular.element(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange', function(){

Hi everyone,

so my full code is this:

<div class="panel-heading">
<h4 class="panel-title">
<a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<div ng-click="" class="pull-left ng-binding ng-scope">aaa</div>
<button type="button" class="btn btn-default pull-right ng-scope" aria-label="Left Align" ng-click="$event.preventDefault(); $event.stopPropagation();">
<span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
</button>
< div class="clearfix ng-scope"></div>
</a>
</h4>
</div>
<div class="panel-collapse collapse in" collapse="!isOpen" style="height: auto;">
<div class="panel-body" ng-transclude="">
<accordion-heading class="ng-scope"></accordion-heading>
<div class="ng-scope" fullscreen="isFullscreen"></div>
</div>
```

there is one button in there with preventPorpagation where i want to put the function that will toggle the fullscreen ....
the element i want to do fullscreen on is the the last div ... third line from the bottom

no clue on how to do this :(

thanks,
Rarutu

Hi,

Thanks for this wonderful module.

There is an error in the readme under "Available Methods". You wrote "isEnable()" but it's "isEnabled".

Safari v8.0.3. Nothing zooms.

Hi. Thank you for awesome service. The demo doesn't appear to work in IE though (tried with IE9 and IE11). Nothing happens when I click on the images in the demo. What browsers does this service officially support?

if I press the f11 key, with the maximize or minimize button, it no longer works