How to mask and unmask input element password type in Ionic / Angluar

How to mask and unmask input element password type in ionic/angular/js:

  
this.togglePasswordField = function () {
     console.log("toggle password field called");
     if (document.getElementById("passwordElement").type == "password") {
        document.getElementById("passwordElement").type = "text";

         document.getElementById("passwordHideIcon").classList.remove("ion-eye");
         document.getElementById("passwordHideIcon").classList.add("ion-eye-disabled");
     }
     else {
          document.getElementById("passwordElement").type = "password";
          document.getElementById("passwordHideIcon").classList.remove("ion-eye-disabled");
          document.getElementById("passwordHideIcon").classList.add("ion-eye");     
          }
    }

This way only uses basic html element manipulation.

passwordHideIcon element is a button that calls the function and uses the ionic icon for eyes and eyes disabled.

How to Disable Android Back Button in Ionic 1 / Angular

To disable back button in Android put one of the codes below in your app.js in the .run function.

// app.js

// Disable Back in Entire App
$ionicPlatform.registerBackButtonAction(function(){
  event.preventDefault();
}, 100);

Or Conditionally Disable Back:

// app.js

$ionicPlatform.registerBackButtonAction(function(){
  if($ionicHistory.currentStateName === 'someStateName'){
    event.preventDefault();
  }else{
    $ionicHistory.goBack();
  }
}, 100);

Ionic Slider Input Doesn’t Work in Popups on iOS

The issue seems to be in the modal.js file of the ionic library

https://github.com/driftyco/ionic/blob/1.x/js/angular/service/modal.js#L194

The temporary fix:

var isInScroll = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'scroll');
if (isInScroll !== null && !isInScroll) {
    e.preventDefault();
}

Another possible solution is to add the class=”scroll” to your input element that is of type range.

Link to the github issue.

How To Build Production and Release Version of Ionic App

To make the production and release version of Android app using Ionic run:

ionic cordova build ios --prod --release

This should run the same as the expanded version:

ionic cordova build ios --minifycss --optimizejs --minifyjs --release

You may need to run with sudo in front of the command if you have permission issues.

For iOS builds the –release flag does not seem to do anything in my testing. I could not find any official documentation explaining what this flag does to iOS builds.

For more detail visit the ionic documentation on building
https://ionicframework.com/docs/cli/commands/cordova-build

How To Blur Popup Background in Ionic/Angular

How To Blur Popup Background in Ionic/Angular using manual method:

To achieve this in Ionic 1, you need to set the main div’s class (that is displayed in the background of your popup) to use the blur css class .

CSS:

// css file 

.blur{
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

HTML:

//In your html set the main div of your app to use a dynamic class
 
<div ng-class="blurClass"></div>

JS Controller:


//In JS file set the blur variable to the blur class
 
$scope.blurClass = "blur";

// when done just set the blur to false

$scope.blurClass = false;

How To Open $ionicPopover Popup from Controller

How To Open $ionicPopover from Controller programmatically without a mouse click event:


var self = this; // store reference to 'this' controller object

this.openCustomPopover = function ($event) {

        $event = document.getElementsById('myElementID'); // html element ID 

        $ionicPopover.fromTemplateUrl('popovers/myhtmlpopover.html', {
                scope: $scope
            }).then(function (popover) {
                console.log('in the popover then function');
                self.popover = popover;
                self.popover.show($event);
            });
        }

You can call this function from your controller without a true click event, by faking the $event object.

How to Display and Format Code Snippets on WordPress

How to Display and Format Code Snippets on WordPress ?

What I use is Pretty print, and it’s very simple to setup.

1. Include this script in your header run_prettify.js

2. Start your code with the pre tag

<pre class="prettyprint">
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}
</pre>

More information at https://github.com/google/code-prettify

How to Dynamically Load Dark Mode CSS with JavaScript

How to Dynamically Load Dark Mode CSS in your Website or WebApp (Ionic, React, or Angular):

1. Create the two separete css files, one for dark colors and one for bright
2. Upload those to your server to css folder
3. Use the script example below to load the appropriate css file based on the hours in the day.


function loadcssfile(filename, filetype){
    if (filetype=="css"){ //check filename is an external CSS file
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

var date = new Date();

 if (date.getHours() >= 19 || date.getHours() <= 7) // after 7pm before 7am
	loadcssfile("../css/darkmode.css", "css");
 else
	loadcssfile("../css/lightmode.css", "css");

Don't blind your readers at night -_-

If you want to incorporate sunset and sunrise you can look into Suncal library, but you will have to request user's location which is always rude and not recommended.

How to Capture Enter View Event in Directive in Ionic/Angular

How to Capture Page View Enter Event in Directive in Ionic 1 Angular 2?

Directives do not get the normal $ionicView.enter events like controllers. You have to register for the parent view event using $ionicParentView.enter.

$scope.$on("$ionicParentView.enter", function (event, data) {
    // will fire enter event in your directive              
});

Note: Do not import $ionicParentView into your directive, this will cause your code to break.

Good luck!

How to Find Visible HTML Element by class in JavaScript

How to Find Visible HTML Element by class in JavaScript?

We can use the same logic jQuery uses with this code:

element.offsetWidth > 0 && element.offsetHeight > 0;

You can simply go through the list of your class elements to find the one currently displayed.

for (var i = 0; i < document.getElementsByClassName('myclass').length; i++) 
{
   if (document.getElementsByClassName('myclass')[i].offsetWidth > 0 &&
       document.getElementsByClassName('myclass')[i].offsetHeight > 0) 
       {
           //found the visible element of class 'myclass'
            break;
       }
}

Creating and Opening PDF on Ionic 1 on iOS

Recently I ran into an issue using the PdfMake on Ionic 1 on iOS. It works fine on the browser with a simple download or open command but not on the actual device.

Install the cordova libraries:

cordova.plugins.fileOpener2
cordova-plugin-file

Download the pdfmake javascript files and include them in your index.html

<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>

The code:

  var self = this ; // defined on top of the file

  var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };

            self.pdfObj = pdfMake.createPdf(docDefinition);

            if (window.cordova) {
                self.pdfObj.getBuffer(function (buffer) {
                    var blob = new Blob([buffer], { type: 'application/pdf' });
                    // Save the PDF to the data Directory of our App
                    $cordovaFile.writeFile(cordova.file.dataDirectory, 'myletter.pdf', blob, { replace: true }).then(function () {
                        // Open the PDf with the correct OS tools
                        cordova.plugins.fileOpener2.open(cordova.file.dataDirectory + 'myletter.pdf', 'application/pdf');
                    })
                });
            }

Setup Config.xml

In your config.xml make sure you have the file settings

<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="iosPersistentFileLocation" value="Library" />

Ionic HTTP posts don’t work on iOS

I ran into this strange problem today where HTTP requests stopped working on iOS alone. Even though I have the latest Ionic CLI, my project was running Ionic 1 still.

To solve this http error I removed this plugin:

ionic cordova plugin remove cordova-plugin-ionic-webview

And added this to config.xml:

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

Probably a bit unsafe to allow everything but had to get it working again.
If this doesn’t work for you try to also remove the iOS platform and re-add it.

good luck~

How To Embed and Open PDF files in Ionic App on iOS

This is a solution for storing and opening pdf files inside your app for offline use.

  cordova.plugins.fileOpener2.open(
        cordova.file.applicationDirectory + 'www/img/sample.pdf',
        'application/pdf',
        {
          error: function (e) {
            console.log('Error status:'+e.status+'- Error message:'+ e.message);
          },
          success: function () {
            console.log('file opened successfully');
          }
        }
      );

Opening the pdf should be fairly simple using the cordova.plugins.fileOpener2 plugin, but I ran into a strange issue because my app name in the config.xml contained a space such as: <name>My App</name>. This caused the iOS to misread the file path. Removing this space in the app name fixed the file path on iOS.

I put the sample pdf doc in the ionic project under my images folder www/img/sample.pdf.

Good luck!