I decided to back up and start again from the Cereal Cartoon example so I could eliminate some of the potential problem with loading Exhibit in the <body> and the rewrites done by caja on the Google web site. The following is what I did and the fixes I found. There seems to be some inconsistency with tags or parameters that had ex: before them. Most work with ex: replaced with data-ex- and others need to have the ex: just removed to work.
Changes made to the Cereal Cartoon example to make it work in Google Sites Gadget Changed local references to images to complete URL locations Changed references to the local css and .js files to complete URLs Changed the <html> tag to <html xmlns:ex=" http://simile.mit.edu/2006/11/exhibit#"; xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> cereal-characters.js was downloaded and saved in the folder with cereal-characters.html Linking to it remotely didn't display the Exhibit These changes can be seen at http://hayriv.com/cereal-characters1.html Replaced all references to ex: with data-ex- This worked for the most part. The following erros can be seen at http://hayriv.com/cereal-characters2.html The fixes can be seen at http://hayriv.com/cereal-characters3.html 1. The search box was replaced with "missing data-ex-facet-label" and no search box shows. 2. The data was loaded but the facets would not change the display when clicked Numbers one and two can be fixed by changing data-ex-facetClass="TextSearch" to facetClass="TextSearch". ex-facetClass="TextSearch" and exhibit-facetClass="TextSearch" do not work data-ex-facet-label="test label" can be added to fix the "missing data-ex-facet-label" error but is not needed if the facetClass="TextSearch" is made. This was interesting in that an error in the search facet cascaded into an error in the functioning of the following facets. 3. When clicking on the label of a cartoon under the image only the image and title show in the pop up window. This is fixed by removing the data-ex- from data-ex-viewClass="Thumbnail" in the following <div> <div role="view" viewClass="Thumbnail" data-ex-showAll="true" data-ex-possibleOrders=".brand, .decade, .form, .country"> 4. The sort order contained all the data field from the json file not just the one specified. This is fixed by removing the data-ex- from data-ex-possibleOrders=".brand, .decade, .form, .country" in the following <div> <div role="view" viewClass="Thumbnail" data-ex-showAll="true" possibleOrders=".brand, .decade, .form, .country"> I changed data-ex-showAll="true" to showAll="true" but it doesn't seem to make a difference. showAll="false" and data-ex-showAll="false" also do not appear to limit the number of items displayed. Adding abbreviatedCount="10" and showAll="false" does work to limit the results. <div role="view" viewClass="Thumbnail" data-ex-showAll="true" abbreviatedCount="10" possibleOrders=".brand, .decade, .form, .country"> 5. The Timeline link did not show up at all <div data-ex-role="view" data-ex-viewClass="Timeline" data-ex-start=".decade" data-ex-colorKey=".brand" data-ex-topBandUnit="year" data-ex-topBandPixelsPerUnit="50" data-ex-bottomBandUnit="decade" data-ex-bottomBandPixelsPerUnit="50" data-ex-bubbleWidth="400" data-ex-bubbleHeight="250"> </div> was changed to <div role="view" viewClass="Timeline" start=".decade" colorKey=".brand" topBandUnit="year" topBandPixelsPerUnit="50" bottomBandUnit="decade" bottomBandPixelsPerUnit="50" bubbleWidth="400" bubbleHeight="250"> </div> This made the link to the Timeline show up but the link is not active. ( This is only a problem when the html page is a local file, when hosted on a web page it works) Reversing the order of the Timeline and itemThumbnail view does display the Timeline but the Thumbnails link is inactive. I suspect the problem is with this line <div data-ex-role="viewPanel"> but I can't seem to get it to work with a local file. 6. The original file has both a bookmark image and a scissors image. The bookmarks seems to be behind the scissor on the top of the viewPanel and just slightly to the right of it at the bottom. No known fix for this. I was viewing this with Firefox 31.0 on the Mac and viewing a local copy of the file. It displays OK when the file is hosted on a web site in Firefox, Safari and Chrome on the Mac 7. The Timeline displays all the cereals on the century mark. They are all on 1900 or 2000. This is the way it is displayed for me on the original example on the web. George Adams On Wed, Aug 20, 2014 at 11:48 AM, George Adams <[email protected]> wrote: > Further update. > I did some more testing on the Google Gadget and with similar code on a > normal web server. > It appears that Google uses Caja to inspect and substantially rewrite all > HTML and JavaScript before the page loads > > https://developers.google.com/apps-script/guides/html/restrictions#javascript > > All ex:*** tags become ex- when they should be data-ex-*** > I have rewritten the code on the above referenced links and it is mostly > working > > http://8g70vehon7uhaojqv0bshkq7honkrikq-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=http://www.hayriverti.org/seeds.xml&container=enterprise&view=default&lang=en&country=ALL&sanitize=0&v=4fd4b5b0d6da245a&libs=core&mid=65&parent=http://www.hayriverti.org/seed-library > Is a page where the iframe from http://www.hayriverti.org/seed-library It > is easier to get the Generated Source Code on this page. > > The <html> tag for this iframe is generated by the Google Gadget. I needed > to add this code to populate the <html> tag so Exhibit would work with the > data-ex- tags > var html_label = document.getElementsByTagName("html")[0]; > html_label.setAttribute("xml:lang","en"); > html_label.setAttribute("lang","en"); > html_label.setAttribute("xmlns","http://www.w3.org/1999/xhtml";); > html_label.setAttribute("xmlns:ex"," > http://simile.mit.edu/2006/11/exhibit#";); > > These were added as the first lines of the window.onload = function() { > > > I have one remaining problem. When you click on a link under a picture it > should display the picture and some text about it with a couple of links in > a pop up window. It totally misses using that "lens" code and just displays > the same image and link in the pop up window. > It is displaying the code here > <table data-ex-role="lens" class="itemThumbnail" style="display: none;"> > when is should display > <div role="lens" class="item" style="display: none;"> > > The original unaltered code from the cartoon example looks like this > <table ex:role="lens" class="itemThumbnail" style="display: none;"> > > <div role="lens" class="item" style="display: none;"> > > I have tried all combinations of data-ex-role, ex-role, role, ex:role and > "lens", "lens-thumbnail". The results are mostly that the popup uses the > wrong code, the page won't load if ex: is used or both the viewPanel and > popup use the code for the popup. > > Any ideas out there of what might be going on? > > George Adams > > > On Tue, Aug 19, 2014 at 4:03 PM, George Adams <[email protected]> > wrote: > >> Update on this. >> There seems to be a whole series of problems with the code I posted in >> http://www.hayriverti.org/seeds.xml >> Here is what I have found out so far. >> The iframe in http://www.hayriverti.org/seed-library can be seen by >> itself here >> http://8g70vehon7uhaojqv0bshkq7honkrikq-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=http://www.hayriverti.org/seeds.xml&container=enterprise&view=default&lang=en&country=ALL&sanitize=0&v=4fd4b5b0d6da245a&libs=core&mid=65&parent=http://www.hayriverti.org/seed-library# >> It is a bit easier to see the generated HTML this way. >> Working with alert(); and the JavaScript error console I found out that >> // window.SimileAjax_onLoad = loadExhibit; //this didn't run >> loadExhibit >> but this one does >> poll(window, [ "includeData" ], loadExhibit); >> >> With the SimileAjax_onLoad in place both loadExhibit >> and onEverythingLoaded code was not being executed. >> >> In loadExhibit >> // SimileAjax.includeJavascriptFiles(document, "", [ " >> http://api.simile-widgets.org/exhibit/3.1.0rc3/exhibit-api.js"; >> ]);//throws an error >> but this does not >> window.Exhibit.includeJavascriptFiles(document, "", [ " >> http://api.simile-widgets.org/exhibit/3.1.0rc3/exhibit-api.js"; ]); >> This line might not be needed as >> http://api.simile-widgets.org/exhibit/3.1.0rc3/exhibit-api.js should >> have already loaded with loadJS(" >> http://api.simile-widgets.org/exhibit/3.1.0rc3/exhibit-api.js";); >> >> In onEverythingLoaded >> >> window.database = Exhibit.Database.create(); does not create a database >> or at one point I was getting a Javascript null value for window.database . >> In >> http://api.simile-widgets.org/exhibit/3.1.0rc3/scripts/data/database.js >> it looks like there should be a "type" parameter. >> >> Exhibit.Database.create = function(type) { >> if (typeof Exhibit.Database[type] !== "undefined") { >> return new Exhibit.Database[type](); >> } else { >> // warn? >> return new Exhibit.Database._LocalImpl(); >> } >> }; >> >> What should this type be? >> >> >> //window.database.loadDataLinks(); >> I get an error of window.database.loadDataLinks is not a function when it >> is not commented out. >> >> I could not find loadDataLinks in the Exhibit list of .js files. Has this >> been changed in the 3.x versions? >> >> >> George Adams >> >> >> On Fri, Aug 15, 2014 at 2:19 PM, George Adams <[email protected]> >> wrote: >> >>> I am getting back into Exhibit after a number of years. >>> My new Exhibit needs to run as a Goggle Gadget so it doesn't have access >>> to the <head> of the web page. With the help of this group I was able to do >>> this several years ago by adding a bunch of javascript which loaded the >>> needed items into the head of the page. >>> This page works with Exhibit 2 >>> http://www.hayriverti.org/local-directory-map >>> It has the code for the Exhibit in this xml file >>> http://www.hayriverti.org/localDirectory.xml >>> >>> The new Exhibit can be seen here as a plain HTML page with stuff loaded >>> in the <head> >>> http://hayriv.com/seeds.html it works >>> Here is another version that does all the loading in the body and is >>> based on the Local Directory javascript. >>> http://hayriv.com/seedsxml.html This also works. >>> >>> This page takes the code of the body of the above page and wraps it in >>> the Google Gadget module XML. >>> http://www.hayriverti.org/seed-library >>> The XML file is at http://www.hayriverti.org/seeds.xml >>> >>> This page loads the html OK and seems to load the Exhibit .js and .css >>> files but the data file isn't loaded or is loaded after the data is moved >>> to the <head> >>> >>> There is a line in the javascript that polls to see if Exhibit is loaded. >>> poll(window, [ "Exhibit" ], onEverythingLoaded); >>> Is there a way to poll to see if the data is loaded? >>> >>> I tried this without success. >>> poll(window, [ "Exhibit","dataLink" ], onEverythingLoaded); >>> >>> Just as a note I was having similar trouble with the file at >>> http://hayriv.com/seedsxml.html which oddly would work when there was >>> an window.alert() added to the code after the includeData(" >>> https://spreadsheets.google.com/feeds/list/0AkgOV8gxmgPadGV3bTVxREZvb05jNUhxaGNQZ2lFZ2c/od6/public/values?alt=json-in-script >>> "); >>> My guess was that this delayed the rest of the script enough to load the >>> data. After moving >>> includeData(" >>> https://spreadsheets.google.com/feeds/list/0AkgOV8gxmgPadGV3bTVxREZvb05jNUhxaGNQZ2lFZ2c/od6/public/values?alt=json-in-script";); >>> earlier in the series of script steps it worked without fail and without >>> the alert() in the code. >>> >>> Any help would be appreciated. >>> George Adams >>> >> >> > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/simile-widgets. For more options, visit https://groups.google.com/d/optout.
