10 min read

(For more resources related to this topic, see here.)

Now that we’ve dealt with the device events, let’s get to the real meat of the project: let’s add the sharing plugin and see how to use it.

Getting ready

Before continuing, be sure to add the plugin to your project:

cordova plugin add https ://github.com/leecrossley/cordova-plugin
-social-message.git

Getting on with it

This particular plugin is one of many socialnetwork plugins. Each one has its benefits and each one has its problems, and the available plugins are changing rapidly. This particular plugin is very easy to use, and supports a reasonable amount of social networks. On iOS, Facebook, Twitter, Mail, and Flickr are supported. On Android, any installed app that registers with the intent to share is supported.

The full documentation is available at https://github.com/leecrossley/cordova-plugin-social-message at the time of writing this. It is easy to follow if you need to know more than what we cover here.

To show a sharing sheet (the appearance varies based on platform and operation system), all we have to do is this:

window.socialshare.send ( message );

message is an object that contains any of the following properties:

  • text: This is the main content of the message.
  • subject: This is the subject of the message. This is only applicable while sending e-mails; most other social networks will ignore this value.
  • url: This is a link to attach to the message.
  • image: This is an absolute path to the image in order to attach it to the message. It must begin with file:/// and the path should be properly escaped (that is, spaces should become %20, and so on).
  • activityTypes (only for iOS): This supports activities on various social networks. Valid values are: PostToFacebook, PostToTwitter, PostToWeibo, Message, Mail, Print, CopyToPasteboard, AssignToContact, and SaveToCameraRoll.

In order to create a simple message to share, we can use the following code:

var message = {
    text: "something to send"
}
window.socialshare.send ( message );

To add an image, we can go a step further, shown as follows:

var message = {
    text: "the caption",
    image: "file://var/mobile/…/image.png"
}
window.socialshare.send ( message );

Once this method is called, the sharing sheet will appear. On iOS 7, you’ll see something like the following screenshot:

On Android, you will see something like the following screenshot:

What did we do?

In this section, we installed the sharing plugin and we learned how to use it. In the next sections, we’ll cover the modifications required to use this plugin.

Modifying the text note edit view

We’ve dispatched most of the typical sections in this project—there’s not really any user interface to design, nor are there any changes to the actual note models. All we need to do is modify the HTML template a little to include a share button and add the code to use the plugin.

Getting on with it

First, let’s alter the template in www/html/textNoteEditView.html. I’ve highlighted the changes:

<html>
  <body>
    <div class="ui-navigation-bar">
      <div class="ui-title"
         contenteditable="true">%NOTE_NAME%</div>
      <div class="ui-bar-button-group ui-align-left">
        <div class="ui-bar-button ui-tint-color ui-back-button">%BACK%</div>
      </div>
      <div class="ui-bar-button-group ui-align-right">
        <div class="ui-bar-button ui-destructive-
           color">%DELETE_NOTE%</div>
      </div>
    </div>
    <div class="ui-scroll-container ui-avoid-navigation-bar ui-
       avoid-tool-bar">
      <textarea class="ui-text-box" >%NOTE_CONTENTS%</textarea>
    </div>
<div class="ui-tool-bar">
<div class="ui-bar-button-group ui-align-left">
</div>
<div class="ui-bar-button-group ui-align-center">
     </div>         
<div class="ui-bar-button-group ui-align-right">
        <div class="ui-bar-button ui-background-tint-color ui-
 glyph ui-glyph-share share-button"></div>
</div>
    </div>
</body>
</html>

Now, let’s make the modifications to the view in www/js/app/views/textNoteEditView.js. First, we need to add an internal property that references the share button:

self._shareButton = null;

Next, we need to add code to renderToElement so that we can add an event handler to the share button. We’ll do a little bit of checking here to see if we’ve found the icon, because we don’t support sharing of videos and sounds and we don’t include that asset in those views. If we didn’t have the null check, those views would fail to work. Consider the following code snippet:

self.renderToElement = function ()
{
  …
  self._shareButton = self.element.querySelector ( ".share-button"     );
  if (self._shareButton !== null) {
    Hammer ( self._shareButton ).on("tap", self.shareNote);
  }
  …
}

Finally, we need to add the method that actually shares the note. Note that we save the note before we share it, since that’s how the data in the DOM gets transmitted to the note model. Consider the following code snippet:

self.shareNote = function () {
  self.saveNote();
  var message = {
    subject: self._note.name,
    text: self._note.textContents
  };
  window.socialmessage.send ( message );
}

What did we do?

First, we added a toolbar to the view that looks like the following screenshot—note the new sharing icon:

Then, we added the code that shares the note and attaches that code to the Share button.

Here’s an example of us sending a tweet from a note on iOS:

What else do I need to know?

Don’t forget that social networks often have size limits. For example, Twitter only supports 140 characters, and so if you send a note using Twitter, it needs to be a very short note. We could, on iOS, prevent Twitter from being permitted, but there’s no way to prevent this on Android. Even then, there’s no real reason not to prevent Twitter from being an option. The user just needs to be familiar enough with the social network to know that they’ll have to edit the content before posting it.

Also, don’t forget that the subject of a message only applies to mail; most other social networks will ignore it. If something is critical, be sure to include it in the text of the message, and not the subject only.

Modifying the image note edit view

The image note edit view presents an additional difficulty: we can’t put the Share button in a toolbar. This is because doing so will cause positioning difficulties with TEXTAREA and the toolbar when the soft keyboard is visible. Instead, we’ll put it in the lower-right corner of the image. This is done by using the same technique we used to outline the camera button.

Getting on with it

Let’s edit the template in www/html/imageNoteEditView.html; again, I’ve highlighted the changes:

<html>
  <body>
    <div class="ui-navigation-bar">
      <div class="ui-title"
         contenteditable="true">%NOTE_NAME%</div>
      <div class="ui-bar-button-group ui-align-left">
        <div class="ui-bar-button ui-tint-color ui-back-
           button">%BACK%</div>
      </div>
      <div class="ui-bar-button-group ui-align-right">
        <div class="ui-bar-button ui-destructive-
           color">%DELETE_NOTE%</div>
      </div>
    </div>
    <div class="ui-scroll-container ui-avoid-navigation-bar">
      <div class="image-container">
        <div class="ui-glyph ui-background-tint-color ui-glyphcamera-
         outline"></div>       
        <div class="ui-glyph ui-background-tint-color ui-glyph-
           camera outline"></div>
        <div class="ui-glyph ui-background-tint-color ui-glyph-
           camera non-outline"></div>
        <div class="ui-glyph ui-background-tint-color ui-glyph-
           share outline"></div>
        <div class="ui-glyph ui-background-tint-color ui-glyph-
           share non-outline share-button"></div>
      </div>
      <textarea class="ui-text-box"
         onblur="this.classList.remove('editing');"
         onfocus="this.classList.add('editing');
         ">%NOTE_CONTENTS%</textarea>
    </div>
  </body>
</html>

Because sharing an image requires a little additional code, we need to override shareNote (which we inherit from the prior task) in www/js/app/views/imageNoteEditView.js:

self.shareNote = function () {
  var fm = noteStorageSingleton.fileManager;
  var nativePath = fm.getNativeURL ( self._note.mediaContents );
  self.saveNote();
  var message = {
    subject: self._note.name,
    text: self._note.textContents
  };
  if (self._note.unitValue > 0) {
    message.image = nativePath;
  }
  window.socialmessage.send ( message );
}

Finally, we need to add the following styles to www/css/style.css:

div.ui-glyph.ui-background-tint-color.ui-glyph-share.outline,
div.ui-glyph.ui-background-tint-color.ui-glyph-share.non-outline
{
  left:inherit;
  width:50px;
  top: inherit;
  height:50px;
}
{
  -webkit-mask-position:15px 16px;
  mask-position:15px 16px;
}
div.ui-glyph.ui-background-tint-color.ui-glyph-share.non-outline
{
  -webkit-mask-position:15px 15px;
  mask-position:15px 15px;
}

What did we do?

Like the previous task, we first modified the template to add the share icon. Then, we added the shareNote code to the view (note that we don’t have to add anything to find the button, because we inherit it from the Text Note Edit View). Finally, we modify the style sheet to reposition the Share button appropriately so that it looks like the following screenshot:

What else do I need to know?

The image needs to be a valid image, or the plugin may crash. This is why we check for the value of unitValue in shareNote to ensure that it is large enough to attach to the message. If not, we only share the text.

Game Over… Wrapping it up

And that’s it! You’ve learned how to respond to device events, and you’ve also added sharing to text and image notes by using a third-party plugin.

Can you take the HEAT? The Hotshot Challenge

There are several ways to improve the project. Why don’t you try a few?

  • Implement the ability to save the note when the app receives a pause event, and then restore the note when the app is resumed.
  • Remember which note is visible when the app is paused, and restore it when the app is resumed. (Hint: localStorage may come in handy.)
  • Add video or audio sharing. You’ll probably have to alter the sharing plugin or find another (or an additional) plugin. You’ll probably also need to upload the data to an external server so that it can be linked via the social network. For example, it’s often customary to link to a video on Twitter by using a link shortener. The File Transfer plugin might come in handy for this challenge (https://github.com/apache/cordova-plugin-file-transfer/blob/dev/doc/index.md).

Summary

This article introduced you to a third-party plugin that provides access to e-mail and various social networks.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here