I'm trying to zoom my pdf opened with this plugin:
https://github.com/sayanee/angularjs-pdf
how can i active the zoom?
<script id="pdf-viewer.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Report</h1>
<button ng-click="vm.modal.hide()" class="button button-icon icon ion-android-close comp"></button>
</ion-header-bar>
<ion-content>
<ng-pdf ng-if="pdfUrl" template-url="partials/viewer.html" canvasid="pdf" scale="page-fit"></ng-pdf>
</ion-content>
</ion-modal-view>
</script>
viewer:
{{loading}}
<canvas id="pdf" class="rotate0"></canvas>
You can use the ion-scroll component. This enables ionic scrolling and zooming. However, it just draws the content once, so when you zoom everything gets blurry. I fixed this by drawing the content with 200% the size of what it was supposed to be, and then set the default zoom to 0.5. I've provided some example code below:
<ion-scroll max-zoom="5" overflow-scroll="false" zooming="true" direction="xy" style="width: 100%; height:100%;" scrollbar-x=false; scrollbar-y = false;>
<img src="img/floorplan.jpg" width="200%">
</ion-scroll>
Note that you have to set overflow-scroll to false, because else it would use the default ionic scrolling and zooming, which causes the zooming not to work!
Related
I have an application that work in LTR or RTL mode, and im trying to update the menu to reflect the direction, so this is what i did:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="{{ (is_rtl) ? 'right' : 'left' }}">
<button menu-toggle="{{ (is_rtl) ? 'right' : 'left' }}" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
</ion-content>
</ion-view>
And the is_rtl is the variable set in the controller to know the direction. The problem is this does not have any effect. It appears that ionic does not parse the variable in the side part. Entering right or left manually works fine, but doesnt look it can work dynamically like. I even tried ng-if with no luck:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="left" ng-if="!is_rtl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right" ng-if="is_rtl">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
How can I solve this?
Thanks.
Update 1
I noticed The second try using ng-if partially works, but only if i navigated to a screen and returned back to the home screen, it does not work on initial load.
Just a quick note, the ion-nav-buttons directive must be the first descendant of the ion-view for it to work. From the docs:
Note that ion-nav-buttons must be immediate descendants of the
ion-view or ion-nav-bar element (basically, don’t wrap it in another
div).
It looks from the source code the side attribute is not being interpolated so no matter what you do, it'll always resolve to the html you pass. This is the snippet from their compile function
var side = 'left';
if (/^primary|secondary|right$/i.test(tAttrs.side || '')) {
side = tAttrs.side.toLowerCase();
}
Meaning that tAttrs.side will equal to "{{is_rtl}}" and not the actual boolean value.
Also it looks like ng-[if|show] will not work here because the lifecycle of the directive is being handled by the $ionNavBarController on init.
In short it looks like your feature with ion-nav-button isn't possible at the moment. However you might be able to pull it off by setting the nav-bar hidden with <ion-view hide-nav-bar="true"> and then set your controls in a custom ion-header-bar like this:
<ion-header-bar>
<div class="buttons" ng-class="{'buttons-right': is_rtl}">
<span ng-class="{'right-buttons': is_rtl}">
<button class="button button-clear">
Right button block
</button>
</span>
</div>
</ion-header-bar>
I've a view with textangular as an element. On Android(I tested), if the keyboard is opened, the view is not scrolling up to prevent the editor from getting behind the keyboard.
I installed the Keyboard plugin com.ionic.keyboard.
This is the structure of the page:
<ion-view id="newblogview">
<ion-nav-buttons side="left">
...
</ion-nav-buttons>
<ion-content scroll="true" overflow-scroll="true" class="has-header" delegate-handle="mainScroll">
<iframe data-tap-disabled="true" style="width: 100%; min-height: 100%" src="./templates/blog/html/blog-editor.html" name="blogeditor" id="blogeditor"></iframe>
</ion-content>
</ion-view>
it's not moving up when the keyboard is opened by focusing on the input.
I've tried android:windowSoftInputMode="adjustPan" and also "adjustResize"
And also I've tried native.keyboardshow event to call $ionicScrollDelegate.scrollBottom(true);
I think we've Keyboard attach directive for footer, but I can't place text editor in the footer.
Does ionic framework support adjusting ion content to keyboard show/hide? is this feature is not supported yet in framework or am I missing something.
This question is similar to another thread, but there is no accepted answer.
Please help.
-Prakash.
You can add this to your html component
<div delegate-handle="toThisPosition" ng-click="GoHere()"> </div>
and adding this to the ng-click method GoHere() in your controller:
GoHere() {
$ionicScrollDelegate.$getByHandle('toThisPosition').scrollBottom(true);
}
I'm writing a canvas app and the canvas resides in my main view. On orientation change, I'd like to hide the header and footer.
I can't use a new view, because it would wipe out the canvas element (or at least hide it), and I'd have to re-run a bunch of graphics initialization code. Instead, I just resize the canvas to match the horizontal phone dimensions.
So, when the phone is horizontal I need to hide the header and footer of my view. Any ideas?
EDIT
So you can hide the footer with an ng-show. The same is not true of the header, which I'm still stuck on.
Here is a copy of my view:
<ion-view title="My Title">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header has-footer" id="testCanvas" overflow-scroll="true" on-scroll="scroll()">
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive" style="padding-bottom: 60px;">
<div class="button-bar">
<button class="button icon-left ion-ios7-cloud-upload-outline" ng-click="go('save')">Save</button>
<button class="button icon-left ion-ios7-folder-outline" ng-click="go('load')">Load</button>
<button class="button icon-left ion-ios7-play-outline" ng-click="play()">Play</button>
</div>
</ion-footer-bar>
</ion-view>
So, adding the following attribute to your ion-view will hide the bar, and then removing the class "has-header" from ion-content will move your content upwards.
<ion-view hide-nav-bar="true"></ion-view>
However, it doesn't look like you can do this dynamically. i.e.:
<ion-view hide-nav-bar="{{hide}}"></ion-view>
...doesn't work. I'd welcome any thoughts on how to make it dynamic.
*I already answered the question about removing the footer bar in the edit
I am using PDFMAKE to create a base64 encoded pdf and I tried to show it with the Iframe by giving the encoded base64 to iframe src. It works on PC but it didn't work on the mobile ( android and ios ).
So, finally I stumbled upon Angularjs-PDF to show the pdf. Now, I am able see the pdf in mobile. But when I try to give custom width and height respective to device it takes. But the problem arises when I use zoom functionality, the page gets zoomed but it goes out of the screen. I can not even slide or swipe to see the content outside of the screen.
I want to make a pdf on the client side and preview to user with zoom functionality in Ionic.
If anybody got any solution for this please share, Thank You.
So for our company app we used angular-pdf Viewer:
Here is the template for the pdf viewer template, putting inside a ion-scroll allows for pinch zoom and it works great.
<div ng-show="notLoaded" class=" center bar bar-subheader">
<h1 class="title">Loading PDF...</h1>
</div>
<div class="tabs tabs-icon-left">
<a class="tab-item" ng-click="goPrevious()">
<i class="icon ion-arrow-left-c"></i>
Prev
</a>
<a class="tab-item" ng-click="goNext()">
<i class="icon ion-arrow-right-c"></i>
Next
</a>
</div>
<ion-scroll zooming="true" direction="xy" class="has-header">
<canvas class="padding" id="pdf" class="rotate0"></canvas>
</ion-scroll>
then on the page that shows the pdf:
<ion-view>
<div class="bar bar-header bar-positive">
<button ng-click="$ionicGoBack()" class="button button-clear button-light icon-left ion-chevron-left">Go Back</button>
</div>
<div class="has-header">
<ng-pdf template-url="components/pdfviewer/viewer.html" canvasid="pdf" scale="0.675">
</ng-pdf>
</div>
</ion-view>
You feed the template to the pdf viewer and it will show up on the page.
To use it first include the right js files:
<script src="bower_components/pdfjs-dist/build/pdf.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script>
then inject pdf:
var app = angular.module('App', ['pdf']);
you can read more about it here, but using it in combination with ion-scroll it works just like you think it should on a native device:
https://github.com/winkerVSbecks/angular-pdf-viewer
I have a view in ionic which has an image at the top and a scrollable list of messages. I want the image to stay on the screen while the list can be scrolled. Here is my current code:
<ion-content scroll="false">
<img src="/myimage.png">
<ion-scroll direction="y" style="height: auto;" delegate-handle="postScroll">
<div class="list">
<a class="item item-avatar" ng-repeat="post in posts">
<img ng-src="myimage.png">
<h2>{{post.title}}</h2>
<p>{{post.content}}</p>
</a>
</div>
</ion-scroll>
</ion-content>
This works pretty well, i.e. the scroll does work and the image stays in place. But I am having trouble setting the height. If I have 100 posts, for example, I can only see 2-3 since the height container is not nearly large enough. Am I doing this correctly? How can I set a variable height for the number of posts? The user can add posts dynamically so this height needs to be able to change.
I leave these codepen which will help you!
<ion-scroll direction="x" zooming="false" delegate-handle="horizontal2" horizontal-scroll-fix="mainScroll">
example 1
example 2