metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Create an event program with the streamer component. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Streamer - Metro 4 :: Popular HTML, CSS and JS library</title> <style> body.noScroll { overflow: hidden; } </style> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Streamer</a></li> <li class="toc-entry"><a href="#_streamer_about">About</a></li> <li class="toc-entry"><a href="#_streamer_create">Create streamer</a></li> <li class="toc-entry"><a href="#_streamer_options">Options</a></li> <li class="toc-entry"><a href="#_streamer_data">Streamer data</a></li> <li class="toc-entry"><a href="#_streamer_methods">Methods</a></li> <li class="toc-entry"><a href="#_streamer_responsive">Responsive</a></li> <li class="toc-entry"><a href="#_streamer_observe">Observe</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Streamer</h1> <p class="text-leader"> Create an event program with the streamer component. Metro 4 contains css classes and plugin to create streamer component. </p>  <h3 id="_streamer_about">About</h3> <p> Streamer is a complex element for creating an event program. The component includes a special HTML structure, styles, and a javascript code to interact with this structure. </p> <div class="example mt-3 p-0 no-border"> <div id="streamer" class="streamer-expand-sm" data-role="streamer" data-source="data/streamer_data.json" data-start-from="09:00" data-slide-to-start="true" data-stream-select="true"></div> </div> <h3 id="_streamer_create">Create streamer</h3> <p> To create streamer you must execute three steps: add container with <code>data-role="streamer"</code> attribute, then define other options over <code>data-*</code> attributes and define streamer data with <code>data-source</code> or <code>data-data</code> attributes. Also you must define <code>id</code> attribute for your streamer. </p> <pre><code> <div id="streamer" data-role="streamer" data-source="data/streamer_data.json" data-start-from="09:00" data-slide-to-start="false"> </div> </code></pre> <h3 id="_streamer_options">Options</h3> <p> The streamer contains a number of options for defining behavior: </p> <table class="table cell-border table-border options-table"> <thead> <tr> <td>Option</td> <td>Data-*</td> <td>Default</td> <td>Desc</td> </tr> </thead> <tbody> <tr> <td>defaultClosedIcon</td> <td>data-default-closed-icon</td> <td></td> <td>Default icon for closed event</td> </tr> <tr> <td>defaultOpenIcon</td> <td>data-default-open-icon</td> <td></td> <td>Default icon for open event</td> </tr> <tr> <td>changeUri</td> <td>data-change-uri</td> <td>true</td> <td>If true, browser url will be changed when event selected</td> </tr> <tr> <td>encodeLink</td> <td>data-encode-link</td> <td>true</td> <td>If true, streamer link will be encoded with Base64</td> </tr> <tr> <td>closed</td> <td>data-closed</td> <td>false</td> <td>Streamer is closed. Event are not can be selected</td> </tr> <tr> <td>startFrom</td> <td>data-start-from</td> <td>null</td> <td>Streamer can be slided to this time pint after create</td> </tr> <tr> <td>slideToStart</td> <td>data-slide-to-start</td> <td>false</td> <td>If true, Streamer will be slided to time pint defined in startFrom options after create</td> </tr> <tr> <td>startSlideSleep</td> <td>data-start-slide-sleep</td> <td>1000</td> <td>Timeout before sliding to start time point</td> </tr> <tr> <td>source</td> <td>data-source</td> <td></td> <td>Link to stream data</td> </tr> <tr> <td>data</td> <td>data-data</td> <td></td> <td>Object with stream data</td> </tr> <tr> <td>eventClick</td> <td>data-event-click</td> <td>select</td> <td>Behavior when clicking on a event. This value can be <code>select</code> or <code>click</code></td> </tr> <tr> <td>streamSelect</td> <td>data-stream-select</td> <td>false</td> <td>If true, user can be select one stream on click them and disable others.</td> </tr> <tr> <td>onStreamerCreate</td> <td>data-on-streamer-create</td> <td>Metro.noop</td> <td>Callback</td> </tr> <tr> <td>onStreamClick</td> <td>data-on-stream-click</td> <td>Metro.noop</td> <td>Callback</td> </tr> <tr> <td>onStreamSelect</td> <td>data-on-stream-select</td> <td>Metro.noop</td> <td>Callback</td> </tr> <tr> <td>onEventClick</td> <td>data-on-event-click</td> <td>Metro.noop</td> <td>Callback</td> </tr> <tr> <td>onEventSelect</td> <td>data-on-event-select</td> <td>Metro.noop</td> <td>Callback</td> </tr> </tbody> </table>  <h3 id="_streamer_data">Streamer data</h3> <p> An important parameter of the streamer is the parameter that determines the data for the streamer. Data for the <code>streamer</code> can be determined in two ways: <code>data-source=*</code> attribute, <code>data-data=*</code> attribute. </p> <div class="img-container thumbnail mb-2"> <img src="images/streamer.jpg"> </div> <p> Data for a streamer is an object of a certain format. <a href="data/streamer_data.json">This is a link to demo data</a>. This object contains four main section: </p> <ul> <li><strong>actions</strong> - user defined actions</li> <li><strong>timeline</strong> - timeline definition</li> <li><strong>streams</strong> - streams definition</li> <li><strong>global</strong> - additions events</li> </ul> <pre><code> { actions: {...} timeline: {...} streams: {...} global: {...} } </code></pre> <h4 id="_streamer_data_actions">Actions</h4> <p> User define action showing in top left corner of streamer and hide when streamer collapsed (default). For details see <a href="#_streamer_responsive">streamer responsive feature</a>. Each action is described by three parameters: <code>html</code> - html value for action, <code>cls</code> - additional classes for action, <code>onclick</code> - click event for action (<a href="events.html">rules for defining events in Metro 4</a>). </p> <pre><code> { actions: [ { html: "<span class='mif-print'></span>", cls: "fg-red", onclick: "alert('Printed!!!')" } ] } </code></pre> <h4 id="_streamer_data_timeline">Timeline</h4> <p> To define <code>timeline</code> you can use same name section. This section contains three parameters: <code>start</code> - begin time, <code>stop</code> - end time, <code>step</code> - step in minutes. </p> <pre><code> { timeline: { start: "09:00", stop: "18:00", step: 20 } } </code></pre> <h4 id="_streamer_data_streams">Streams</h4> <p> Streams are defined in <code>streams</code> section. Each <code>stream</code> is described with next parameters: <code>title</code>, <code>secondary</code>, <code>icon</code>, <code>cls</code>, <code>data</code>, <code>events</code>. </p> <pre><code> { streams: [ { title: "Internet business", secondary: "room 1", icon: "<span class='mif-link stream-icon'></span>", cls: "bg-teal fg-white", data: "any data, stored to stream object", events: [...] } ] } </code></pre> <h5 id="_streamer_data_events">Events</h5> <p> Each stream can be contains events. Events is described with next parameters: <code>icon</code>, <code>time</code>, <code>title</code>, <code>subtitle</code>, <code>desc</code>, <code>size</code>, <code>selected</code>, <code>closed</code>, <code>closedIcon</code>, <code>openIcon</code>, <code>clsClosedIcon</code>, <code>clsOpenIcon</code>, <code>data</code>, <code>cls</code>, <code>target</code>. </p> <pre><code> { events: [ { icon: "images/olshanskysmall.jpg", time: "09:00", title: "Alexandr Olshansky", subtitle: "Internet Invest Group", desc: "Information revolution - the way to new middle ages", size: 1, selected: 0, closed: true, data: {}, closedIcon: "<span class='mif-video-camera'></span>", openIcon: "<span class='mif-apps'></span>", target: "https://2017.iforum.ua/reporter/?id=99#video-365", cls: "" } ] } </code></pre> <table class="table cell-border table-border options-table"> <thead> <tr> <td>Param</td> <td>Desc</td> </tr> </thead> <tbody> <tr> <td>icon</td> <td>html tag for event icon</td> </tr> <tr> <td>time</td> <td>Event time point</td> </tr> <tr> <td>title</td> <td>Event title</td> </tr> <tr> <td>subtitle</td> <td>Event subtitle</td> </tr> <tr> <td>desc</td> <td>Event short description</td> </tr> <tr> <td>size</td> <td>Event size. Can be from 1 to 10</td> </tr> <tr> <td>shift</td> <td>Event shift (shift the event to the right of the previous one). Can be from 1 to 10</td> </tr> <tr> <td>selected</td> <td>Event mark as selected. Can be 1 or 0</td> </tr> <tr> <td>closed</td> <td>Event mark as close. Can be 1 or 0</td> </tr> <tr> <td>closedIcon</td> <td>If event is closed, this icon showing on top right corner</td> </tr> <tr> <td>openIcon</td> <td>If event is open, this icon showing on top right corner</td> </tr> <tr> <td>target</td> <td>If event is closed, this param contains target. When user click on closed event browser switched to this target.</td> </tr> <tr> <td>data</td> <td>Any data, can be stored to event</td> </tr> <tr> <td>cls</td> <td>Additional class for event</td> </tr> <tr> <td>clsClosedIcon</td> <td>Additional class for closed event icon</td> </tr> <tr> <td>clsOpenIcon</td> <td>Additional class for open event icon</td> </tr> </tbody> </table> <h4 id="_streamer_data_global">Additions Events</h4> <p> Before and after main events you can define additional global events. To define global event use section <code>global</code>. Each event in global stream must be described with six parameters: <code>time</code>, <code>size</code>, <code>cls</code>, <code>title</code>, <code>subtitle</code>, <code>html</code>. </p> <pre><code> { global: { before: [ { time: "08:40", size: 1, cls: 0, title: "Registration", subtitle: "08:40 - 09:00", html: "Any valid html code", } ], after: [ { time: "12:00", size: 2, cls: "p-2", title: "Closing ceremony" }, { time: "12:40", size: 2, cls: "p-2", title: "Banquet" } ] } } </code></pre> <h3 id="_streamer_methods">Methods</h3> <p> Streamer contains the numbers of usefulness methods: </p> <ul> <li><code>getLink()</code> - return link to same streamer with pre-selected events</li> <li><code>getTimes()</code> - return array with time points</li> <li><code>getEvents(type, include_global)</code> - return array with events. Type can be: selected, non-selected or all (default)</li> <li><code>slideTo(time)</code> - slide streamer to required time, time must be string in format HH:MI</li> <li><code>enableStream(stream)</code> - enable stream after it can be disabled</li> <li><code>disableStream(stream)</code> - disable stream</li> <li><code>toggleStream(stream)</code> - toggle stream state</li> <li><code>source(src)</code> - change streamer source and redraw</li> <li><code>data(src)</code> - change streamer data and redraw</li> <li><code>source()</code> - get streamer source</li> <li><code>data()</code> - get streamer data</li> <li><code>getStreamerData()</code> - get streamer internal data</li> </ul>  <h3 id="_streamer_responsive">Responsive</h3> <p> On default, streamer showing in collapsed mode: </p> <div class="example no-border p-0"> <div data-role="streamer" data-source="data/streamer_data.json" data-start-from="09:00"></div> </div> <pre><code> <div data-role="streamer" data-source="data/streamer_data3.json" data-start-from="09:00"></div> </code></pre> <div class="example no-border p-0"> <div class="streamer-expand-sm" data-role="streamer" data-source="data/streamer_data.json" data-start-from="09:00"></div> </div> <pre><code> <div class="streamer-expand-sm" data-role="streamer" data-source="data/streamer_data3.json" data-start-from="09:00"></div> </code></pre> <p> To expand streams markers, add one of classes: <code>.streamer-expand</code>, <code>.streamer-expand-sm</code>, <code>.streamer-expand-md</code>, <code>.streamer-expand-lg</code>, <code>.streamer-expand-xl</code>, <code>.streamer-expand-xxl</code>. See <a href="media.html">media breakpoints</a>. </p> <h3 id="_streamer_observe">Observe</h3> <p> You can change attributes <code>data-source</code>, <code>data-data</code>, <code>data-stream-select</code> at runtime and streamer will be updated. </p> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>