summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/commit/image_file.js
diff options
context:
space:
mode:
authorLuke Bennett <lukeeeebennettplus@gmail.com>2016-10-10 17:09:48 +0100
committerLuke Bennett <lukeeeebennettplus@gmail.com>2016-10-10 17:09:48 +0100
commit0f7cc21e2479762975c4416148105e876c85d8cd (patch)
treee2a08119f8b3e633976d5e2867b99ad59b68e390 /app/assets/javascripts/commit/image_file.js
parent4e963fed42ad518caa7353d361a38a1250c99c41 (diff)
downloadgitlab-ce-0f7cc21e2479762975c4416148105e876c85d8cd.tar.gz
Formatted all app/assets/javascripts to underscore naming convention23118-use-one-style-of-naming-js-files
Diffstat (limited to 'app/assets/javascripts/commit/image_file.js')
-rw-r--r--app/assets/javascripts/commit/image_file.js177
1 files changed, 177 insertions, 0 deletions
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
new file mode 100644
index 00000000000..e893491b19b
--- /dev/null
+++ b/app/assets/javascripts/commit/image_file.js
@@ -0,0 +1,177 @@
+(function() {
+ this.ImageFile = (function() {
+ var prepareFrames;
+
+ // Width where images must fits in, for 2-up this gets divided by 2
+ ImageFile.availWidth = 900;
+
+ ImageFile.viewModes = ['two-up', 'swipe'];
+
+ function ImageFile(file) {
+ this.file = file;
+ this.requestImageInfo($('.two-up.view .frame.deleted img', this.file), (function(_this) {
+ // Determine if old and new file has same dimensions, if not show 'two-up' view
+ return function(deletedWidth, deletedHeight) {
+ return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function(width, height) {
+ if (width === deletedWidth && height === deletedHeight) {
+ return _this.initViewModes();
+ } else {
+ return _this.initView('two-up');
+ }
+ });
+ };
+ })(this));
+ }
+
+ ImageFile.prototype.initViewModes = function() {
+ var viewMode;
+ viewMode = ImageFile.viewModes[0];
+ $('.view-modes', this.file).removeClass('hide');
+ $('.view-modes-menu', this.file).on('click', 'li', (function(_this) {
+ return function(event) {
+ if (!$(event.currentTarget).hasClass('active')) {
+ return _this.activateViewMode(event.currentTarget.className);
+ }
+ };
+ })(this));
+ return this.activateViewMode(viewMode);
+ };
+
+ ImageFile.prototype.activateViewMode = function(viewMode) {
+ $('.view-modes-menu li', this.file).removeClass('active').filter("." + viewMode).addClass('active');
+ return $(".view:visible:not(." + viewMode + ")", this.file).fadeOut(200, (function(_this) {
+ return function() {
+ $(".view." + viewMode, _this.file).fadeIn(200);
+ return _this.initView(viewMode);
+ };
+ })(this));
+ };
+
+ ImageFile.prototype.initView = function(viewMode) {
+ return this.views[viewMode].call(this);
+ };
+
+ prepareFrames = function(view) {
+ var maxHeight, maxWidth;
+ maxWidth = 0;
+ maxHeight = 0;
+ $('.frame', view).each((function(_this) {
+ return function(index, frame) {
+ var height, width;
+ width = $(frame).width();
+ height = $(frame).height();
+ maxWidth = width > maxWidth ? width : maxWidth;
+ return maxHeight = height > maxHeight ? height : maxHeight;
+ };
+ })(this)).css({
+ width: maxWidth,
+ height: maxHeight
+ });
+ return [maxWidth, maxHeight];
+ };
+
+ ImageFile.prototype.views = {
+ 'two-up': function() {
+ return $('.two-up.view .wrap', this.file).each((function(_this) {
+ return function(index, wrap) {
+ $('img', wrap).each(function() {
+ var currentWidth;
+ currentWidth = $(this).width();
+ if (currentWidth > ImageFile.availWidth / 2) {
+ return $(this).width(ImageFile.availWidth / 2);
+ }
+ });
+ return _this.requestImageInfo($('img', wrap), function(width, height) {
+ $('.image-info .meta-width', wrap).text(width + "px");
+ $('.image-info .meta-height', wrap).text(height + "px");
+ return $('.image-info', wrap).removeClass('hide');
+ });
+ };
+ })(this));
+ },
+ 'swipe': function() {
+ var maxHeight, maxWidth;
+ maxWidth = 0;
+ maxHeight = 0;
+ return $('.swipe.view', this.file).each((function(_this) {
+ return function(index, view) {
+ var ref;
+ ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+ $('.swipe-frame', view).css({
+ width: maxWidth + 16,
+ height: maxHeight + 28
+ });
+ $('.swipe-wrap', view).css({
+ width: maxWidth + 1,
+ height: maxHeight + 2
+ });
+ return $('.swipe-bar', view).css({
+ left: 0
+ }).draggable({
+ axis: 'x',
+ containment: 'parent',
+ drag: function(event) {
+ return $('.swipe-wrap', view).width((maxWidth + 1) - $(this).position().left);
+ },
+ stop: function(event) {
+ return $('.swipe-wrap', view).width((maxWidth + 1) - $(this).position().left);
+ }
+ });
+ };
+ })(this));
+ },
+ 'onion-skin': function() {
+ var dragTrackWidth, maxHeight, maxWidth;
+ maxWidth = 0;
+ maxHeight = 0;
+ dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
+ return $('.onion-skin.view', this.file).each((function(_this) {
+ return function(index, view) {
+ var ref;
+ ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+ $('.onion-skin-frame', view).css({
+ width: maxWidth + 16,
+ height: maxHeight + 28
+ });
+ $('.swipe-wrap', view).css({
+ width: maxWidth + 1,
+ height: maxHeight + 2
+ });
+ return $('.dragger', view).css({
+ left: dragTrackWidth
+ }).draggable({
+ axis: 'x',
+ containment: 'parent',
+ drag: function(event) {
+ return $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth);
+ },
+ stop: function(event) {
+ return $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth);
+ }
+ });
+ };
+ })(this));
+ }
+ };
+
+ ImageFile.prototype.requestImageInfo = function(img, callback) {
+ var domImg;
+ domImg = img.get(0);
+ if (domImg) {
+ if (domImg.complete) {
+ return callback.call(this, domImg.naturalWidth, domImg.naturalHeight);
+ } else {
+ return img.on('load', (function(_this) {
+ return function() {
+ return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight);
+ };
+ })(this));
+ }
+ }
+ };
+
+ return ImageFile;
+
+ })();
+
+}).call(this);