508 lines
33 KiB
HTML
508 lines
33 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<title>deliteful/StarRating - Control-Freak</title>
|
|
<meta name="description" content="IDE for Automation & IoT" />
|
|
<meta name="author" content="Justin Walsh">
|
|
<meta charset="UTF-8">
|
|
<link rel="icon" href="../../themes/mytheme/img/favicon-blue.png" type="image/x-icon">
|
|
<!-- Mobile -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<script src="../..//ext/easyXDM.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var pixlrEditor = null;
|
|
var xdmSocket = null;
|
|
var editorImage=null;
|
|
var imageUrl=null;
|
|
var editorArgs=null;
|
|
var saveUrl=null;
|
|
var title='';
|
|
var format = 'jpg';
|
|
|
|
function urlDecode (string, overwrite) {
|
|
if (!string || !string.length) {
|
|
return{}
|
|
}
|
|
var obj = {};
|
|
var pairs = string.split("&");
|
|
var pair, name, value;
|
|
for (var i = 0, len = pairs.length; i < len; i++) {
|
|
pair = pairs[i].split("=");
|
|
name = decodeURIComponent(pair[0]);
|
|
value = decodeURIComponent(pair[1]);
|
|
if(value!=null && value==='true'){
|
|
value=true;
|
|
}else if(value==='false'){
|
|
value=false;
|
|
}
|
|
if (overwrite !== true) {
|
|
if (typeof obj[name] == "undefined") {
|
|
obj[name] = value
|
|
} else {
|
|
if (typeof obj[name] == "string") {
|
|
obj[name] = [obj[name]];
|
|
obj[name].push(value)
|
|
} else {
|
|
obj[name].push(value)
|
|
}
|
|
}
|
|
} else {
|
|
obj[name] = value
|
|
}
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
|
|
function onMessage(message){
|
|
|
|
var result = JSON.parse(message);
|
|
|
|
console.log('message :',message);
|
|
if(result && result.command && result.command==='edit')
|
|
{
|
|
if(editorImage==null){
|
|
img_create(result.url,'','');
|
|
}
|
|
imageUrl = result.url;
|
|
saveUrl = result.saveUrl;
|
|
title = result.title;
|
|
format = result.format;
|
|
}
|
|
}
|
|
|
|
function sendMessage(message)
|
|
{
|
|
xdmSocket.postMessage(JSON.stringify(message));
|
|
}
|
|
|
|
function init (){
|
|
|
|
return;
|
|
var inUrl = '' + window.location.href;
|
|
|
|
console.log('init url ' + inUrl);
|
|
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
|
|
if(!inUrl){
|
|
console.error('invalid');
|
|
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
|
|
}
|
|
|
|
var parameterString = '' ;
|
|
|
|
function base64_decode (encodedData) {
|
|
|
|
if (typeof window !== 'undefined') {
|
|
if (typeof window.atob !== 'undefined') {
|
|
return decodeURIComponent(escape(window.atob(encodedData)))
|
|
}
|
|
} else {
|
|
return new Buffer(encodedData, 'base64').toString('utf-8')
|
|
}
|
|
|
|
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
|
|
var o1
|
|
var o2
|
|
var o3
|
|
var h1
|
|
var h2
|
|
var h3
|
|
var h4
|
|
var bits
|
|
var i = 0
|
|
var ac = 0
|
|
var dec = ''
|
|
var tmpArr = []
|
|
|
|
if (!encodedData) {
|
|
return encodedData
|
|
}
|
|
|
|
encodedData += ''
|
|
|
|
do {
|
|
// unpack four hexets into three octets using index points in b64
|
|
h1 = b64.indexOf(encodedData.charAt(i++))
|
|
h2 = b64.indexOf(encodedData.charAt(i++))
|
|
h3 = b64.indexOf(encodedData.charAt(i++))
|
|
h4 = b64.indexOf(encodedData.charAt(i++))
|
|
|
|
bits = h1 << 18 | h2 << 12 | h3 << 6 | h4
|
|
|
|
o1 = bits >> 16 & 0xff
|
|
o2 = bits >> 8 & 0xff
|
|
o3 = bits & 0xff
|
|
|
|
if (h3 === 64) {
|
|
tmpArr[ac++] = String.fromCharCode(o1)
|
|
} else if (h4 === 64) {
|
|
tmpArr[ac++] = String.fromCharCode(o1, o2)
|
|
} else {
|
|
tmpArr[ac++] = String.fromCharCode(o1, o2, o3)
|
|
}
|
|
} while (i < encodedData.length)
|
|
|
|
dec = tmpArr.join('')
|
|
|
|
return decodeURIComponent(escape(dec.replace(/\0+$/, '')))
|
|
}
|
|
|
|
function base64_encode(data) {
|
|
|
|
// From: http://phpjs.org/functions
|
|
// + original by: Tyler Akins (http://rumkin.com)
|
|
// + improved by: Bayron Guevara
|
|
// + improved by: Thunder.m
|
|
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
|
// + bugfixed by: Pellentesque Malesuada
|
|
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
|
// + improved by: Rafał Kukawski (http://kukawski.pl)
|
|
// * example 1: base64_encode('Kevin van Zonneveld');
|
|
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
|
|
// mozilla has this native
|
|
// - but breaks in 2.0.0.12!
|
|
//if (typeof this.window.btoa === 'function') {
|
|
// return btoa(data);
|
|
//}
|
|
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
|
|
ac = 0,
|
|
enc = '',
|
|
tmp_arr = [];
|
|
|
|
if (!data) {
|
|
return data;
|
|
}
|
|
|
|
do { // pack three octets into four hexets
|
|
o1 = data.charCodeAt(i++);
|
|
o2 = data.charCodeAt(i++);
|
|
o3 = data.charCodeAt(i++);
|
|
|
|
bits = o1 << 16 | o2 << 8 | o3;
|
|
|
|
h1 = bits >> 18 & 0x3f;
|
|
h2 = bits >> 12 & 0x3f;
|
|
h3 = bits >> 6 & 0x3f;
|
|
h4 = bits & 0x3f;
|
|
|
|
// use hexets to index into b64, and append result to encoded string
|
|
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
|
|
} while (i < data.length);
|
|
|
|
enc = tmp_arr.join('');
|
|
|
|
var r = data.length % 3;
|
|
|
|
return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
|
|
|
|
}
|
|
|
|
if(inUrl.lastIndexOf('?')){
|
|
|
|
parameterString = inUrl.substring(inUrl.lastIndexOf('?')+1,inUrl.length);
|
|
var urlParameters=urlDecode(parameterString);
|
|
|
|
var target =urlParameters.xdmTarget;
|
|
|
|
if(!target || target && target=='undefined'){
|
|
return;
|
|
}
|
|
|
|
if(target.indexOf('http:')==-1){
|
|
target = base64_decode(target);
|
|
}
|
|
|
|
target=decodeURIComponent(target);
|
|
//http://localhost/projects/x4mm/Control-Freak-Documentation/daux/Getting_Started?xdmTarget=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F%3Fdebug%3Dtrue%26run%3Drun-release-debug%26protocols%3Dtrue%26xideve%3Dtrue%26drivers%3Dtrue%26plugins%3Dfalse%26xblox%3Ddebug%26files%3Dtrue%26dijit%3Ddebug%26xdocker%3Ddebug%26xfile%3Ddebug%26davinci%3Ddebug%26dgrid%3Ddebug%26xgrid%3Ddebug%26xace%3Ddebug%26wcDocker%3Ddebug&xdm_e=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F&xdm_c=default9743&xdm_p=4
|
|
//console.error('creating socket to '+target);
|
|
xdmSocket = new easyXDM.Socket({
|
|
remote: "" + target,
|
|
onMessage:function (message, origin)
|
|
{
|
|
onMessage(message);
|
|
}
|
|
});
|
|
|
|
//console.error('xdmtarge = ' + target);
|
|
|
|
//var newUrl = + encodeURIComponent('' + window.location.href);
|
|
|
|
if(target && target!=='undefined' && target.length) {
|
|
$(function () {
|
|
$('a').each(function () {
|
|
var cUrl = $(this).attr('href');
|
|
var bindStr = '?';
|
|
if (cUrl && cUrl.indexOf('xdmTarget') == -1) {
|
|
if (cUrl.indexOf('?') != -1) {
|
|
bindStr = '&';
|
|
}
|
|
var newUrl = cUrl + bindStr + 'xdmTarget=' + base64_encode(target);
|
|
//console.log('new url ' + newUrl);
|
|
//$(this).attr('href', newUrl);
|
|
}
|
|
|
|
|
|
});
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
document.onreadystatechange = function () {
|
|
|
|
if(typeof easyXDM !=='undefined') {
|
|
|
|
var state = document.readyState;
|
|
if (state == 'interactive') {
|
|
} else if (state == 'complete') {
|
|
init();
|
|
}
|
|
}else{
|
|
console.error('easy xdm not defined');
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Font -->
|
|
|
|
<!-- CSS -->
|
|
<link href='../../themes/mytheme/css/theme-blue.min.css' rel='stylesheet' type='text/css'><link href='../../admin-theme/bower_components/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'><link href='../../admin-theme/html-white/dist/css/application.css' rel='stylesheet' type='text/css'><link href='../../themes/mytheme/css/bootstrap-override-white.css' rel='stylesheet' type='text/css'>
|
|
<!-- Tipue Search -->
|
|
<link href="../../tipuesearch/tipuesearch.css" rel="stylesheet">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body class=" xTheme xTheme-white">
|
|
<header class="Navbar hidden-print">
|
|
<a class="Navbar__brand" href="../../index.html">Control-Freak</a>
|
|
|
|
<div class="Search">
|
|
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg>
|
|
<input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on" results=25 autosave=text_search>
|
|
</div>
|
|
</header>
|
|
<div class="Columns content">
|
|
<aside class="Columns__left Collapsible">
|
|
<div class="Collapsible__container">
|
|
<button type="button" class="Button Collapsible__trigger">
|
|
<span class="Collapsible__trigger--bar"></span>
|
|
<span class="Collapsible__trigger--bar"></span>
|
|
<span class="Collapsible__trigger--bar"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="Collapsible__content">
|
|
<!-- Navigation -->
|
|
<ul class='Nav'><li class='Nav__item '><a href="../../Getting_Started.html">Getting Started</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Installation</a><ul class='Nav'><li class='Nav__item '><a href="../../Installation/Windows.html">Windows</a></li><li class='Nav__item '><a href="../../Installation/Linux.html">Linux</a></li><li class='Nav__item '><a href="../../Installation/Raspberry-PI.html">Raspberry-PI</a></li><li class='Nav__item '><a href="../../Installation/OSX.html">OSX</a></li><li class='Nav__item has-children'><a href="../../Installation/WEB/index.html" class="folder"><i class="Nav__arrow"> </i>WEB</a><ul class='Nav'><li class='Nav__item '><a href="../../Installation/WEB/Requirements.html">Requirements</a></li></ul></li></ul></li><li class='Nav__item Nav__item--open has-children'><a href="../../Interface_Designer/index.html" class="folder"><i class="Nav__arrow"> </i>Interface Designer</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Guide.html">Guide</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Examples</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Examples/Button_Group.html">Button Group</a></li><li class='Nav__item '><a href="../../Interface_Designer/Examples/States.html">States</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/States.html">States</a></li><li class='Nav__item '><a href="../../Interface_Designer/VariableStates.html">VariableStates</a></li><li class='Nav__item Nav__item--open has-children'><a href="../../Interface_Designer/Widgets/index.html" class="folder"><i class="Nav__arrow"> </i>Widgets</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Accordion.html">deliteful/Accordion</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Button.html">deliteful/Button</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/channelBreakpoints.html">deliteful/channelBreakpoints</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Checkbox.html">deliteful/Checkbox</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Combobox.html">deliteful/Combobox</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/features.html">deliteful/features</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/LinearLayout.html">deliteful/LinearLayout</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>list</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/list/List.html">deliteful/list/List</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/list/PageableList.html">deliteful/list/PageableList</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Panel.html">deliteful/Panel</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ProgressBar.html">deliteful/ProgressBar</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ProgressIndicator.html">deliteful/ProgressIndicator</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/RadioButton.html">deliteful/RadioButton</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ResponsiveColumns.html">deliteful/ResponsiveColumns</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ScrollableContainer.html">deliteful/ScrollableContainer</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Select.html">deliteful/Select</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/SidePane.html">deliteful/SidePane</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Slider.html">deliteful/Slider</a></li><li class='Nav__item Nav__item--active'><a href="../../Interface_Designer/Widgets/StarRating.html">deliteful/StarRating</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/styling.html">styling</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/SwapView.html">deliteful/SwapView</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Switch.html">deliteful/Switch</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Toaster.html">deliteful/Toaster</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ToggleButton.html">deliteful/ToggleButton</a></li><li class='Nav__item has-children'><a href="../../Interface_Designer/Widgets/tutorial/index.html" class="folder"><i class="Nav__arrow"> </i>tutorial</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part1GettingStarted.html">Deliteful Tutorial Part 1</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part2QuickLook.html">Deliteful Tutorial Part 2</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part3PhotoFeedApp.html">Deliteful Tutorial Part 3</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part4ListView.html">Deliteful Tutorial Part 4</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part5CustomRenderer.html">Deliteful Tutorial Part 5</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part6DetailsView.html">Deliteful Tutorial Part 6</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part7SettingsView.html">Deliteful Tutorial Part 7</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part8Build.html">Deliteful Tutorial Part 8</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ViewIndicator.html">deliteful/ViewIndicator</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ViewStack.html">deliteful/ViewStack</a></li></ul></li></ul></li><li class='Nav__item has-children'><a href="../../Driver/index.html" class="folder"><i class="Nav__arrow"> </i>Driver</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Code Examples</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Code_Examples/Expressions.html">Expressions</a></li><li class='Nav__item '><a href="../../Driver/Code_Examples/Variable_Changes.html">Variable Changes</a></li></ul></li><li class='Nav__item has-children'><a href="../../Driver/Built-In/index.html" class="folder"><i class="Nav__arrow"> </i>Built-In</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Built-In/VLC.html">VLC</a></li></ul></li><li class='Nav__item '><a href="../../Driver/Guide.html">Guide</a></li><li class='Nav__item '><a href="../../Driver/API.html">API</a></li><li class='Nav__item '><a href="../../Driver/Editors.html">Editors</a></li><li class='Nav__item '><a href="../../Driver/Debugging.html">Debugging</a></li><li class='Nav__item '><a href="../../Driver/Intern.html">Intern</a></li><li class='Nav__item has-children'><a href="../../Driver/Fiddle/index.html" class="folder"><i class="Nav__arrow"> </i>Fiddle</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Fiddle/Blocks_Example.html">Blocks Example</a></li><li class='Nav__item '><a href="../../Driver/Fiddle/Blocks_Template.html">Blocks Template</a></li></ul></li></ul></li><li class='Nav__item '><a href="../../Protocols/index.html" class="folder"><i class="Nav__arrow"> </i>Protocols</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="../../Blocks/index.html" class="folder"><i class="Nav__arrow"> </i>Blocks</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/Command.html">Command</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Events</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/Events/OnEvent.html">OnEvent</a></li></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>File</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/File/ReadJSON.html">ReadJSON</a></li></ul></li></ul></li><li class='Nav__item '><a href="../../Exporter/index.html" class="folder"><i class="Nav__arrow"> </i>Exporter</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Device_Server/index.html" class="folder"><i class="Nav__arrow"> </i>Device Server</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Tutorials/index.html" class="folder"><i class="Nav__arrow"> </i>Tutorials</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Raspberry_PI/index.html" class="folder"><i class="Nav__arrow"> </i>Raspberry PI</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Resources</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Software</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>MQTT</a><ul class='Nav'><li class='Nav__item '><a href="../../Resources/Software/MQTT/Software.html">Software</a></li><li class='Nav__item '><a href="../../Resources/Software/MQTT/Architecture.html">Architecture</a></li></ul></li><li class='Nav__item '><a href="../../Resources/Software/Tools/index.html" class="folder"><i class="Nav__arrow"> </i>Tools</a><ul class='Nav'></ul></li></ul></li><li class='Nav__item '><a href="../../Resources/Utils_API/index.html" class="folder"><i class="Nav__arrow"> </i>Utils API</a><ul class='Nav'></ul></li></ul></li></ul>
|
|
|
|
<div class="Links">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div class="Columns__right ">
|
|
<div class="Columns__right__content">
|
|
<div class="doc_content">
|
|
<article class="Page">
|
|
|
|
<div class="Page__header">
|
|
<h1><a href="../../Interface_Designer/index.html">Interface Designer</a> <svg class="Page__header--separator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175"><path d="M360.73 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/></svg> <a href="../../Interface_Designer/Widgets/index.html">Widgets</a> <svg class="Page__header--separator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175"><path d="M360.73 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/></svg> <a href="../../Interface_Designer/Widgets/StarRating.html">deliteful/StarRating</a></h1>
|
|
<span style="float: right; font-size: 10px; color: gray;">
|
|
<a href="https://github.com/net-commander/net-commander-documentation/blob/master/docFiles/03_Interface_Designer/Widgets/StarRating.md" target="_blank">Edit on GitHub</a>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="s-content">
|
|
<p>#deliteful/StarRating</p>
|
|
<p>The <code>StarRating</code> widget displays a rating, usually with stars, that can be edited by touching or clicking the stars.</p>
|
|
<p><img src="images/StarRating.png" alt="StarRating Example" /></p>
|
|
<p>The <code>StarRating</code> widget is a form field, which means that when included in an HTML form, its value will be submitted with those of the other form fields, under the name defined by its <code>name</code>attribute.</p>
|
|
<h5 id="page_Table_of_Contents">Table of Contents</h5>
|
|
<p><a href="#instantiation">Element Instantiation</a><br />
|
|
<a href="#configuration">Element Configuration</a><br />
|
|
<a href="#styling">Element Styling</a><br />
|
|
<a href="#interactions">User Interactions</a><br />
|
|
<a href="#mixins">Mixins</a><br />
|
|
<a href="#events">Element Events</a><br />
|
|
<a href="#enterprise">Enterprise Use</a></p>
|
|
<p><a name="instantiation"></a></p>
|
|
<h2 id="page_Element_Instantiation">Element Instantiation</h2>
|
|
<p>See <a href="/delite/docs/master/Widget.md/broken"><code>delite/Widget</code></a> for full details on how instantiation lifecycle is working.</p>
|
|
<h3 id="page_Declarative_Instantiation">Declarative Instantiation</h3>
|
|
<pre><code class="language-html"><!-- Editable StarRating with: -->
|
|
<!-- * a minimum value of 0 -->
|
|
<!-- * a maximum value of 7 -->
|
|
<!-- * an initial value of 3.5 -->
|
|
<!-- * values set by increments of .5 -->
|
|
<d-star-rating name="rating" max="7" value="3.5" editHalfValues="true"></d-star-rating>
|
|
</code></pre>
|
|
<h3 id="page_Programmatic_Instantiation">Programmatic Instantiation</h3>
|
|
<pre><code class="language-js">require(["deliteful/StarRating", "requirejs-domready/domReady!"], function (StarRating) {
|
|
var starRating = new StarRating({max: 7, value: 3.5, editHalfValues: true});
|
|
starRating.placeAt(document.body);
|
|
});
|
|
</code></pre>
|
|
<p><a name="configuration"></a></p>
|
|
<h2 id="page_Element_Configuration">Element Configuration</h2>
|
|
<h3 id="page_Using_StarRating_in_a_Form">Using StarRating in a Form</h3>
|
|
<p>The <code>StarRating</code> widget is a form field, which means that when included in an HTML form, its value will be submitted with those of the other form fields, under the name defined by its <code>name</code>attribute.</p>
|
|
<p>Here is an example of a <code>StarRating</code> widget included in a form, under the name <em>rating</em>:</p>
|
|
<pre><code class="language-html"><form action="...">
|
|
<span id="lb1">Rating:</span><d-star-rating id="input1" name="rating" value="4" aria-labelledby="lb1"></d-star-rating>
|
|
<input type="submit">
|
|
</form>
|
|
</code></pre>
|
|
<p>Note that is the <code>StarRating</code> is disabled, its value will not be submited.</p>
|
|
<h3 id="page_Properties">Properties</h3>
|
|
<p>The following properties can be set on a <code>StarRating</code> instance:</p>
|
|
<ul>
|
|
<li>
|
|
<code>max</code>: the maximum rating, that is also the number of stars to show.</li>
|
|
<li>
|
|
<code>value</code>: the current value of the Rating.</li>
|
|
<li>
|
|
<code>readOnly</code>: if false, the widget is editable and allows editing the value of the Rating by touching / clicking the stars</li>
|
|
<li>
|
|
<code>name</code>: mandatory if using the star rating widget in a form, in order to have its value submited</li>
|
|
<li>
|
|
<code>disabled</code>: if true, the widget is disabled (its value will not be submited if it is included in a form)</li>
|
|
<li>
|
|
<code>editHalfValues</code>: if the Rating is not read only, define if the user is allowed to set half values (0.5, 1.5, ...)</li>
|
|
<li>
|
|
<code>allowZero</code>: if false, the user is not allowed to set the value to 0 (default is true)</li>
|
|
</ul>
|
|
<p><a name="styling"></a></p>
|
|
<h2 id="page_Element_Styling">Element Styling</h2>
|
|
<h3 id="page_Supported_themes">Supported themes</h3>
|
|
<p>This widget provides default styling for the following delite themes:</p>
|
|
<ul>
|
|
<li>bootstrap</li>
|
|
<li>ios</li>
|
|
<li>holodark</li>
|
|
</ul>
|
|
<h3 id="page_CSS_Classes">CSS Classes</h3>
|
|
<p>The star characters displayed for an empty star and a full star are font characters.
|
|
Half stars are created by displaying the first half of a full star character followed by the second half of an empty star character.</p>
|
|
<p>The stars displayed can be fully customized by using the following CSS selectors:</p>
|
|
<pre><code class="language-css">.d-star-rating-star-icon {
|
|
font-size: 150%;
|
|
}
|
|
|
|
.d-star-rating-empty::before {
|
|
content: "\2605"; /* The font character to use to display an empty star */
|
|
color: #CCC; /* The color of an empty star */
|
|
}
|
|
|
|
.d-star-rating-full::before {
|
|
content: "\2605"; /* The font character to use to display a full star */
|
|
color: yellow; /* The color of a full star */
|
|
}
|
|
</code></pre>
|
|
<p>It is also possible to use an image stripes to render the stars, using a few more CSS selectors, as demonstrated in the following sample:</p>
|
|
<p><iframe width="100%" height="300" allowfullscreen="allowfullscreen" frameborder="0"
|
|
src="http://jsfiddle.net/ibmjs/3eu6v/embedded/result,html,js,css">
|
|
<a href="http://jsfiddle.net/ibmjs/3eu6v/">checkout the sample on JSFiddle</a></iframe></p>
|
|
<p><a name="interactions"></a></p>
|
|
<h2 id="page_User_Interactions">User Interactions</h2>
|
|
<p>If the <code>StarRating</code> widget properties <code>readOnly</code> and / or <code>disabled</code> are not set to <code>true</code>, the value of the widget can be edited by:</p>
|
|
<ul>
|
|
<li>
|
|
<p>Touching the stars on a touch screen device;</p>
|
|
</li>
|
|
<li>
|
|
<p>Clicking the stars when using a mouse. When the stars are hovered by the mouse pointer, the widget highlight the value that will be set if the user click the mouse at the current position, as in the following picture:</p>
|
|
<p><img src="images/StarRatingHovered.png" alt="StarRating Hovered" /></p>
|
|
</li>
|
|
<li>
|
|
<p>Using the <code>arrow up</code>, <code>arrow down</code>, <code>arrow left</code> and <code>arrow right</code> keys when the widget has the keyboard focus.</p>
|
|
</li>
|
|
</ul>
|
|
<p><a name="mixins"></a></p>
|
|
<h2 id="page_Mixins">Mixins</h2>
|
|
<p>No mixin currently available for this widget.</p>
|
|
<p><a name="events"></a></p>
|
|
<h2 id="page_Element_Events">Element Events</h2>
|
|
<p>This widget emits a <code>change</code> event when its value is updated following a user action on the widget node. No <code>change</code> event is emitted if the value is updated programmatically.</p>
|
|
<p><a name="enterprise"></a></p>
|
|
<h2 id="page_Enterprise_Use">Enterprise Use</h2>
|
|
<h3 id="page_Accessibility">Accessibility</h3>
|
|
<p>The <code>StarRating</code> widget has an ARIA role of <code>slider</code>.</p>
|
|
<p>It is keyboard navigable: unless it is read only, its value can be edited using the arrow keys (see <a href="#interactions">User Interactions</a>).</p>
|
|
<h4 id="page_Limitation_when_using_Apple_VoiceOver">Limitation when using Apple VoiceOver</h4>
|
|
<p>When a <code>deliteful/StarRating</code> widget is selected in Safari while VoiceOver is on:</p>
|
|
<ul>
|
|
<li>The rating value is announced as a percentage instead as a number of stars ;</li>
|
|
<li>VoiceOver announce that the widget value can be adjusted by swiping up or down, but this is not the case. To edit the widget value,
|
|
you must double tap the widget and keep pressing. When VoiceOver announce that the widget is <em>editable</em>, you can adjust the value by
|
|
moving left and right.</li>
|
|
</ul>
|
|
<h3 id="page_Globalization">Globalization</h3>
|
|
<p><code>deliteful/StarRating</code> provide an internationalizable bundle that contains only one message, with the key <code>aria-valuetext</code>.
|
|
This message supports the keyword <code>${value}</code>, that is replaced by the current value of the widget to set its <code>aria-valuetext</code>
|
|
property every time that the value is updated.</p>
|
|
<p>Right to left orientation is supported.</p>
|
|
<h3 id="page_Security">Security</h3>
|
|
<p>This widget has no specific security concern. Refer to <a href="/delite/docs/master/FormValueWidget.md/broken"><code>delite/FormValueWidget</code></a> documentation for general security advice on this base class.</p>
|
|
<h3 id="page_Browser_Support">Browser Support</h3>
|
|
<p>This widget supports all supported browsers without any degraded behavior.</p>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="Pager">
|
|
<li class=Pager--prev><a href="../../Interface_Designer/Widgets/Slider.html">Previous</a></li> <li class=Pager--next><a href="../../Interface_Designer/Widgets/styling.html">Next</a></li> </ul>
|
|
</nav>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- jQuery -->
|
|
<script src="../../themes/daux/js/jquery-1.11.3.min.js"></script>
|
|
|
|
<!-- hightlight.js -->
|
|
<script src="../../themes/daux/js/highlight.pack.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
|
|
<!-- JS -->
|
|
<script src="../../admin-theme/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
|
|
<script src="../../themes/daux/js/daux.js"></script>
|
|
|
|
<!-- Tipue Search -->
|
|
<script type="text/javascript" src="../../tipuesearch/tipuesearch.js"></script>
|
|
|
|
<script>
|
|
window.onunload = function(){}; // force $(document).ready to be called on back/forward navigation in firefox
|
|
$(function() {
|
|
tipuesearch({
|
|
'base_url': '../../'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|