I'm trying to see whether it's possible to use the code from DuckDuckHack Instant Answers outside of the context of the main DuckDuckGo website. After all, an Instant Answer is mostly a standalone component that consists of some HTML, CSS and Javascript and should be relatively self-contained and reusable.
Since the DuckDuckHack project is in maintenance mode, it seems to be a bit difficult to obtain information: the Slack and Forum mentioned on the Developer Guide have been disabled. I tried to find out whether other people tried to make Instant Answers work in other contexts, but I couldn't find anything. There are tutorials on writing Instant Answers, such as this using Perl and the DuckPAN tools. I tried to get an existing Instant Answer to work using those tools but I failed to get it to work properly (not sure whether they are still maintained).
Since those tools seem to be a bit heavyweight, I thought it could be possible to bypass them completely and try to just use the HTML, CSS and JS from the Instant Answer directly.
I've given the Calculator a first shot. I identified the relevant source code in the duckduckgo/zeroclickinfo-goodies repository's directory share/goodie/calculator. The HTML seems to be in the content.handlebars, and then there's calculator.css and calculator.js. I created a plain HTML file, put the HTML from content.handlebars in there and included references to the CSS file and the JS file. At first, the CSS wouldn't work because the CSS rules don't apply without adding some more wrapper divs that can be easily found when inspecting the DuckDuckGo site with the calculator Instant Answer visible. After adding those wrapper divs, the calculator UI appears more or less intact. However the buttons of the UI do not work at all yet.
Looking at the Javascript console I get this error:
Uncaught ReferenceError: DDH is not defined
at calculator.js:1
Apparently an object DDH is required by calculator.js, however I have no idea what that object should be and how I could create it.
Does anybody know how this DDH variable gets usually initialized or more generally how to make this work? Any reference to projects reusing the code from DuckDuckHack for their own sites would also be highly appreciated.
I think the details of how the DDH object is put together might not be exposed through the open-source portion of DDG.
I've also made some attempts to repurpose some of the built-in DDG IA functionality (e.g. get programmatic access to the many, useful instant answers unavailable through their API).
In the process, I cloned the goodie repo and poked around. The pattern seems to be that for most goodies the payload to be displayed is DDH.<goodie>.content. In my local copy of the goodie repo:
$ grep -rE 'DDH' ./lib/
./lib/DDG/Goodie/Conversions.pm: content => 'DDH.conversions.content'
./lib/DDG/Goodie/Conversions.pm: content => 'DDH.conversions.content'
./lib/DDG/Goodie/Game2048.pm: content => 'DDH.game2048.content'
./lib/DDG/Goodie/PublicDNS.pm: list_content => 'DDH.public_dns.content',
./lib/DDG/Goodie/JsBeautifier.pm: content => 'DDH.js_beautifier.content'
./lib/DDG/Goodie/SassToCss.pm: content => 'DDH.sass_to_css.content'
./lib/DDG/Goodie/Constants.pm: title_content => 'DDH.constants.title_content'
...
On the javascript side of things, you'd find the corresponding .js files in the share/goodie directory, as you did for the calculator goodie.
The <goodie>.js files seem to introduce DDH.<goodie> namespaces (typically right at the top of the file) and define DDH.<goodie>.build functions. This procedure is referenced in the goodie-display docs (see the section titled Setting Goodie Display Options on the Front end therein).
Nowhere in the docs, though, is it documented how the content property of DDH.<goodie> is put together. I cloned the docs repo and grepped for DDH, revealing nothing to that effect.
None of the .js files in the share/goodie folder of the goodie repo, though, seem to give a clue as to how DDH.<goodie>.content is assembled either. Indeed, some of those .js files do not even contain the string content. For a listing of all share*.js files that do contain the string content, I did (in the local copy of the goodie repo):
$ find ./share -name "*.js" |xargs grep -l 'content'
./share/goodie/countdown/countdown.js
./share/goodie/text_converter/text_converter.js
The other .js files do not contain that string at all..
Edit
On the other hand though, I see you did manage to get the calculator going with some modifications to the .js file (e.g. by inserting that missing DDH namespace).
Related
I'm working on a new Acumatica screen for our company that will require some javascript code to retrieve and display a map object (from ESRI).
This code requires an external .js file that is included to the HTML by the javascript code itself. Everything works fine if I use a blank HTML page to test this.
The problem I have is that when I try using the same code from inside the Acumatica screen, it doesn't load this required external file, and therefore the code does not work properly.
I attempted to load the full .js file code along with my code, but it returned the following error:
error CS8095: Length of String constant exceeds current memory limit. Try splitting the string into multiple constants.
I haven't tried splitting this file into multiple strings (as the error message suggests), because I want to make sure there isn't a cleaner and more professional, direct/right way to do this.
Is it possible to manually import this external .js file into our Acumatica instance, so I can point to it instead? (in case it makes a difference if it's hosted in the same environment)
or, is there any way to make Acumatica able to load external files so we can keep using our current approach? (any setting that may be preventing external files from loading?)
I'm not sure i fully understand the question. What comes to mind however is you may be looking to use the PXJavaScript control. I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed. Let me know if this gets you in the right direction?
Dynamically Change Button Color
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I have a webpage that works and all is swell. It is coded using mostly good practises of external css files and minimal inline styles/code. All is well.
Now however, I want to send that page via HTML text only, such as in an email. So there should be no external references to external sites at all. Meaning I now must move my beautiful external references, internally.
I am thinking I can write a javascript function that finds every class of an object, removes it from that class, then gives that object inline "style" attributes equal to what the class has.
But I was wondering if anyone else has other suggestions.
The end goal is to get a wall of text, that when pasted in a non-internet connected browser with no cache or anything, will display exactly what I have on the screen of my "normal operations" page.
There is a perl CPAN module for this:
CSS::Inliner
you can also find the source on github:
https://github.com/kamelkev/CSS-Inliner
I don't think this is an actual JS error, but the symptoms are JS related. I have a Magento 1.7.0.2 installation with SCP (Simple Configurable Products) which works 100% as I want/expect. In my early development I added some methods to 1 specific file in the SCP module, app/code/community/OrganicInternet/SimpleConfigurableProducts/Catalog/Model/Product/Type/Configurable.php.
With these methods inside of the SCP module everything works, however I realise now I really should have created an additional module in the local code pool that extends SCP and put my additional methods in there. So I created Bendart_Matrix. I cut the 3 methods out of SCP's Configurable.php and placed them in my own module, app/code/local/Bendart/Matrix/Catalog/Model/Product/Type/Configurable.php. Whilst the page still loads, there appear to be some JS errors which ultimately relate to the Product JS Object not being created correctly. It doesn't get created with the .Options method like it does when my methods are part of SCP.
I can't find a logical reason as to why this is, so I've created some gists of my module (Configurable.php, config.xml and Bendart_Matrix.xml) and the same files from SCP. Once again, if I disable or remove my module and switch the methods back to SCP files, it works. Weird?
SCP config.xml: https://gist.github.com/4327015
SCP Module Declaration XML: https://gist.github.com/4327012
SCP Configurable.php (minus the methods from my file: https://gist.github.com/4326996
My config.xml: https://gist.github.com/4326988
My Module Declaration XML: https://gist.github.com/4326986
My Configurable.php (just the methods in question): https://gist.github.com/4326909
Any help or advice is appreciated as I want to do it properly and remove my methods from the SCP module but there appears to be some dependencies I've missed or something?
Based on the information you posted, I think the most likely issue is going to be that you have made a change in your layout update that removes a template that is required. You seem to be extending the module correctly and a JS error in generally related to templates in this situation.
P.S. Slight heads up, came to our attention this morning that SCP doesn't function correctly if somebody adds a configurable product to their basket from the Wishlist page (it adds both the configurable and the simple, this may not matter to you, but with our customised exports and adminhtml updates this caused issues). If you have Wishlist enabled you should bare this in mind.
Ok, I've fixed one issue thanks to #Cags.
I noticed whilst turning template hints on that scpoptions.phtml wasn't being included in comparison to my live working version. I added the following lines (taken from simpleconfigurableproducts.xml)
<reference name="product.info.options">
<action method="setTemplate"><template>catalog/product/view/scpoptions.phtml</template></action>
</reference>
This fixed all the JS warnings about Product.Options and any other warnings I had. It also ensured that the product price was updated correctly once I started selecting custom options etc.
Now, one last issue, when I load the product page, before I select ANYTHING, the price shows as 0.00. As soon as I select a drop-down the price "kicks in" and it works from there on in, it just appears to be the initial page load. I've compared template files with my live site that works (but doesn't have my module) so again it's something to do with the inclusion of my module, but what?
Cheers.
I'm currently stumped about a problem I'm facing where I can't reference functions and variables from one JavaScript file to the next. I've tried adding all of the JavaScript files as a library in File->Settings->JavaScript->Libraries but with no success - I still get the gray underline for references with, for instance, a hover-over message that reads "Unresolved function or method ".
The strange thing is if I move a copy of the JavaScript files outside of the subversioned project directory and then add that project-external reference to File->Settings->JavaScript->Libraries then the references are found but this solution is not satisfactory because these JavaScript files are updated via subversioning daily (we're in development)
Does anybody have any insight to my problem? If I am not going about this the right way then let me know. What I ultimately want to be able to do is reference variables and functions from specfic JavaScript files across all my JavaScript files so that I can easily follow references (ctrl+leftclick) to insure the parts are fitting together properly.
Thanks!
(P.S. I'm using PyCharm 2.5)