{"type":"rich","version":"1.0","provider_name":"phorkie","provider_url":"https:\/\/p.cweiske.de\/","title":"webaction via promise","author_name":"Christian Weiske","cache_age":86400,"width":900,"height":900,"html":"<!-- embedding all files of https:\/\/p.cweiske.de\/143 -->\n<link rel=\"stylesheet\" href=\"https:\/\/p.cweiske.de\/css\/embed.css\"\/>\n<div class=\"phork\" id=\"143\">\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <style type=\"text\/css\">\/**\n * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\n * (http:\/\/qbnz.com\/highlighter\/ and http:\/\/geshi.org\/)\n *\/\n.xml .de1, .xml .de2 {font: normal normal 1em\/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}\n.xml  {font-family:monospace;}\n.xml .imp {font-weight: bold; color: red;}\n.xml li, .xml .li1 {color: #DDD;}\n.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}\n.xml .es0 {color: #000099; font-weight: bold;}\n.xml .br0 {color: #66cc66;}\n.xml .sy0 {color: #66cc66;}\n.xml .st0 {color: #ff0000;}\n.xml .sc-1 {color: #808080; font-style: italic;}\n.xml .sc0 {color: #00bbdd;}\n.xml .sc1 {color: #ddbb00;}\n.xml .sc2 {color: #339933;}\n.xml .sc3 {color: #009900;}\n.xml .re0 {color: #000066;}\n.xml .re1 {color: #000000; font-weight: bold;}\n.xml .re2 {color: #000000; font-weight: bold;}\n.xml span.xtra { display:block; }\n<\/style><div class=\"code\"><table class=\"xml\"><tbody><tr class=\"li1\"><td class=\"ln\"><pre class=\"de1\">1\n<\/pre><\/td><td class=\"de1\"><pre class=\"de1\"><span class=\"sc3\"><span class=\"re1\">&lt;script<\/span> <span class=\"re0\">type<\/span>=<span class=\"st0\">&quot;text\/javascript&quot;<\/span> <span class=\"re0\">src<\/span>=<span class=\"st0\">&quot;js\/webaction-promise.js&quot;<\/span><span class=\"re2\">&gt;<\/span><span class=\"re1\">&lt;\/script<span class=\"re2\">&gt;<\/span><\/span><\/span><\/pre><\/td><\/tr><\/tbody><\/table><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/143\/rev-raw\/948ddf6945d4ec253387b644ce3151506106d985\/load.htm\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/143#load.htm\">load.htm<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <style type=\"text\/css\">\/**\n * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\n * (http:\/\/qbnz.com\/highlighter\/ and http:\/\/geshi.org\/)\n *\/\n.javascript .de1, .javascript .de2 {font: normal normal 1em\/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}\n.javascript  {font-family:monospace;}\n.javascript .imp {font-weight: bold; color: red;}\n.javascript li, .javascript .li1 {color: #DDD;}\n.javascript .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}\n.javascript .kw1 {color: #000066; font-weight: bold;}\n.javascript .kw2 {color: #003366; font-weight: bold;}\n.javascript .kw3 {color: #000066;}\n.javascript .co1 {color: #006600; font-style: italic;}\n.javascript .co2 {color: #009966; font-style: italic;}\n.javascript .coMULTI {color: #006600; font-style: italic;}\n.javascript .es0 {color: #000099; font-weight: bold;}\n.javascript .br0 {color: #009900;}\n.javascript .sy0 {color: #339933;}\n.javascript .st0 {color: #3366CC;}\n.javascript .nu0 {color: #CC0000;}\n.javascript .me1 {color: #660066;}\n.javascript span.xtra { display:block; }\n<\/style><div class=\"code\"><table class=\"javascript\"><tbody><tr class=\"li1\"><td class=\"ln\"><pre class=\"de1\">1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n<\/pre><\/td><td class=\"de1\"><pre class=\"de1\"><span class=\"co1\">\/\/ Lazy-create and return an indie-config load promise<\/span>\n<span class=\"co1\">\/\/ The promise will be resolved with a config once the indie-config has been loaded<\/span>\n<span class=\"kw2\">var<\/span> loadIndieConfig <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n&#160;\n&#160; &#160; <span class=\"co1\">\/\/ Create the Promise to return<\/span>\n&#160; &#160; <span class=\"kw2\">var<\/span> loadPromise <span class=\"sy0\">=<\/span> <span class=\"kw2\">new<\/span> Promise<span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span> <span class=\"br0\">&#40;<\/span>resolve<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; <span class=\"co1\">\/\/ Parse the incoming messages<\/span>\n&#160; &#160; &#160; &#160; <span class=\"kw2\">var<\/span> parseIndieConfig <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span> <span class=\"br0\">&#40;<\/span>message<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"co1\">\/\/ Check if the message comes from the indieConfigFrame we added (or from some other frame)<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>message.<span class=\"me1\">source<\/span> <span class=\"sy0\">!==<\/span> indieConfigFrame.<span class=\"me1\">contentWindow<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; <span class=\"kw1\">return<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"br0\">&#125;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"kw2\">var<\/span> indieConfig<span class=\"sy0\">;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"co1\">\/\/ Try to parse the config, it can be malformed<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"kw1\">try<\/span> <span class=\"br0\">&#123;<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; indieConfig <span class=\"sy0\">=<\/span> JSON.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>message.<span class=\"me1\">data<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">catch<\/span> <span class=\"br0\">&#40;<\/span>e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><span class=\"br0\">&#125;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"co1\">\/\/ We're done \u2013 remove the frame and event listener<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; window.<span class=\"me1\">removeEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'message'<\/span><span class=\"sy0\">,<\/span> parseIndieConfig<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; indieConfigFrame.<span class=\"me1\">parentNode<\/span>.<span class=\"me1\">removeChild<\/span><span class=\"br0\">&#40;<\/span>indieConfigFrame<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; indieConfigFrame <span class=\"sy0\">=<\/span> undefined<span class=\"sy0\">;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; &#160; &#160; <span class=\"co1\">\/\/ And resolve the promise with the loaded indie-config<\/span>\n&#160; &#160; &#160; &#160; &#160; &#160; resolve<span class=\"br0\">&#40;<\/span>indieConfig<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; <span class=\"co1\">\/\/ Listen for messages from the added iframe and parse those messages<\/span>\n&#160; &#160; &#160; &#160; window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'message'<\/span><span class=\"sy0\">,<\/span> parseIndieConfig<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160;\n&#160; &#160; &#160; &#160; <span class=\"co1\">\/\/ Create a hidden iframe pointing to something using the web+action: protocol<\/span>\n&#160; &#160; &#160; &#160; <span class=\"kw2\">var<\/span> indieConfigFrame <span class=\"sy0\">=<\/span> document.<span class=\"me1\">createElement<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'iframe'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; indieConfigFrame.<span class=\"me1\">src<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'web+action:load'<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; document.<span class=\"me1\">getElementsByTagName<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'body'<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#91;<\/span><span class=\"nu0\">0<\/span><span class=\"br0\">&#93;<\/span>.<span class=\"me1\">appendChild<\/span><span class=\"br0\">&#40;<\/span>indieConfigFrame<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; &#160; &#160; indieConfigFrame.<span class=\"me1\">style<\/span>.<span class=\"me1\">display<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'none'<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160;\n&#160; &#160; <span class=\"co1\">\/\/ Ensure that subsequent invocations return the same promise<\/span>\n&#160; &#160; loadIndieConfig <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n&#160; &#160; &#160; &#160; <span class=\"kw1\">return<\/span> loadPromise<span class=\"sy0\">;<\/span>\n&#160; &#160; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span>\n&#160;\n&#160; &#160; <span class=\"kw1\">return<\/span> loadPromise<span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span>\n&#160;\nloadIndieConfig<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">&#40;<\/span>\n&#160; &#160; <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n&#160; &#160; &#160; &#160; console.<span class=\"me1\">log<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;yuri&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#41;<\/span>.<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span>\n&#160; &#160; <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n&#160; &#160; &#160; &#160; console.<span class=\"me1\">log<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;fail&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&#160; &#160; <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/td><\/tr><\/tbody><\/table><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/143\/rev-raw\/948ddf6945d4ec253387b644ce3151506106d985\/webaction-promise.js\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/143#webaction-promise.js\">webaction-promise.js<\/a>\n <\/div>\n<\/div>\n<\/div>\n"}