Is it possible to use Alpaca Forms without jquery? - alpacajs

I am trying to integrate Alpaca Forms into Alfresco Share, but I have a problem trying to add jQuery as a dependency, as the plataform already includes jQuery as a dependency, but an old version, so including this new one just for Alpaca will create problems.
Is there any way to use Alpaca without jQuery, doing all the initialization and configuration using pure javascript?

There's no way to use Alpaca without jQuery, you can see it yourself in alpaca functions ... but you can use many jquery versions with no conflict using jQuery.noConflict( true )
I made a fiddle for that, it uses jQuery version 2.2.4 for alpaca and I loaded jquery version 1.2.3 too. To use the first version of jQuery use the $ sign, for the other version use the variable mapped to a variable like var jquery123 = jQuery.noConflict( true ); jquery123.[some_function]
Link to the fiddle

Related

Tailwindcss prettier plugin only affects css files

Ive installed the prettier-plugin-tailwindcss in my emberjs app. It runs and sorts the classes in my css files correctly but it doesnt touch the handlebars files. The standard prettier stuff still works in the handlebar files.
Ive tried adding a twConfig to the .prettierrc as suggested in the docs but that was unrecognised.
I'd really like to use this plugin but I need to support the handlebars files. Please let me know if anyone has any ideas on how I could solve this.
Here's my current prettierrc.yaml
# We use pretty much all defaults from Prettier https://prettier.io/docs/en/options.html
# We prefer single quotes to align with our internal RECONZ styleguide
singleQuote: true
twConfig: 'app/tailwind/config.js' // adding this throws this error below
// [warn] Ignored unknown option { twConfig: "app/tailwind/config.js" }.
overrides:
- files: '*.hbs'
options:
parser: 'glimmer'
# The Ember community uses single quotes in JS & double in templates
singleQuote: false
These are the versions I have installed:
"prettier": "^2.6.0",
"prettier-plugin-tailwindcss": "^0.1.11",
yarn: v1.22.17
UPDATE: the issue seems to be the parser which is set to glimmer When I tried with html instead the plugin worked but unfortunately I need to keep the parser as glimmer because html also causes some unwanted effects. Is there another option I could use?

Ember Component can't use vendor.js function

I adopted a legacy project that uses EmberJS 2.5.1, and I have a component that is unable to use the JQuery UI Sortable method. The vendor folder contains jquery.ui.min.js, and ember-cli-build.js imports it.
This is what I currently have in my code:
Ember.$("#cute_table_of_puppies_eating_clowns tbody").sortable({})
(Sortable has been simplified for example purposes...)
In Chrome's Debugger it converts to...
_ember["default"].$("#cute_table_of_puppies_eating_clowns tbody").sortable({})
The JQuery selector works, but it cannot find the selector. I put a break point on that line, and tried $("#cute_table_of_puppies_eating_clowns tbody").sortable({}) from the console. This ends up working.
What do I need to do to properly use this function from a component?

Script Precompile Handlebars Templates in Script Tag

I have a fairly big webapp with lot of templates. I am looking to save time by precompilation of these files.
Currently, I use a script wrapper so that I can load it dynamically and package them in html
<script id="all-domain-users-model-template" type="text/html">
<td></td>
<td>{{domain}}</td>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{is_account_owner}}</td>
<td>{{#if is_account_owner}}Delete{{/if}}</td>
</script>
There are many many such files. One file can have more than one definition..
I am looking for ideas for a script to read the name in id, parse html, compile and put it back using id.templates in a js file.
I have seen Using pre-compiled templates with Handlebars.js (jQuery Mobile environment) - the accepted answers mentions that the script tag was removed before copying.. But in reality, its almost impossible..
I use grunt-ember-templates to precommpile my ember handlebars templates.
For a good example of this grunt plugin in use check out this example todos application.
It gives a good example of using grunt for your build process, testing, etc, and includes template precompilation.

How can I consume handlebars command-line generated templates with Ember?

I'm using precompiled templates for several reasons:
Performance (no need to re-compile at runtime)
Code separation (cleaner than embedding <script> tags and hardcoding in JS)
Content security policy (this is for an extension).
Basically, I'm generating templates.js via the handlebars command line utility, based on several template.handlebars files. Next I try to bring these templates into Ember with the following loop:
for (var name in Handlebars.templates) {
var template = Handlebars.templates[name];
Ember.TEMPLATES[name] = template;
}
The result is weird: text seems to be loaded, but many template features (eg. {{outlet}}) don't work. I suspect that this is because Handlebars and Ember-Handlebars are not the same thing.
I guess there are two options (and questions):
Precompile Ember-friendly templates (how can I do this via a command line?)
Properly import Handlebars templates into Ember (how?)
UPDATE: As per the answer, Ember.Handlebars is not the same as Handlebars, so the precompilation is different. Wrote a simple script to precompile for Ember: https://gist.github.com/3723927
Yes, the plain Handlebars compiler compiles to different JavaScript than Ember.Handlebars, so you cannot consume its output with Ember.
I don't know of a way to run Ember.Handlebars through the command line, though it should be possible in principle to write something.
To find out how to precompile with Ember.Handlebars, take a look at the source code of ember-rails - it supports precompilation.

How to insert custom Javascripts in Sitecore backend

Pretty simple, I need to insert a script in Sitecores (v. 6.4) backend - how do I do it?
It doesn't matter if the script is placed inside <head> or <body>, nor does it matter if I can only specify the src of a <script> tag or if I can insert an actual Javascript snippet (the latter is preferable though).
The script needs to be inserted in the HTML when a Content Editor window is opened.
It is not an installation of my own, nor do I develop anything for Sitecore (I do have admin access, however), so something along the lines of installing a plugin would be the best solution I reckon.
I've previously inserted the script in Sitecore 5.4, but not in a pretty way (editing XML files) and if a better solution could be found here too, that'd be pretty great.
Update using Jens Mikkelsens answer in Sitecore Xpress 6:
I tried placing the following in web.config:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" />
</everypage>
<htmleditor>
<script src="/test.js" language="javascript" />
</htmleditor>
</clientscripts>
Being a little bit overzealous (and wanting to make sure the test.js file can be found) I put a js.test in the following locations:
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\
inetpub\wwwroot\SitecoreWebsite\WebSite\
Content of the test.js:
alert("Test [PATH TOKEN]");
Where the path token is just the parent folder name, so I know which test.js was loaded, e.g. inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\test.js holds:
alert("Test Content Manager");
When I try to log in using the default Xpress admin user one of three things happens (in all three cases the frontend loads without errors, but no script present. I have NOT been able to determine when the errors happen, the only thing I can say for sure is that no errors occur when the test.js has not been included in web.config):
Case 1:
The content editor loads as expected, but no script is loaded. This happens most of the time when the clientscript have been included.
Case 2 - Server Error:
Server Error in '/' Application.
Exception Details: System.ArgumentException: Empty strings are not allowed.
Parameter name: value
Stack Trace:
[ArgumentException: Empty strings are not allowed.
Parameter name: value]
Sitecore.Diagnostics.Assert.ArgumentNotNullOrEmpty(String argument, String argumentName) +241
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetEveryPageScripts() +410
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetScripts() +702
Sitecore.Web.UI.HtmlControls.Page.OnInit(EventArgs e) +62
System.Web.UI.Control.InitRecursive(Control namingContainer) +143
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1477
Case 3 - Sitecore error:
A required license is missing
Most likely causes:
The resource you are trying to access requires the following license: Runtime.
I'm not sure whether or not Xpress simply doesn't support clientscripts, but even if it doesn't it is weird that some times the content editor loads.
Update after testing in Sitecore 5.4 full version:
It does indeed work to put a script tag inside the <clientscripts> section in web.config as Jens Mikkelsen answered. It is, however, neccessary to put it inside the subsection <everypage> to get it to appear on every single page in the backend, whereas <htmleditor> only works for the Telerik RadEditor popup window in Sitecore 5.4.
Update after testing in Sitecore 6 full version:
The same method as described for Sitecore 5.4 works for Sitecore 6 with the addition of little thing: <script> embedded in <clienscripts> now require a key attribute:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" key="test script" />
</everypage>
</clientscripts>
I don't think you will be able to add the script with out modifying a file. However you can take a look at the <clientscripts> section in the web.config. There you can add scripts to be loaded. However I don't know if it will only load in the content editor.
I have experimented with this before, and I ended up using the above setting, but as I remember it also loaded on the Page Editor and the Desktop.
Perhaps you can use this example code to add controls to the <head> on the front-end but instead alter it to use the <renderContentEditor> pipeline to somehow inject a new <script> tag into the editor.
here is a good example of it Injecting javascript and css to Sitecore Content Editor Page