Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

change all events name by prefixing them with 'jrac_'

  • Loading branch information...
commit 588a657ef7584b996431c8346ed133933ceb8e27 1 parent c110d6a
@trepmag authored
Showing with 35 additions and 35 deletions.
  1. +8 −8 README.txt
  2. +4 −4 example/index.html
  3. +23 −23 jrac/jquery.jrac.js
View
16 README.txt
@@ -74,23 +74,23 @@ The observator events are the following which you can then trigger some actions
on with the jQuery bind method or by giving a function to the onvevent_callback
argument:
- crop_x
- crop_y
- crop_width
- crop_height
- image_width
- image_height
+ jrac_crop_x
+ jrac_crop_y
+ jrac_crop_width
+ jrac_crop_height
+ jrac_image_width
+ jrac_image_height
Example:
$('img').jrac({'viewport_onload', function() {
var $viewport = this;
- $viewport.register('crop_x', $('input#cropx'), function(event_name, element, value) {
+ $viewport.register('jrac_crop_x', $('input#cropx'), function(event_name, element, value) {
element.val(value);
}
}
-There is also an event 'viewport_events' which is triggered on every events of
+There is also an event 'jrac_events' which is triggered on every events of
the previous decribed viewport observator. Use the jQuery bind methode to act on
it.
View
8 example/index.html
@@ -36,7 +36,7 @@
'viewport_onload': function() {
var $viewport = this;
var inputs = $viewport.$container.parent('.pane').find('.coords input:text');
- var events = ['crop_x','crop_y','crop_width','crop_height','image_width','image_height'];
+ var events = ['jrac_crop_x','jrac_crop_y','jrac_crop_width','jrac_crop_height','jrac_image_width','jrac_image_height'];
for (var i = 0; i < events.length; i++) {
var event_name = events[i];
// Register an event with an element.
@@ -59,7 +59,7 @@
}
})
// React on all viewport events.
- .bind('viewport_events', function(event, $viewport) {
+ .bind('jrac_events', function(event, $viewport) {
var inputs = $(this).parents('.pane').find('.coords input');
inputs.css('background-color',($viewport.observator.crop_consistent())?'chartreuse':'salmon');
});
@@ -102,7 +102,7 @@
'viewport_onload': function() {
var $viewport = this;
var inputs = $viewport.$container.parent('.pane').find('.coords input:text');
- var events = ['crop_x','crop_y','crop_width','crop_height','image_width','image_height'];
+ var events = ['jrac_crop_x','jrac_crop_y','jrac_crop_width','jrac_crop_height','jrac_image_width','jrac_image_height'];
for (var i = 0; i < events.length; i++) {
var event_name = events[i];
// Register an event with an element.
@@ -122,7 +122,7 @@
}
})
// React on all viewport events.
- .bind('viewport_events', function(event, $viewport) {
+ .bind('jrac_events', function(event, $viewport) {
var inputs = $(this).parents('.pane').find('.coords input');
inputs.css('background-color',($viewport.observator.crop_consistent())?'chartreuse':'salmon');
});
View
46 jrac/jquery.jrac.js
@@ -124,8 +124,8 @@
var height = Math.round($zoom_widget.on_start_height_value * ui.value / $zoom_widget.on_start_width_value);
$image.height(height);
$image.width(ui.value);
- $viewport.observator.notify('image_height', height);
- $viewport.observator.notify('image_width', ui.value);
+ $viewport.observator.notify('jrac_image_height', height);
+ $viewport.observator.notify('jrac_image_width', ui.value);
}
});
$container.append($zoom_widget);
@@ -143,10 +143,10 @@
$image.draggable({
drag: function(event, ui) {
if (ui.position.left != ui.originalPosition.left) {
- $viewport.observator.notify('crop_x', $viewport.observator.crop_position_x());
+ $viewport.observator.notify('jrac_crop_x', $viewport.observator.crop_position_x());
}
if (ui.position.top != ui.originalPosition.top) {
- $viewport.observator.notify('crop_y', $viewport.observator.crop_position_y());
+ $viewport.observator.notify('jrac_crop_y', $viewport.observator.crop_position_y());
}
}
});
@@ -163,10 +163,10 @@
handle: 'div.jrac_crop_drag_handler',
drag: function(event, ui) {
if (ui.position.left != ui.originalPosition.left) {
- $viewport.observator.notify('crop_x', $viewport.observator.crop_position_x());
+ $viewport.observator.notify('jrac_crop_x', $viewport.observator.crop_position_x());
}
if (ui.position.top != ui.originalPosition.top) {
- $viewport.observator.notify('crop_y', $viewport.observator.crop_position_y());
+ $viewport.observator.notify('jrac_crop_y', $viewport.observator.crop_position_y());
}
}
});
@@ -176,10 +176,10 @@
aspectRatio: settings.crop_aspect_ratio,
resize: function(event, ui) {
if (ui.size.width != ui.originalSize.width) {
- $viewport.observator.notify('crop_width', $crop.width());
+ $viewport.observator.notify('jrac_crop_width', $crop.width());
}
if (ui.size.height != ui.originalSize.height) {
- $viewport.observator.notify('crop_height', $crop.height());
+ $viewport.observator.notify('jrac_crop_height', $crop.height());
}
}
})
@@ -221,15 +221,15 @@
onevent_callback.call($viewport, event_name, element, value);
}
}
- $image.trigger('viewport_events',[$viewport]);
+ $image.trigger('jrac_events',[$viewport]);
},
notify_all: function() {
- this.notify('crop_x', this.crop_position_x());
- this.notify('crop_y', this.crop_position_y());
- this.notify('crop_width', $crop.width());
- this.notify('crop_height', $crop.height());
- this.notify('image_width', $image.width());
- this.notify('image_height', $image.height());
+ this.notify('jrac_crop_x', this.crop_position_x());
+ this.notify('jrac_crop_y', this.crop_position_y());
+ this.notify('jrac_crop_width', $crop.width());
+ this.notify('jrac_crop_height', $crop.height());
+ this.notify('jrac_image_width', $image.width());
+ this.notify('jrac_image_height', $image.height());
},
// Return crop x position relative to $image
crop_position_x: function() {
@@ -253,32 +253,32 @@
return;
}
switch (that) {
- case 'crop_x':
+ case 'jrac_crop_x':
$crop.css('left',value + $image.position().left);
break;
- case 'crop_y':
+ case 'jrac_crop_y':
$crop.css('top',value + $image.position().top);
break;
- case 'crop_width':
+ case 'jrac_crop_width':
$crop.width(value);
break;
- case 'crop_height':
+ case 'jrac_crop_height':
$crop.height(value);
break;
- case 'image_width':
+ case 'jrac_image_width':
if ($image.scale_proportion_locked) {
var image_height = Math.round($image.height() * value / $image.width());
$image.height(image_height);
- this.notify('image_height', image_height);
+ this.notify('jrac_image_height', image_height);
}
$image.width(value);
$zoom_widget.slider('value', value);
break;
- case 'image_height':
+ case 'jrac_image_height':
if ($image.scale_proportion_locked) {
var image_width = Math.round($image.width() * value / $image.height());
$image.width(image_width);
- this.notify('image_width', image_width);
+ this.notify('jrac_image_width', image_width);
$zoom_widget.slider('value', image_width);
}
$image.height(value);

3 comments on commit 588a657

@manaya

Great plugin! I have a question, is it possible to resize only the width of the viewport?

@trepmag
Owner

Probably, if jquery ui resizable interaction can then it shouldn't be hard to add this to jrac viewport.

@XORwell

good work! great plugin!

Please sign in to comment.
Something went wrong with that request. Please try again.