my6docs Documentation

Transcription

1 my6docs Documentation Release 0.1 Adi Vichter Jul 07, 2017

2

3 Contents 1 Guide Introduction Custom Widget Customizing the Widget Editing the Widget Wrapper (widget.html) Editing Item Templates (items.html) Editing the Widget s Style (widget.css) Reserved HTML Class Names Indices and tables 7 i

4 ii

5 CHAPTER 1 Guide Introduction This document briefly explains how to define the UI of a content-recommendation widget using HTML & CSS. Custom Widget A Custom Widget is a widget that originates in a (simplified version of a) generic widget, and whose code was edited by the application user. Currently, only the classic and infeed families support code customization by the user. To switch to code customization mode, select the Mark widget as custom option. General properties such as number of items in widget and number of paid items can also be edited. Customizing the Widget In the code customization mode, the user can edit the widget wrapper element (widget.html), the widget s item templates (items.html), and their corresponding styles (widget.css) Some of the elements and attributes are mandatory and should not be changed, others are optional Data is injected to the html via the Mustache templating engine; for example, {{data.content.image}} will inject the image s URL. Editing the Widget Wrapper (widget.html) In the widget.html file, you can edit the HTML base of the widget, which contains the frame and the basic HTML code. The following is the structure of the widget wrapper.: 1

6 my6docs Documentation, Release 0.1 <div class="my6_wrap" ><span class="my6_title">you may also like</span> <div class="my6_list" data-noscroll="true"></div> <img class="my6_logo_img" src="//d2ymkpxi1rgldj.cloudfront.net/web-clients/images/ empty_logo.png"/> </div> API Mandatory 1. class = my6_list, allows the widget to identify this element as a list (in other words, the element that contains the widget s items). It is a container for the injected items. 2. data-noscroll = true Optional 1. <img class="my6_logo_img" src= default image that will be replaced >- this is an element with a network logo; src will be replaced during runtime. 2. Title element. Editing Item Templates (items.html) The UI templates in items.html are used to display each single content recommendation received from the server. Each item is a repeatable template; each widget must have two different item templates defined, as follows: 1. default (data-template= default ), which will be used to display organic items and 2. external (data-template= external ) for paid items The following is the structure of the item template: 2 Chapter 1. Guide

7 my6docs Documentation, Release 0.1 <a class="my6_item my6_item_default" href="{{data.action.originalurl}}" onmousedown="href='javascript:void(0);'" onmouseover="href='{{data.action.originalurl}}'" data-template="default" data-href="{{data.action.url}}" data-item_id="{{id}}" data-method="{{#data.action}}{{#open_externally}}external{{/open_externally}}{{^open_ externally}}default{{/open_externally}}{{/data.action}}"> <div class="my6_item_image_wrap"> <div class="my6_item_img_bg"></div> <div class="my6_placeholder my6_scale></div> <div class="my6_item_image my6_scale" style="background-image: url('{{data. content.image}}');"></div> </div> <div class="my6_item_text"> <div class="my6_item_title">{{data.content.title}}></div> {{#data.content.alias}} <span class="my6_alias" {{data.content.alias}} </span> {{/data.content.alias}} </div> </a> Do NOT set an ID for Item elements using the HTML id attribute. API Mandatory 1. class := my6_item, allows the widget to identify this element as an Item. 2. data-template- one or more names for this item template; the name must be unique relative to other templates. Multiple names can be set using a comma separated string. items.html must contain an element with external and default data templates (the same element can be used for both templates). 3. data-method allows the core to identify the navigation method on item click. Do not change its value. 4. class = my6_placeholder, allows the widget to identify this element for item fallback image (in case the item image is not valid). The background image will be replaced in the widget s flow. 5. Mustache meta-data strings boilerplate - see the following table 1.2. Customizing the Widget 3

8 my6docs Documentation, Release 0.1 Mandatory Mustache Meta-Data Attributes Attribute Name data-href= {{data.action.url}} Description Item URL Item Internal ID data-item_id= {{id}} Redirect method specification data-method= {{#data.action}}{{#open_externally}} external{{/open_externally}}{{^open_externally}} default{{/open_externally}}{{/data.action}} Optional 1. To show the item s URL in the status bar when hovering over the item, use the item element as an <a> element, and also add the following attributes: href= {{data.action.originalurl}} onmousedown= href= javascript:void(0); onmouseover= href= {{data.action.originalurl}} 1. The following are the Mustache data strings (if any data should be rendered). Attribute Name {{data.content.title}} {{data.content.image}} {{data.content.data.content.alias}} Description The Item s Title Item Internal ID The shortened site name to display for the item Editing the Widget s Style (widget.css) The widget s style (both items.html and widget.html) can be customized in the widget.css. Mandatory Constraints Placeholder images should be placed behind the real images (using the z-index property). Reserved HTML Class Names Some UIs can be configured via the management application. This configuration capability expects the usage of certain class names for certain elements, and might override developer set properties and values, as defined in the following table. 4 Chapter 1. Guide

9 my6docs Documentation, Release 0.1 Class Name Element Description Mandatory File Name my6_title No widget.html Entire widget title my6_list my6_logo_img my6_item_title my6_placeholder List Element, Mandatory class for List Network logo image. When applying the class to an <img> element, the widget will override the image src with the network logo. Item Element Will render the backup image in this div, should be placed behind an Item s real image element. Yes No No Yes widget.html widget.html items.html items.html my6_item Mandatory class for usage inside an Item Item Element. Mandatory class for Item Yes items.html 1.2. Customizing the Widget 5

10 my6docs Documentation, Release Chapter 1. Guide

11 CHAPTER 2 Indices and tables genindex modindex search 7