From 1a3ca51a74ce0288ffb48d0aa0834ce438348506 Mon Sep 17 00:00:00 2001 From: Oliver Bertuch Date: Wed, 22 Oct 2014 07:35:00 +0200 Subject: [PATCH 1/5] Adding option to use 'data-img-class' tag to add classes to the
and elements generated by ImagePicker --- image-picker/image-picker.js | 29 ++++++++++++++--------------- source/coffee/image-picker.coffee | 6 ++++++ 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/image-picker/image-picker.js b/image-picker/image-picker.js index 984981b..3b1c29a 100644 --- a/image-picker/image-picker.js +++ b/image-picker/image-picker.js @@ -1,10 +1,4 @@ -// Image Picker -// by Rodrigo Vera -// -// Version 0.2.4 -// Full source at https://github.com/rvera/image-picker -// MIT License, https://github.com/rvera/image-picker/blob/master/LICENSE -// Generated by CoffeeScript 1.4.0 +// Generated by CoffeeScript 1.8.0 (function() { var ImagePicker, ImagePickerOption, both_array_are_equal, sanitized_options, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, @@ -49,11 +43,9 @@ }; ImagePicker = (function() { - function ImagePicker(select_element, opts) { this.opts = opts != null ? opts : {}; this.sync_picker_with_select = __bind(this.sync_picker_with_select, this); - this.select = jQuery(select_element); this.multiple = this.select.attr("multiple") === "multiple"; if (this.select.data("limit") != null) { @@ -76,13 +68,14 @@ }; ImagePicker.prototype.build_and_append_picker = function() { - var _this = this; if (this.opts.hide_select) { this.select.hide(); } - this.select.change(function() { - return _this.sync_picker_with_select(); - }); + this.select.change((function(_this) { + return function() { + return _this.sync_picker_with_select(); + }; + })(this)); if (this.picker != null) { this.picker.remove(); } @@ -209,12 +202,10 @@ })(); ImagePickerOption = (function() { - function ImagePickerOption(option_element, picker, opts) { this.picker = picker; this.opts = opts != null ? opts : {}; this.clicked = __bind(this.clicked, this); - this.option = jQuery(option_element); this.create_node(); } @@ -227,6 +218,10 @@ return this.option.data("img-src") != null; }; + ImagePickerOption.prototype.has_class = function() { + return this.option.data("img-class") != null; + }; + ImagePickerOption.prototype.is_blank = function() { return !((this.value() != null) && this.value() !== ""); }; @@ -277,6 +272,10 @@ image = jQuery(""); image.attr("src", this.option.data("img-src")); thumbnail = jQuery("
"); + if (this.has_class()) { + image.addClass(this.option.data("img-class")); + thumbnail.addClass(this.option.data("img-class")); + } thumbnail.click({ option: this }, function(event) { diff --git a/source/coffee/image-picker.coffee b/source/coffee/image-picker.coffee index 73447aa..30df4bf 100644 --- a/source/coffee/image-picker.coffee +++ b/source/coffee/image-picker.coffee @@ -123,6 +123,9 @@ class ImagePickerOption has_image: () -> @option.data("img-src")? + has_class: () -> + @option.data("img-class")? + is_blank: () -> !(@value()? && @value() != "") @@ -158,6 +161,9 @@ class ImagePickerOption image = jQuery("") image.attr("src", @option.data("img-src")) thumbnail = jQuery("
") + if @has_class() + image.addClass(@option.data("img-class")) + thumbnail.addClass(@option.data("img-class")) thumbnail.click {option: this}, (event) -> event.data.option.clicked() thumbnail.append(image) From 8b5f7fda4557184428e9883d978fe68cf8dfe9f4 Mon Sep 17 00:00:00 2001 From: Oliver Bertuch Date: Wed, 22 Oct 2014 07:35:30 +0200 Subject: [PATCH 2/5] Cleaned up indentation of image-picker.css --- image-picker/image-picker.css | 51 ++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/image-picker/image-picker.css b/image-picker/image-picker.css index 8d31d45..4b10f1a 100644 --- a/image-picker/image-picker.css +++ b/image-picker/image-picker.css @@ -1,29 +1,36 @@ ul.thumbnails.image_picker_selector { - overflow: auto; - list-style-image: none; - list-style-position: outside; - list-style-type: none; - padding: 0px; - margin: 0px; } - ul.thumbnails.image_picker_selector ul { overflow: auto; list-style-image: none; list-style-position: outside; list-style-type: none; padding: 0px; - margin: 0px; } - ul.thumbnails.image_picker_selector li.group_title { - float: none; } - ul.thumbnails.image_picker_selector li { + margin: 0px; +} +ul.thumbnails.image_picker_selector ul { + overflow: auto; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + padding: 0px; + margin: 0px; +} +ul.thumbnails.image_picker_selector li.group_title { + float: none; +} +ul.thumbnails.image_picker_selector li { margin: 0px 12px 12px 0px; - float: left; } - ul.thumbnails.image_picker_selector li .thumbnail { - padding: 6px; - border: 1px solid #dddddd; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; } - ul.thumbnails.image_picker_selector li .thumbnail img { - -webkit-user-drag: none; } - ul.thumbnails.image_picker_selector li .thumbnail.selected { - background: #0088cc; } + float: left; +} +ul.thumbnails.image_picker_selector li .thumbnail { + padding: 6px; + border: 1px solid #dddddd; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} +ul.thumbnails.image_picker_selector li .thumbnail img { + -webkit-user-drag: none; +} +ul.thumbnails.image_picker_selector li .thumbnail.selected { + background: #0088cc; +} From dd1013125c861032a9621ea74f757c034219cab6 Mon Sep 17 00:00:00 2001 From: Oliver Bertuch Date: Wed, 22 Oct 2014 07:46:01 +0200 Subject: [PATCH 3/5] Setting up an example CSS file which can be used to override things in the apps CSS. --- image-picker/example.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 image-picker/example.css diff --git a/image-picker/example.css b/image-picker/example.css new file mode 100644 index 0000000..fdabbd6 --- /dev/null +++ b/image-picker/example.css @@ -0,0 +1,18 @@ +/* Assuming you added a tag 'data-img-class="custom-class"' to the