What it says in the title. I have a simple app that needs the functionality, but can be otherwise written in plain clojurescript so it seems pretty wasteful to load jQuery and jQueryUI just for that.
The closest thing to jQueryUI's Sortable in the google closure library is goog.fx.DragListGroup. As far as I know there is no ClojureScript wrapper for that, but it should be fairly simple to code against it directly and since it's in the closure library it should optimize well too. The basic idea is that you instantiate a DragListGroup for each independent list that you want to be sortable, and then add the list element to that group using addDragList. You can also add multiple list elements to the same group if you want to be able to drag elements between lists.
Here is one way to get this working. You'll need to use an extern file so Google Closure can read the jQuery libraries. There is one for the main jQuery already published and I posted one that works well for jQuery-ui's sortable. The project.clj should have a reference to the extern, so include something like this:
:dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-1806"]
[jayq "2.3.0"]]
:plugins [[lein-cljsbuild "0.3.1"]]
:cljsbuild {
:builds [
{:source-paths ["src"]
:compiler
{:output-to "resources/public/js/out.js"
:optimizations :advanced
:pretty-print false
:externs ["resources/public/externs"]}}]})
Then write some cljs for the sortable function (jayq makes this easy):
(ns sortable.core
(:use [jayq.core :only [$]]))
(defn sortable [$elem]
(.sortable $elem))
(defn disable-selection [$elem]
(.disableSelection $elem))
(let [$sortable ($ :#sortable)]
(sortable $sortable)
(disable-selection $sortable))
And include an index.html file for the project like this.
There might be some way to compile the jQuery libraries directly with :foreign-libs in the project.clj but I'm not sure how to do that.
EDIT: Sorry this still uses the entire jQuery library so it doesn't really answer the question.
Because I have no clue about clojurescript I can't give you a proper solution in clojurescript but jQuery and jQuery UI shouldn't be that wasteful.
You could include the jQuery library by making use of the Google CDN. Lots of websites use this source and therefore the file gets cached and won't be downloaded again and again.
See this link.
//you can of course easily change the version you want to use, like 1.9.1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script
The same could be done for jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
But if you just want to use the sortable widget of jQuery UI you could simply use their Download Builder.
Just uncheck the "Toggle all" checkbox below "Components" and then check the sortable checkbox in "Interactions".
Download your customized jQuery UI version and all you need to include is the jquery-ui-1.10.3.custom.min.js file. The Download Builder downloads a CSS theme also but for the sortable widget I see no need to include it.
But in fact including jQuery UI from Google CDN is also a good choice. If you host the libraries locally your users must download it at least once. If you use Google most of the user won't need to download the files. (unless the version is different)
Just a suggestion if there's nothing in clojurescript which could help you out.
Related
What is the recommended way to pretty print HTML or code excerpts in AngularDart? Is there a package to help achieve this (have found none), or do developers simply use "external" packages like google-code-prettify?
I use this http://craig.is/making/rainbows/
You add a javascript tag and some classes to your tags containing your code - that's it.
If you want to include HTML including Angular markup you can use ng-non-bindable to prevent Angular processing tags and attributes it may have selectors for.
is there any way (or plugin) to display editable combobox? I have a set of options, but I would like to give possibility to enter custom value.
I've searched the documentation, and I can't find way to do this. I made workaround with javascript, but I'm looking for more elegant solution.
I'm pretty sure that there simply is no HTML form element that does this, and so Rails can't provide you with a helper. As you said, you can work with JS to create something similar (and there should be JS libraries/plugins already out there), or you could just use a select element and add a text field next to it for new values.
HTML5 specification doesn't define such an element. So you may either continue using JS, either try to use autocomplete feature of an input element (although it is not exactly what you want and doesn't compatible with old browsers).
I'm trying to get the hang of the whole asset pipeline thing, and read the guide and several tutorials about them. But one thing that doesn't become quite clear is wether I should view my javascript asset files as a library or a place to put code that is actually run i.e. $(document).ready. Because by default all the javascript files are included, and it would be weird to have several $(document).ready's in there, not to mention that you don't want the $(document).ready function for every page to be run in the first place. What would be the way to go at this? Use my asset files as a library and put actual calls in my views (ugly)? Or is there a better way to do this?
I too ran into this issue. In a large project you can have somebody put code into document ready to, for example, add a click function to each li within a div with class container.
Now we could all argue that the above code would be too generic and of course may affect li tags in other parts of the application, but the bigger the project, the more likely it is that you will run into a conflict like this leading to unexpected behaviour.
I for one am uncomfortable with a whole bunch of document ready functions running for each and every page loaded. My solution is not necessarily the perfect one, but it's one that I have taken up and will share with you.
In the body tag of each page I add data elements signifying the controller and the action. I then have one document ready script that looks for a class named after the controller with the name Ready appended e.g. HomeReady. It will then call a method on this class (presuming it exists) named after the action. So in your asset coffee file you could write:
class #HomeReady
#index: ->
alert("Hello")
#show: ->
alert("Goodbye")
This allows control right down to the action level. When I came across your question I decided to package this solution into a gem as I have already used it in several projects. You can find it at: https://github.com/intrica/rails_document_ready
If you absolutely don't want a certain piece of initialization code to be run unless the current page is a specific controller/action, then you can try adding an empty element on the page with an id built from that info like "posts_index" using these two helpers:
"#{controller_name}_#{action_name}"
Then in your javascript you can wrap the code inside an if statement that checks for the existence of an element with the appropriate id.
edit: Here's an example of the js partial that I mentioned in the comments.
show.html.haml
= render 'map'
map.html.erb (I normally use haml but it's easier to write js in erb)
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
...
</script>
It's probably not as clean as it could be and it doesn't get the benefits of being part of the asset pipeline but I don't mind because it's only something that gets included on a specific page.
I've created a theme and applied it to my ASP.NET MVC site. However, the elements on the page aren't picking up the styles automatically. If I do the following for a specific element they get applied appropriately:
$("input[type=button]").button();
$("input[type=submit]").button();
Am I right in thinking I need to do this for all the different elements? Perhaps incorrectly, I assumed this would be done automatically by referencing the css and custom js files?
Thanks
you can write :submit instead of input[type=submit], but I know that's no the answer of your question.
The jQuery UI library only provides code to style your website, but it doesn't do it automatically. So what you need to do is something like this:
$(":submit, :button, :reset").button();
But sometimes you want to use icons or something like this, then you can use
$("#specificButton").button("option", "...", "...");
I hope it helps!
I am looking for a jQuery list that is editable (add, change, delete elements), what is a good starting point code base that does this?
I found this one example which is great, but it doesn't add, edit or delete list items:
http://jqueryui.com/demos/sortable/default.html
you would use that jQuery library along side some small plugins, there not that hard to extend if you understand the Dom and jQuery.
take a look at this plug-in for example.
http://www.appelsiini.net/projects/jeditable/default.html