ui_changed 0.0.1

data/app/assets/javascripts/ui_changed/application.js

@@ -0,0 +1,17 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require bootstrap
+//= require ui_changed/screenshots
+//= require_tree .

data/app/assets/javascripts/ui_changed/screenshots.js

@@ -0,0 +1,280 @@
+if (typeof(Screenshots) === 'undefined') {
+  Screenshots = {
+    _initialized: false,
+    _clicked_urls_row: false,
+    _crawlStatusIntervalId: null,
+
+    _init: function() {
+      if(this._initialized) return;
+
+      $('.crawl_btns .f_crawl_action').not('.f_cancel').click(this._crawl_btns_clicked);
+      $('.crawl_btns .f_crawl_action.f_cancel').click(this._crawl_btn_cancel_clicked);
+      $('.crawling .urls').on('click', 'li:not(.active)', this._crawling_urls_clicked);
+
+      $("#f_checkall").change(this._checkall_master_change);
+      $(".f_checkall_child").change(this._checkall_child_change);
+      $('table.screenshots.diffs tbody tr').click(this._diffs_row_clicked);
+
+      $(".f_actions .f_remove").click(this._actions_remove);
+      $(".f_actions .f_remove_test_and_diff").click(this._actions_remove_test_and_diff);
+      $(".f_actions .f_ignore").click(this._actions_ignore);
+      $(".f_actions .f_set_test_as_control").click(this._actions_set_test_as_control);
+
+      $(".f_bulk_actions .f_remove_all_diffs_and_tests").click(this._bulk_actions_remove_all_diffs_and_tests);
+      $(".f_bulk_actions .f_remove_all").click(this._bulk_actions_remove_all);
+      $(".f_bulk_actions .f_ignore_all_urls").click(this._bulk_actions_ignore_all_urls);
+      $(".f_bulk_actions .f_set_all_tests_as_control").click(this._bulk_actions_set_all_tests_as_control);
+
+      if ($('.f_cancel').is(':visible')) $('.crawl_btns button').not('.f_cancel').attr("disabled", "disabled");
+
+      if ($('.f_on_home_page').val() === "true") this._update_crawl_status();
+
+      this._disable_action_buttons();
+      this._initialized = true;
+    },
+
+    /* individual actions */
+    _actions_remove: function() {
+      Screenshots._ajax_with_type($('.f_remove_url').val() + Screenshots._get_checked_ids(), "DELETE");
+    },
+    _actions_remove_test_and_diff: function() {
+      Screenshots._ajax_with_type($(this).attr("data-href") + "?id=" + Screenshots._get_checked_ids(), "DELETE");
+    },
+    _actions_ignore: function() {
+      Screenshots._ajax_with_type("/ui_changed/screenshot_ignore_urls/add?id=" + Screenshots._get_checked_ids(), "POST");
+    },
+    _actions_set_test_as_control: function() {
+      Screenshots._ajax_with_type($('.f_set_test_as_control_url').val() + '?id=' + Screenshots._get_checked_ids(), "POST");
+    },
+
+    /* bulk actions */
+    _bulk_actions_remove_all_diffs_and_tests: function() {
+      Screenshots._ajax_with_type($(this).attr("data-href"), "DELETE");
+    },
+    _bulk_actions_remove_all: function() {
+      Screenshots._ajax_with_type($(this).attr("data-href"), "DELETE");
+    },
+    _bulk_actions_ignore_all_urls: function() {
+      Screenshots._ajax_with_type($(this).attr("data-href"), "POST");
+    },
+    _bulk_actions_set_all_tests_as_control: function() {
+      Screenshots._ajax_with_type($(this).attr("data-href"), "POST");
+    },
+
+    _crawl_btns_clicked: function() {
+      $('.crawl_btns button').not('.f_cancel').attr("disabled", "disabled");
+      $('.crawl_btns .f_cancel').show();
+
+      $.ajax({
+        url: $(this).attr('data-action'),
+        type: 'POST',
+        success: function(data) {
+          $('.crawling .urls li').remove();
+          Screenshots._update_crawl_status();
+        }
+      });
+    },
+
+    _crawl_btn_cancel_clicked: function() {
+      $(this).attr("disabled", "disabled");
+      $.ajax({
+        url: $(this).attr('data-action'),
+        type: 'POST'
+      });
+    },
+
+    _crawling_urls_clicked: function() {
+      var elem = $(this);
+      if (elem.prev().length === 0) {
+        // reset our boolean
+        Screenshots._clicked_urls_row = false;
+        $('.crawling .urls li').removeClass('active');
+        elem.addClass('active');
+      } else {
+        Screenshots._clicked_urls_row = true;
+      }
+
+      var anchor = elem.find('a');
+      if (typeof anchor.attr('data-alt') === 'undefined') return;
+      $('.crawling .urls li').removeClass('active');
+      elem.addClass('active');
+
+      var is_compare = anchor.find('i.diff_found, i.no_diff_found').length === 1;
+      var diff_found = anchor.find('i.diff_found').length === 1;
+
+      Screenshots._add_crawl_image_with_src({
+        'file_name': anchor.attr('data-alt'),
+        'src':anchor.attr('data-src'),
+        'crawl_url': anchor.attr('href'),
+        'is_compare': is_compare,
+        'diff_found': diff_found});
+    },
+
+    _update_crawl_status: function() {
+      $.ajax({
+        dataType: "json",
+        url: "screenshots/crawl_status.json",
+        success: function(data) {
+          var screenshots = data[0].screenshots;
+          var running_status = data[0].worker.running_status;
+          var first_status = data[0].worker.first_status;
+          var running_type = data[0].worker.running_type;
+          $('.crawl_btns .f_crawl_action').removeClass('running');
+          $('.crawl_btns .f_crawl_action[data-type="'+running_type+'"]').addClass('running');
+          $('.crawling a.last_img img').removeAttr("src");
+          $('.crawling a.last_img img').removeAttr("alt");
+
+          $('.f_sidenav_diffs span:last').text(data[0].counts.diff);
+          $('.f_sidenav_controls span:last').text(data[0].counts.control);
+          $('.f_sidenav_tests span:last').text(data[0].counts.test);
+          $('.f_sidenav_compares span:last').text(data[0].counts.compare);
+
+          for (var i=0; i < screenshots.length; i++) {
+            Screenshots._add_crawl_url(screenshots[i]);
+          }
+          if (screenshots.length > 0 && !Screenshots._clicked_urls_row) {
+            /* if the user isn't looking at other rows, then show the most recent image */
+            Screenshots._show_top_most_image();
+          }
+
+//          $('.cmd_status_msg').text('running: ' + running_status + ' first: ' + first_status);
+          clearInterval(Screenshots._crawlStatusIntervalId);
+          if (running_status === "working" || (first_status === "working" || first_status === "queued")) {
+            Screenshots._crawlStatusIntervalId = setInterval(Screenshots._update_crawl_status, 3000);
+            return;
+          }
+          $('.crawl_btns button').removeAttr("disabled");
+          $('.crawl_btns .f_cancel').hide();
+        }
+      });
+    },
+
+    _show_top_most_image: function() {
+      $('.crawling .urls li').each(function() {
+        var elem = $(this);
+        var anchor = elem.find('a');
+        if (anchor.hasClass('active')) return;
+        var src = anchor.attr('data-src');
+        if (typeof src !== 'undefined') {
+          Screenshots._add_crawl_image_with_src({
+            'file_name': anchor.attr('data-alt'),
+            'src': src,
+            'crawl_url': anchor.attr('data-href'),
+            'is_compare': anchor.attr('data-type') === 'compare',
+            'diff_found': anchor.find('i').hasClass('diff_found')});
+          return false;
+        }
+      });
+    },
+
+    _add_crawl_url: function(screenshot) {
+      if (screenshot.url === null) return;
+
+      if ($('.crawling .urls li').length > 100) {
+        $('.crawling .urls').empty();
+      }
+
+      var type = "test";
+      var diff_class = "";
+      if (screenshot.is_control === true) {
+        type = "control";
+      } else if (screenshot.is_compare === true) {
+        diff_class = screenshot.diff_found === true ? " diff_found" : " no_diff_found";
+        type = "compare";
+      }
+
+      var file_name = screenshot.image_file_name;
+      var src;
+      var icon_class;
+      if (file_name !== null) {
+        src = screenshot.displayable_image_path_full;
+        icon_class = 'icon-picture' + diff_class;
+      } else {
+        icon_class = 'icon-';
+      }
+
+      var existing_selector = '.crawling .urls li a[data-href="'+screenshot.url+'"][data-type="' + type + '"]';
+      var existing = $(existing_selector);
+      if (existing.length === 0) {
+        $('.crawling .urls').prepend('<li><a data-type="' + type + '" data-href="' + screenshot.url + '"><i></i><span>' + type + ' : ' + screenshot.url + '</span></a></li>');
+        existing = $(existing_selector);
+      }
+      if (typeof existing.attr('data-alt') === 'undefined' && src !== null) {
+        existing.find('i').attr('class', icon_class);
+        existing.attr('data-alt', file_name);
+        existing.attr('data-src', src);
+      }
+    },
+
+    _add_crawl_image_with_src: function(params) {
+      // don't replace the image with itself
+      var existing_img = $('.crawling a.last_img img[src="'+params.src+'"]').length;
+      if (existing_img > 0) return;
+
+      if (params.is_compare) {
+        if (params.diff_found === null || params.diff_found === false) {
+          $('.crawling a.last_img .no_diff_found').show();
+          $('.crawling a.last_img .diff_found').hide();
+          $('.crawling a.last_img img').hide();
+        } else {
+          $('.crawling a.last_img .no_diff_found').hide();
+          $('.crawling a.last_img .diff_found').show();
+          $('.crawling a.last_img img').show();
+        }
+      } else {
+        $('.crawling a.last_img .no_diff_found').hide();
+        $('.crawling a.last_img .diff_found').hide();
+        $('.crawling a.last_img img').show();
+      }
+      $('.crawling a.last_img').attr('href', params.src);
+      $('.crawling a.last_img img').attr('alt', params.file_name);
+      $('.crawling a.last_img img').attr('src', params.src);
+
+      if (Screenshots._clicked_urls_row) return;
+      $('.crawling .urls li').removeClass('active');
+      $('.crawling .urls li a[data-href="'+params.crawl_url+'"]').parent('li').addClass('active');
+    },
+
+    _checkall_master_change: function() {
+      $(".f_checkall_child").prop("checked", this.checked);
+      Screenshots._disable_action_buttons();
+    },
+    _checkall_child_change: function() {
+      $("#f_checkall").prop("checked", $(".f_checkall_child:checked").length == $(".f_checkall_child").length);
+      Screenshots._disable_action_buttons();
+    },
+    _diffs_row_clicked: function(e) {
+      if (e.target.type === 'checkbox') return;
+      document.location = $(this).find('.diff_url').val();
+    },
+
+    _disable_action_buttons: function() {
+      $(".f_actions button").attr("disabled", $(".f_checkall_child:checked").length === 0);
+    },
+    _ajax_with_type: function(url, type) {
+      $.ajax({
+        url: url,
+        type: type,
+        success: function() {
+          location.reload();
+        }
+      });
+    },
+    _get_checked_ids: function() {
+      var ids_array = [];
+      $('.screenshots tbody tr').each(function() {
+        var row = $(this);
+        if (!row.find('td:first input[type=checkbox]:not(:checked)').length) {
+          var diff_id = row.find('input.f_id').first().val();
+          ids_array.push(diff_id);
+        }
+      });
+      return ids_array.join(",");
+    }
+
+  };
+}
+
+$(function() {
+  Screenshots._init();
+});

data/app/assets/stylesheets/scaffold.css

@@ -0,0 +1,56 @@
+body { background-color: #fff; color: #333; }
+
+body, p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size:   13px;
+  line-height: 18px;
+}
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px;
+}
+
+a { color: #000; }
+a:visited { color: #666; }
+a:hover { color: #fff; background-color:#000; }
+
+div.field, div.actions {
+  margin-bottom: 10px;
+}
+
+#notice {
+  color: green;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+}
+
+#error_explanation h2 {
+  text-align: left;
+  font-weight: bold;
+  padding: 5px 5px 5px 15px;
+  font-size: 12px;
+  margin: -7px;
+  margin-bottom: 0px;
+  background-color: #c00;
+  color: #fff;
+}
+
+#error_explanation ul li {
+  font-size: 12px;
+  list-style: square;
+}

data/app/assets/stylesheets/ui_changed/application.css.scss

@@ -0,0 +1,17 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+ */
+
+@import "bootstrap";
+@import "bootstrap-responsive";
+@import "font-awesome";

data/app/assets/stylesheets/ui_changed/screenshot_ignore_urls.css

@@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/

data/app/assets/stylesheets/ui_changed/screenshots.css

@@ -0,0 +1,24 @@
+body {margin-top: 40px;}
+
+.btn-toolbar form, .btn-toolbar form input, .btn-toolbar form button, .btn-toolbar form div {margin-bottom: 0;}
+
+.well {background-color: #FFF;}
+
+.crawl_btns .running {border: 3px solid red;}
+
+.diff_screenshots img, table.screenshots tbody tr td img {border: 1px solid #ccc; padding: 2px;}
+.diff_screenshots img:hover, table.screenshots tbody tr td img:hover {border: 1px solid #000;}
+.diffs tbody tr {cursor: pointer;}
+.diffs tbody tr td input:hover {cursor: default;}
+
+.crawling {margin-top: 5px;}
+.crawling .urls {overflow: scroll;}
+.crawling .last_img, .crawling .urls {float: left; width: 300px; height: 300px; padding: 7px; border: 1px solid #bbb; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 3px;}
+.crawling .urls li {text-align: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 2px 5px;}
+.crawling .urls li.active {background-color: #ddd;}
+.crawling .urls li:hover {cursor: pointer; background-color: #efefef;}
+.crawling .urls li a i.diff_found {color: red;}
+.crawling .urls li a span {margin-left: 3px;}
+.crawling .last_img {overflow: hidden;}
+.crawling .last_img .no_diff_found, .crawling .last_img .diff_found {text-align: center;}
+.crawling .last_img .no_diff_found .icon {font-size: 280px;}

data/app/controllers/ui_changed/application_controller.rb

@@ -0,0 +1,4 @@
+module UiChanged
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/controllers/ui_changed/screenshot_ignore_urls_controller.rb

@@ -0,0 +1,61 @@
+require_dependency "ui_changed/application_controller"
+
+module UiChanged
+  class ScreenshotIgnoreUrlsController < ScreenshotsControllerBase
+
+    def index
+      params[:sort] ||= "url asc"
+      @ignored_urls = UiChanged::ScreenshotIgnoreUrl.search(params[:search]).paginate(:page => params[:page],
+                                                                                      :per_page => params[:per_page],
+                                                                                      :order => params[:sort])
+    end
+
+    def add
+      ids = params[:id].split(",")
+      ids.each do |id|
+        ss = UiChanged::Screenshot.find(id)
+        ss_ignore = UiChanged::ScreenshotIgnoreUrl.find_or_create_by_url(ss.url)
+        ss_ignore.save
+      end
+      head :ok
+    end
+
+    def add_all_controls
+      screenshots = UiChanged::Screenshot.not_in_ignored.where(:is_control => true)
+      screenshots.each do |screenshot|
+        ss_ignore = UiChanged::ScreenshotIgnoreUrl.find_or_create_by_url(screenshot.url)
+        ss_ignore.save
+      end
+      head :ok
+    end
+    def add_all_tests
+      screenshots = UiChanged::Screenshot.not_in_ignored.where(:is_test => true)
+      screenshots.each do |screenshot|
+        ss_ignore = UiChanged::ScreenshotIgnoreUrl.find_or_create_by_url(screenshot.url)
+        ss_ignore.save
+      end
+      head :ok
+    end
+    def add_all_compares
+      UiChanged::Screenshot.not_in_ignored.where(:is_compare => true).each do |screenshot|
+        ss_ignore = UiChanged::ScreenshotIgnoreUrl.find_or_create_by_url(screenshot.url)
+        ss_ignore.save
+      end
+      head :ok
+    end
+
+    def destroy
+      ids = params[:id].split(",")
+      ids.each do |id|
+        ss_ignore = UiChanged::ScreenshotIgnoreUrl.find(id)
+        ss_ignore.destroy
+      end
+      head :ok
+    end
+    def destroy_all
+      UiChanged::ScreenshotIgnoreUrl.delete_all
+      head :ok
+    end
+  end
+
+end