<% /* Draws an responsive SVG diagram for the inheritance chain (inverted in rtl) $0 - width - defaults to 600 $1 - height - defaults to 70 $2 - offset - defaults to 50 $3 - Interface name */ var data = string.deserialize(await template("InterfaceData")); var slug = env.slug; var result = ""; // slug is not available in preview mode. if (slug) { var locale = env.locale; var href = 'https://developer.mozilla.org/' + locale + '/docs/Web/API/'; var mainIF = $3 || slug.replace('Web/API/','').split('/')[0]; var rtlLocales = ['ar', 'he', 'fa']; var inheritanceChain = [mainIF]; var descendants = []; var inh = data[0][mainIF] != undefined ? data[0][mainIF].inh : ''; var width = $0 || 600; var height = $1 || 70; var offset = $2 || 50; var rtl = false; if (rtlLocales.indexOf(locale) != -1) { rtl = true; } function getInheritance(inh) { if (inh.length > 0) { inheritanceChain.unshift(inh); if (data[0].hasOwnProperty(inh)) { var inh = data[0][inh].inh; getInheritance(inh); } } } getInheritance(inh); /* function getDescendants(data) { for (var key in data) { if (data.hasOwnProperty(key) && data[key].inh == mainIF) { descendants.push(key); } } descendants.sort(); } getDescendants(data[0]):*/ var l = 0; function rectWithText(x, y, fill, interface, reverse) { var flip = rtl ? 'transform="scale(-1 1)"' : ''; var inv = rtl ? '-' : ''; l = interface.length * 10 < 75 ? 75 : interface.length * 10; if (reverse) { xpos -= l; x = xpos; } if (!reverse) { xpos += l; } return '' + '' + ''+interface+'' + ''; } function lineWithTriangle(x, y, reverse) { var str = ''; if (reverse) { str += ''; x -= 10; str += ''; } else { str += ''; x += 10; str += ''; } return str; } var padding = (height / width) * 100; var xpos = 1; var ypos = 1; var viewbox = 'viewbox="-'+ offset + ' 0 '+ width + ' ' + height +'"'; if (rtl) { viewbox = 'viewbox="510 0 '+ width + ' ' + height +'" transform="scale(-1 1)"'; } result = '
' + ''; for (var i = 0; i < inheritanceChain.length; i++) { var fill = (inheritanceChain[i] == mainIF) ? '#F4F7F8': '#fff'; // we are going to the second row with a special line if (i == 4) { result += '' xpos += 10; result += ''; xpos += 8; result += ''; ypos = 90; result += ''; xpos -= 18; ypos = 65; } // first row if (i < 4) { result += rectWithText(xpos, ypos, fill, inheritanceChain[i]); if (i != inheritanceChain.length - 1 && i != 3) { result += lineWithTriangle(xpos, ypos); xpos += 40; } } else { // second row result += rectWithText(xpos, ypos, fill, inheritanceChain[i], true); if (i != inheritanceChain.length - 1 && i != 3) { result += lineWithTriangle(xpos, ypos, true); xpos -= 40; } } } result +='
'; } %> <%-await template("EmbedLiveSample", ["inheritance_diagram", width, height, '', '', 'inheritance-diagram-frame'])%>