Single Issue Content

This page contains information about Single Issue Content in TypeLoft 2.

Multiple Issue Contents Rendering

This section contains information about features in the Apps for rendering Issue Contents (Apps Version 5 & below) with multiple Pages rendering. Currently in the Apps has features listed below inside the Issue Reader :

• Load Issue Page files

• Page Details

• Orientation Handler (general Issue, specific page & specific device)

• Load Indexview files

• Analytics Reading Pages

• Book Status (last viewed page, last scrolling)

• Bookmark

• Search Content (TypeLoft2)

• Highlight/Annotation Content (TypeLoft2)

• Share

• Note & Remote Sync

• Interactive Issue content (play video, audio, etc)

• Handlers click Issue Content (MagLoft protocol, link click, etc)

• Navigation Between Issue

• Dual Spread (PDF)

• Tutorial Overlay

• Top Notch margin (iOS)

• Stop All Media when leave page/apps

• Hidden Page Feature (Page that doesn't show in the list of pages)

• Offline Mode (add style offline)

• WebView iframe auto-login (iframe contains readers data for auto login)

• WebView Zoom feature (enable + disable zoom & max, min zoom)

• Token Parser Feature (Page Contain Reader Custom Data)

Single Issue Content Rendering

This section contains information about new feature in the TypeLoft2 Single Issue Content. In the TypeLoft2 currently it has file inside the Issue directory which is contains all Pages in the Issue, The file name is Index.html . Currently in the Apps (Version 5 & below) doesn't use it yet, we'll start using this feature & update the Apps to support this feature. There are some requirements that must be support first in the TypeLoft2 Single Issue Content before we can fully implement & supported in the Apps.

Manifest File

In the TypeLoft2 Issue will contains Manifest File (manifest.json) that indicating this Issue support Single Issue Content. Manifest File contains information about Issue Contents, Settings and others information related with the Issue. Here is example Manifest File content :

{
  "source": "typeloft2",
  "id": 24476,
  "title": "TypeLoft 2.0 Demo",
  "publishDate": "2019-05-27",
  "author": { "name": "Nick Martin", "email": "[email protected]", "url": ""},
  "settings": {
        "orientation": { "phone": "both", "tablet": "both" },
        "maxZoomLevel": 1.0,
        "backgroundColor": "#FFFFFF",
        "initialPageIndex": 0,
        "notchPadding": true,
        "baseUrl": "https://www.magloft.com",
        "articlePath": "article/(:issueId/):articleId",
        "issuePath": "issue/:issueId",
        "urlMode": "message",
        "assetMode": "remote"
    },
  "features": {
        "highlights": { "colors": [{ "label": "red", "color": "#FF0000" }]},
        "navigator": { "height": 240, "showButton": false },
        "dualspread": { "applyToCover": false },
        "search": {},
        "share": {},
        "notes": {},
        "analytics": {},
        "bookmark": {},
        "tutorial": {}
    }
  "assets": {
    "e4457b067ed1d70e2e2826c8030a35fd": {
      "url": "https://cdn.magloft.com/reader/fonts/literata.css",
      "contentType": "text/css",
      "extension": "css"
    }
  },
  "pages": [
    {
      "id": 16036,
      "title": "Cover",
      "filename": "16036.html",
      "visible": true,
      "settings": {
        "orientation": { "phone": "portrait", "tablet": "landscape" },
        "maxZoomLevel": 2.0
      }
    }
  ]
}

Javascript Interface

TypeLoft2 Issue required Javascript Interface for comunicating between Issue & Native Apps. Here is the list of Javascript Interface in the TypeLoft2 : 1. Javascript Initialize : App triggers initialize event on

Sending initialize configuration settings & state from Apps to Issue:

MagLoftApi.emit('initialize', {
  "settings": {},
  "features": {},
  "state": { 
    "user": { "email": "[email protected]", "token": "19021989", "name": "Febby RG", "deviceId": "9051579C-9E51-4D7A-AAAF-C28A71B4F9B9", "data": {} } 
  }
})

2. Javascript Event Listener : Trigger custom Events from Issue to Apps while reading the Issue Pages. The Events listed below :

Event Name	Event	Description
initialize	-	Triggered after the initialization process completed
pageChange	{ pageId:number index:number previousPageId?:number previousIndex?:number }	Triggered when a page transition occurs
eventTrack	{ eventName: string, segmentation: any }	Triggered

3. * > JS: Javascript Functions: Provide functions in the Issue for specific action that will be called from Apps or within the issue (e.g. typeloft content)

Function Name	Arguments	Description
initialize	settings:any features:any state:any	The App instructs the JS context to initialize the reader with given parameters (settings, features and state). It expects an initial pageChange event (without previous data) to be triggered once the initial rendering is finished.
changePage	pageId?:number index?:number	Function for change to specific page inside the Issue. Either index or pageId is required.
getPageInfo	pageId?:number index?:number	Function that returns Page information inside the Issue. Return params : pageId, position, scrollPosition & duration.
stopMedia	-	Function for stop all Media Players inside the Page in the Issue.
trackEvent	eventName:string segmentation:any	Function for custom Analytics tracking.
highlightText	color: string	Function for highlighting currently selected text
loadHighlights	serializedData: string	Function for loading all highlight in current page

4. App Event Listeners:

The App SDK (iOS App, Android App, Web App, Web URL) may receive the following events from the JS context, by invoking window.MagLoftApp.emit('eventName', event)

Event Name	Payload	Description
pageChange	pageId:number index:number previousPageId?:number previousIndex?:number previousDuration?:number	Triggered when a page transition occurs
eventTrack	eventName:string segmentation:any	Triggered when the JS context requests a custom event to be tracked.
initialize	pageId:number index:number	Event triggered by the JS context on the reader is fully loaded and rendered.
pageChange	pageId:number index:number previousPageId?:number previousIndex?:number previousDuration?:number
navigatorToggle	open: boolean	Triggered when the navigator state changes
dualspreadToggle	open: boolean	Triggered when the dualspread state changes
share	type: 'article'|'issue', id: number	Triggered when sharing method invoked
textHighlight	serializedData: string highlights: { color: string label: string }[]	Triggered when calling the highlightText method

Use Case

URL handler

MagLoftApi.initialize({
  settings: {
    urlMode: 'message',
  }
})

The urlMode settings have 2 possible value:

1. open: When a reader tap on a link, it will be handled by JS function

2. message: Wen a reader tap on a link, the SDK will send a message to the native app with this structure

interface UrlOpenMessageEvent {
  type: 'event',
  name: 'urlOpen'
  payload: {
    url: string
    reference?: {
      type: 'article' | 'issue'
      id: number
    }
  }
}

Asset loading

MagLoftApi.initialize({
  settings: {
    assetMode: 'remote',
  }
})

The assetMode settings have 2 possible value:

1. remote: All asset will be resolved by accessing the remote URL

2. local: All asset will be resolved by accessing a relative path

User State

MagLoftApi.initialize({
  state: {
    user: { 
      "email": "[email protected]",
      "token": "19021989",
      "name": "Febby RG",
      "deviceId": "9051579C-9E51-4D7A-AAAF-C28A71B4F9B9",
      "data": {} 
    }
  }
})

Navigator

This is used to enable the navigator feature when initializing the Reader SDK. Currently we support 2 options here:

1. showButton: A boolean value indicating should we show a floating toggle button for Navigator.

2. height: A number in pixel for the navigator height.

MagLoftApi.initialize({
  features: {
    navigator: {
      showButton: false,
      height: 240
    }
  }
})

After the Reader SDK is initialized, you can toggle the navigator by calling the toggleNavigator()method.

The toggleNavigator() method takes 1 optional boolean argument. If it's not provided then the method will simply toggle the navigator on & off. If it's called with true as an argument then it will open the Navigator, if it's called with false then it will close the Navigator.

MagloftApi.toggleNavigator() // Toggle
MagloftApi.toggleNavigator(true) // Force On
MagloftApi.toggleNavigator(false) // Force Off

You can also listen to the navigatorToggle event to check the navigator current state

MagLoftApi.on('navigatorToggle', ({ open }) => {
  // Keep Toolbar in sync with navigator state
})

Stop Media

The Reader SDK provides a method to stop all playing media by calling the stopMedia() method

MagLoftApi.stopMedia()

Highlight

When the user wants to use the highlight feature ​

// Enable the highlights feature on initialize
MagLoftApi.initialize({
  features: {
    highlights: {}
  }
})

After the initialization process is done, you have 2 methods available for you to use.

1. loadHighlights(): This method is used to apply existing highlights to the current page. It's taking the serializedData string as an argument.

2. highlightText(): This method is used to apply a highlight to the currently selected text. It takes the color text that's already set in the features configuration as an argument

When calling the higlightText() method, it will return an object that contains serializedData and the last applied color.

export interface HighlightResponse {
  serializedData: string
  highlights: {
    text: string
    color: string
  }[]
}
​
// After initialization done
MagLoftApi.on('initialize', () => {
  MagloftApi.loadHighlights(serializedData)
  const response: HighlightResponse = MagloftApi.highlightText('red')
  const response: HighlightResponse = MagloftApi.highlightText('clear')
})

Toggle Dual Spread

Enabling the Dual Spread feature

MagLoftApi.initialize({
  features: {
    dualspread: { showButton: true }
  }
})

After the Reader SDK is initialized, you can toggle the navigator by calling the toggleDualspread()method.

The toggleDualspread() method takes 1 optional boolean argument. If it's not provided then the method will simply toggle the navigator on & off. If it's called with true as an argument then it will open the Navigator, if it's called with false then it will close the Navigator.

MagloftApi.toggleDualspread() // Toggle
MagloftApi.toggleNavigator(true) // Force On
MagloftApi.toggleNavigator(false) // Force Off

You can also listen to the dualspreadToggle event to check the navigator current state

Share

For sharing content, you need to enable the feature and also set some required settings

MagLoftApi.initialize({
  settings: {
    baseUrl: "https://www.magloft.com",
    articlePath: "article/:articleId",
    issuePath: "issue/:issueId"
  },
  features: {
      share: {}
  }
})

After that you can call the share method and passing the type of share you want to use, either article or issue, and optionally an id if you want to share a specific content. The default behaviour is sharing the currently active content.

MagLoftApi.on('initialize', () => {
  MagLoftApi.share('article') // Share currently active article
  MagLoftApi.share('article', 100) // Share specific article
  MagLoftApi.share('issue') // Share currently active issue
  MagLoftApi.share('issue', 100) // Share specific issue
})

Calling the share method will also trigger an event that sends the content type & id in the payload.

​interface ShareMessageEvent {
  type: 'event',
  name: 'share'
  payload: {
    type: 'article' | 'issue'
    id: number,
    title: string,
    url: 'https://www.magloft.com',
    defaultUrl: `${url}/${type}/${id}`
  }
}
​
MagloftApi.on('share', ({ type, id }) => { ... })