Permalink
Browse files

change all events name by prefixing them with 'jrac_'

  • Loading branch information...
1 parent c110d6a commit 588a657ef7584b996431c8346ed133933ceb8e27 @trepmag committed Mar 14, 2012
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
@@ -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
@@ -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 @@ <h2>Code</h2>
'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 @@ <h2>Code</h2>
}
})
// 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
@@ -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

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

Owner

trepmag replied May 12, 2012

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

good work! great plugin!

Please sign in to comment.