Ionic V1: Show form accessory bar conditionally on iOS

By | Uncategorized | No Comments

With WKWebView having form accessory bar has problems with keyboard. However, for select dropdown it is essential to have that Done bar. The Done helps make the selection in iOS otherwise you need to tap on the select field itself that initiated the rolling box. Not many people knows about it. Here’s how you conditionally show form accessory bar only for select.

1
2
3
4
5
6
7
8
9
10
11
            if (ionic.Platform.isIOS()) {

                angular.element('body').on('touchstart focus', 'select', function (e) {
                    Keyboard.hideFormAccessoryBar(false);
                });

                angular.element('body').on('blur', 'select', function (e) {
                    Keyboard.hideFormAccessoryBar(true);
                });

            }

Ionic V1 Cursor Lost

By | Uncategorized | No Comments

Sometimes span inside label takes focus along with input. Sometimes first the input takes focus then it moves to span. This transition removes the focus from the input but the keyboard still stays open. What you type in won’t register.

Removing span resolves the issue.

Ionic V1 Keyboard Close Leaves Content Up

By | Ionic | No Comments

I had a main chat area in center and a input box at bottom for sending message.

Following code did the trick for me.

1
2
3
4
5
6
7
8
9
// This prevents the issue of the unwanted space left below the messages after the keyboard is closed.
                $timeout(function () {
                    $ionicScrollDelegate.scrollBottom(false);
                    // safety net
                    $timeout(function () {
                        // no animation since this is only a safety net
                        $ionicScrollDelegate.scrollBottom(false);
                    }, 350);
                }, 350);

This was called on blur and on focus of the input and when the message was sent.

How to share on Facebook with JS SDK and Vue?

By | Facebook

Facebook share offers different SDK’s to perform the share. JavaScript SDK, PHP SDK, Android SDK, iOS SDK etc.

We’ll be looking into the JS SDK

The project in which I wanted to integrate this Facebook share was based on Vue. Following are the steps, I followed to complete this feature.

Looking for an existing plugin: Vue-social-sharing

Initially I looked for an existing plugin to do the job and I found a really nice one here. It does the job in a nice manner. However, In my project there were certain actions I needed to perform if the facebook share was performed and there was no clear indication whether the share was actually performed or not. The closest information this plugin gave was when the facebook share popup was closed. Not good enough.

If all you need is facebook share and you do not need to perform any actions based on whether the share was performed or not. The plugin should be really a good fit.

Integrating FB Share with JS SDK

Facebook Documentation for JS SDK

Loading the SDK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
methods: {

    initializeFacebook()
    {

        window.fbAsyncInit = function () {
            FB.init({
                appId: '*******',
                autoLogAppEvents: true,
                xfbml: true,
                version: 'v3.3'
            });
        };

// Since vue doesn't allow placing the script tag inside template we will not use the following script tag but an alternative way to do the same.
        /* <script async defer src="https://connect.facebook.net/en_US/sdk.js"> */

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    }
}

The above code loads the SDK for us. I created a method called initializeFacebook and invoked it inside the mounted block.

Click to Share

Now that we have loaded the SDK, we can proceed with the share. During development you might be sharing with a virtual environment. Facebook expects you to input this domain in App’s Domains. Not doing it will end up with an error.


We are ready to perform share now. Let’s add one more method: facebookShare.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
methods: {
    facebookShare()
    {

        let self = this;

        FB.ui(
            {
                method: 'share',
                href: self.issueUrl, // replace with your url
            },
            // callback
            function (response) {
                if (response && !response.error_message) {
                    alert('Posting completed.');
                } else {
                    alert('Error while posting.');
                }
            }
        );

    }
}

We can call this function on the click of the share button.

Voila! Now we know whether the user did share our post or not.

For local development share, facebook can’t read our meta tags since it is our virtual domain and we should not expect a proper share content on local development environment. However, once you put this code on your production server, a domain that is accessible to everyone and facebook, it should work just fine.

If this guide helped you in anyway, please consider dropping a comment, it will mean a lot to me.

PHPDocumentor

By | Uncategorized

Download the PHAR from their website. This is the easiest method to start with and works perfectly.


1
php ~/phpDocumentor.phar -d . -t docs

I found an excellent configuration file that you just need to place and it will make life easier.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
&lt;?xml version="1.0" encoding="UTF-8" ?>
&lt;phpdoc>
    &lt;title>App Plugins Documentations&lt;/title>
    &lt;parser>
        &lt;target>reference/docs&lt;/target>
    &lt;/parser>
    &lt;transformer>
        &lt;target>reference/docs&lt;/target>
    &lt;/transformer>
    &lt;files>
        &lt;directory>.&lt;/directory> &lt;!-- Scan and parse all the php files except those found in the paths below -->
        &lt;ignore>assets/*&lt;/ignore>
        &lt;ignore>includes/gm-virtual-pages/*&lt;/ignore>
        &lt;ignore>includes/app_virtual_pages/*&lt;/ignore>
        &lt;ignore>includes/third-party/*&lt;/ignore>
        &lt;ignore>vendor/*&lt;/ignore>
        &lt;ignore>reference/docs/*&lt;/ignore>
        &lt;ignore>storage/*&lt;/ignore>
        &lt;ignore>views/*&lt;/ignore>
        &lt;ignore>index.php&lt;/ignore> &lt;!-- Ignore all the index.php files -->
    &lt;/files>
&lt;/phpdoc>

Ignoring vendor directory should be the first step to start with.