a quick javascript lightbox

I had to develop some feature which required some javascript lightbox,
I really not needed a fancy one, but a small or medium one
it was for some small confirmation and in addition a couple of inputs on confirmation
so you can imagine a small html form being poped up
I had to add one then, and I guessed tomorrow there might be couple of more coming

I found very nice options when googled
but I thought of implementing one of my own just for fun, and I got this a quick one

admin.lightbox.show(
  html: "my html goes here"
  title: "my title"
).done(->
  alert "Am done"

hi there

And it really took a very less time to build this one as follows

The most interesting part here is to be able to define callbacks like done and cancel.

And I welcome all suggestions :)

Advertisements

activeadmin cool tweaks

tweak 1: Make some column quick-editable on the index list page

1

Ok… so I want to be quickly able to edit few names, here on the same list page, something like below

2

Thats simply great!

Now it makes me quickly update any name there itself on the list page, <enter> will make it, <escape> will ignore it, and <tab> will move to the next one. awesome.

And to make it work I just need to have one line of code change

All I need to say is `editable_test_column`, and its done.

And here how it works, you will need to define a couple of things

You need to define editable_text_column, this you could place inside app/admin/lib/

Then you will need to add some javascript …

and some css stuff

Thats it.

Next, I would love to quickly alter article type say having a dropdown there to save my time

tweak 2: quick editable dropdowns on list page

6

Ohh, now this is again great!   … no? It actually updates the article type on value change. nice.

Let see the code behind

and to define `column_select`

CustomHelper is one of my helper modules that really helps me render dropdown the way I need, and provides me some nice options, one may choose to use the default rails select helpers

Then you need some javascript

done.

I do have worked out several more tweaks like toggle button for boolean column, show/hide columns on the list page, auto-populate/suggest feature for string filters, one can make use ActiveAdmin icons too, then for one of my requirements I have set up the whole custom header and a dozens of custom pages. I would easily say that ActiveAdmin is just simple and awesome, one can really customize it to the extreme, the code structure will allow you to imagine and implement a number of custom scenarios.

DRYing if @current_user.nil?

While working on one of rails applications, as I usually tend to check whether user is logged in, specially in views as follows

<% if @current_user.nil? %>
  <a href='url to login page'>
<% else %>
  <a href='some url where logged in user have access'>
<% end %>

And over some period I found this pattern repeating everywhere.

I thought of DRYing it, I wanted to have a kind of before_filter for every link that appear on the page, every link should go for login if that page or feature require user entity. and this should be handled by a common thing, similar to before_filter: login_require, on server side. I intend to achieve similar in views. A while back when I read up about html5 custom data attribute, and unobtrusive javascript etc, referring to them, I got one idea as described below, though it is not something that I am making use of custom data attribute exactly, but I found this idea useful and working. May be someone would have good suggestions here for me.

I will put any link which require user login as follows

<a href="/feature/page/" login-require >Feature</a>

And then I will have my after_load.js which will have the following event binding

jQuery('a[login-require]').bind('click', function() {
  <% if @current_user.nil? %>
    openOverlay('overlay-login');
    return false;
  <% else %>
    return true;
  <% end %>
});