☰

OutOfMilk.com Shopping List Enhancements

Collection of HTML/CSS enhancements for various bugs and/or shortcomings of the Shopping Lists page (/ShoppingList.aspx)

当前为 2016-05-06 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          OutOfMilk.com Shopping List Enhancements
  3. // @version       0.2.2
  4. // @description   Collection of HTML/CSS enhancements for various bugs and/or shortcomings of the Shopping Lists page (/ShoppingList.aspx)
  5. // @namespace     https://greasyfork.org/en/users/15562
  6. // @author        Jonathan Brochu (https://greasyfork.org/en/users/15562)
  7. // @license       GPLv3 or later (http://www.gnu.org/licenses/gpl-3.0.en.html)
  8. // @include       http://outofmilk.com/ShoppingList.aspx*
  9. // @include       http://www.outofmilk.com/ShoppingList.aspx*
  10. // @include       https://outofmilk.com/ShoppingList.aspx*
  11. // @include       https://www.outofmilk.com/ShoppingList.aspx*
  12. // @grant         GM_addStyle
  13. // ==/UserScript==
  14.  
  15. /***
  16.  * History:
  17.  *
  18.  * 0.2.2  Change made:
  19.  *        - For the fix around the "Tax Free" checkbox of the "Edit Product
  20.  *          History" dialog, a jQuery function call was failing so we're now
  21.  *          using its DOM native equivalent.
  22.  *        (2016-05-06)
  23.  * 0.2.1  Changes made:
  24.  *        - Fixed the always-unchecked "Tax Free" checkbox for the dialog
  25.  *          "Edit Product History".
  26.  *        - Updated element id for the "Description" field of the dialog
  27.  *          "Edit Product History".
  28.  *        (2016-01-24)
  29.  * 0.2.0  Changes made:
  30.  *        - Updated the "producthistory-template" template to match column
  31.  *          names recently added by outofmilk.com, while at the same time
  32.  *          disabling the CSS code previously used to display custom column
  33.  *          headers.
  34.  *        - Updated the "producthistory-template" template so that, like the
  35.  *          original one, "Yes" & "No" are used as values for the "Tax Free?"
  36.  *          column instead of "true" & "false".
  37.  *        - Fixed the non-working "Tax Free" checkbox and empty "How Much?"
  38.  *          dropdown list for dialog "shoppingeditpopup".
  39.  *        - Fixed the URL used for the "icon-taxfree.png" image whenever
  40.  *          adding or editing an item that is tax free.
  41.  *        (2015-09-17)
  42.  * 0.1.7  Changes made:
  43.  *        - Updated script for use with the repository [greasyfork.org].
  44.  *        - No change made to the code.
  45.  *        (2015-09-14)
  46.  * 0.1.6  Changes made:
  47.  *        - Kept being annoyed that everytime I added/changed a UPC from the
  48.  *          product history it wouldn't update, so now I re-implement method
  49.  *          saveProductHistory() (from "ProductManagement.js?v=...") with the
  50.  *          added tweaks (after all, I'm the one adding the column). Also,
  51.  *          updated the producthistory template with a new class for that
  52.  *          column.
  53.  *          NOTE: I'll have to watch out for any updates/changes to the site
  54.  *                as I replace the whole function, since obviously I cannot
  55.  *                just patch the existing code. Oh, wait...
  56.  *          NODO: I know they say "eval() is evil()", but what if I'd say the
  57.  *                words "toString()", "String.replace()" and "eval()" in that
  58.  *                particular order... OK, I'll leave that hanging in the air.
  59.  *        - Took the opportunity to fix the call that sets the initial width
  60.  *          of the "Product History Management" dialog, which was failing with
  61.  *          errors of the sort "Permission denied to access property".
  62.  *        (2015-06-30)
  63.  * 0.1.5  Change made:
  64.  *        - Added outofmilk.com as a possible domain for include URLs.
  65.  *        (2015-04-02)
  66.  * 0.1.4  Changes made:
  67.  *        - Changed how the initial width of the "Product History Management"
  68.  *          dialog is set.
  69.  *        - Implemented changes to add a "UPC" column to the product history
  70.  *          table (by changing its jQuery UI dialog template; this is possible
  71.  *          since the web service's "GetAllProductHistoryItems" method already
  72.  *          returns the stored UPC value for each history item).
  73.  *        - Removed keep-alive code since no longer necessary.
  74.  *        (2013-08-19)
  75.  * 0.1.3  Changes made:
  76.  *        - Removed "!important" when setting the (initial) width property of
  77.  *          the "Product History Management" dialog (since the specified width
  78.  *          isn't meant to be permanent).
  79.  *        (2013-04-05)
  80.  * 0.1.2  Changes made:
  81.  *        - Added javascript code to keep the session alive (without the
  82.  *          need to refresh the page).
  83.  *        (2013-04-04)
  84.  * 0.1.1  Changes made:
  85.  *        - Added column names for dialog "Product History Management".
  86.  *        - Changed text alignment for (newly-named) column "Tax Exempt".
  87.  *        (2013-04-04)
  88.  * 0.1.0  First implementation. (2013-04-02)
  89.  *
  90.  */
  91.  
  92. (function() {
  93.     // constants
  94.     var USERSCRIPT_NAME = 'OutOfMilk.com Shopping List Enhancements';
  95.  
  96. /*
  97.  * The Payload
  98.  */
  99.  
  100.     // css definitions
  101.     var css_fixes =
  102.             '@namespace url(http://www.w3.org/1999/xhtml);\n' +
  103.         // Changes & Overrides
  104.             // background overlays for modal dialog with fixed postion
  105.             '.ui-widget-overlay { position: fixed /* original: absolute */ !important ; }\n' +
  106.             // "Product History Management" dialog - increase initial width
  107.             //  '-> now done through javascript
  108.             // //'div[aria-describedby="manageproducthistoryform"] { width: 80% /* original: 600px */ ; }\n' +
  109.             // "Product History Management" dialog - take full parent's width for table within dialog
  110.             'table.producthistory-table { width: 100% /* original: 550px */ !important ; }\n' +
  111.             // "Product History Management" dialog - column headers
  112.             // 2015-09-17: Column headers not needed anymore (done through the template itself)
  113.             ///'table#producthistorytable.table-default > tr:nth-child(1) > th:nth-child(1) > strong:before { ' +
  114.             ///        'content: "Item" /* original: (none specified) */ !important ; }\n' +
  115.             ///'table#producthistorytable.table-default > tr:nth-child(1) > th:nth-child(3) > strong:before { ' +
  116.             ///        'content: "Tax Exempt" /* original: (none specified) */ !important ; }\n' +
  117.             ///'table#producthistorytable.table-default > tr:nth-child(1) > th:nth-child(4) > strong:before { ' +
  118.             ///        'content: "Category" /* original: (none specified) */ !important ; }\n' +
  119.             ///'table#producthistorytable.table-default > tr:nth-child(1) > th:nth-child(5) > strong:before { ' +
  120.             ///        'content: "UPC" /* original: (none specified) */ !important ; }\n' +
  121.             'table#producthistorytable.table-default > tr:nth-child(1) > th:nth-child(6):before { ' +
  122.             ///        'content: "Actions" /* original: (none specified) */ !important ; ' +
  123.                     'text-align: center /* original: left (through inheritance) */ !important ; ' +
  124.                 '}\n' +
  125.             'table#producthistorytable.table-default > tr:nth-child(1) > th:nth-child(5) { ' +
  126.                     'text-align: center /* original: left (through inheritance) */ !important ; ' +
  127.                 '}\n' +
  128.             // "Product History Management" dialog - values for column "Tax Exempt" centered horizontally
  129.             'td.producthistorytaxfree { text-align: center /* original: left (through inheritance) */ !important ; }\n' +
  130.             // "Edit Product History" dialog - wider "Description" field
  131.             '#txtEditProductHistoryDescription { ' +
  132.                     'width: 380px /* original: (none specified) */ !important ; }\n' +
  133.         // <END>
  134.             '';
  135.     
  136.     // new "producthistory-template" template
  137.     var templateProductHistory = function() {
  138. /**HEREDOC
  139.     <script type="producthistory-template">
  140.         <# if(this.dataobjects.length > 0) { #>
  141.             <tr>
  142.                 <th><strong>Description</strong></th>
  143.                 <th><strong>Price</strong></th>
  144.                 <th><strong>Tax Free?</strong></th>
  145.                 <th><strong>Category</strong></th>
  146.                 <th><strong>UPC</strong></th>
  147.                 <th colspan="3">Actions</th>
  148.             </tr>
  149.             <# $.each(this.dataobjects, function(i, object) { #>
  150.             <tr>
  151.                 <td class="producthistoryid hidden"><#= object.ID #></td>
  152.                 <td>
  153.                     <span class="producthistorydescription"><#= trimDescription(object.Description,60,"<acronym title=\"" + object.Description + "\">...</acronym>") #></span>
  154.                 </td>
  155.                 <td class="producthistoryprice">
  156.                     <span><#= FormatNumberCurrency(object.Price) #></span>
  157.                 </td>
  158.                 <td class="producthistorytaxfree">
  159.                     <span>
  160.                         <# if (object.TaxFree) { #>
  161.                         Yes
  162.                         <# } else { #>
  163.                         No
  164.                         <# } #>
  165.                     </span>
  166.                 </td>
  167.                 <td class="producthistorycategory">
  168.                     <span><#= object.CategoryName #></span>
  169.                 </td>
  170.                 <td class="producthistoryupc">
  171.                     <span><#= object.UPC #></span>
  172.                 </td>
  173.                 <td>
  174.                     <a href="javascript:void(0);" class="btn-default addproducthistory"><span>Add To List</span></a>
  175.                 </td>
  176.                 <td>
  177.                     <a href="javascript:void(0);" class="btn-default editproducthistory"><span>Edit</span></a>
  178.                 </td>
  179.                 <td class="last-column">
  180.                     <a href="javascript:void(0);" class="btn-default deleteproducthistory"><span>Delete</span></a>
  181.                 </td>
  182.             </tr>
  183.             <# }); #>
  184.         <# } else { #>
  185.             <tr>
  186.                 <td colspan="5">There are no items to display</td>
  187.             </tr>
  188.         <# } #>
  189.     </script>
  190. HEREDOC**/
  191.     };
  192.     
  193.     // new implementation of saveProductHistory()
  194.     var mySaveProductHistory = function($this) {
  195.         if(validateProductHistoryForm()){
  196.             var ID = $(".editproducthistoryid").html();
  197.             var description = $(".editproducthistorydescription").val();
  198.             var price = $(".editproducthistoryprice").val();
  199.             var taxfree = $(".editproducthistorytaxfree input").is(":checked");
  200.             var upc = $(".editproducthistoryupc").val();
  201.  
  202.             var Params = { "ID": ID, "description":description, "price": price, "upc":upc, "taxfree": taxfree };
  203.             var jQueryParams = JSON.stringify(Params);
  204.  
  205.             $.ajax({
  206.                 type: "POST",
  207.                 url: "Services/GenericService.asmx/UpdateProductHistoryItem",
  208.                 data: jQueryParams,
  209.                 contentType: "application/json; charset=utf-8",
  210.                 dataType: "json",
  211.                 success: function (msg) {
  212.                     if(msg.d == false){
  213.                             $(".producthistoryitemvalidation").html("An item already exists with this description and price!");
  214.                     } else {
  215.                         var $element = $(".producthistoryid:contains("+ID+")").parents("tr");
  216.                         $element.find(".producthistorydescription").html(description);
  217.                         $element.find(".producthistoryprice").html(FormatNumberCurrency(price));
  218.     /* added --> */     $element.find(".producthistoryupc").html(upc);
  219.                         if(taxfree) {
  220.                             $element.find(".producthistorytaxfree").html("Yes");
  221.                         } else {
  222.                             $element.find(".producthistorytaxfree").html("No");
  223.                         }          
  224.  
  225.                         $this.dialog("close");
  226.                     }
  227.                 },
  228.                 failure: function (msg) {
  229.                 }
  230.             });
  231.         }
  232.     };
  233.     // of course, I could also do something like:
  234.     /*
  235.         eval('var mySaveProductHistory = ' +
  236.             unsafeWindow.saveProductHistory.toString().replace(/(html\(FormatNumberCurrency\(price\)\);)/, '$1\n$$element.find(".producthistoryupc").html(upc);')
  237.         );
  238.     */
  239.     // but, would blindly patching code be actually better than
  240.     //   replacing a whole function? Yeah, I thought so.
  241.  
  242.     // 2015-09-17: fix for the "Tax Free" checkbox not working in the "shoppingeditpopup" dialog
  243.     var shoppingeditpopup_fix1 = function() {
  244.         // find the "Tax Free" checkbox and its <div> container
  245.         var $element = $(".shoppingeditpopup"),
  246.             taxfree = $element.find("input#checkbox1"),
  247.             taxfreeParentDiv = taxfree.parent();
  248.         // add the missing "taxfree" class, such that in method
  249.         // ShoppingEngine.updateShoppingItem() the line:
  250.         // ---
  251.         // var taxfree = $element.find(".taxfree input").is(":checked");
  252.         // ---
  253.         // works properly
  254.         taxfreeParentDiv.addClass('taxfree');
  255.     };
  256.     // 2015-09-17: fix for the empty <select> element in the "shoppingeditpopup" dialog
  257.     var shoppingeditpopup_fix2 = function() {
  258.         // find the "How Much?" <select> element for units (removing any children in the process)
  259.         var $element = $(".shoppingeditpopup"),
  260.             editUnits = $element.find("select#drpUnitsEdit").find("option").remove().end(),
  261.             itemUnitOptions = $(".shoppinglistitem").find("select.itemunit").find("option");
  262.         // copy the options for the "shoppinglistitem" dialog
  263.         $.each(itemUnitOptions, function() {
  264.             editUnits.append($("<option />").val($(this).val()).text($(this).text()));
  265.         });
  266.     };
  267.     // 2015-09-17: methods ShoppingEngine.addShoppingItem() & ShoppingEngine.updateShoppingItem()
  268.     //             don't use proper links for "icon-taxfree.png"; fix that
  269.     var iconTaxFreeURLs_fix = function() {
  270.         // patch using .toString() & eval()
  271.         $.each(['addShoppingItem', 'updateShoppingItem'], function() {
  272.             eval("ShoppingEngine." + this + " = " + ShoppingEngine[this].toString().replace("src='Images/icon-taxfree.png", "src='\"+ STATIC_URL +\"images/icon-taxfree.png'"));
  273.         });
  274.     };
  275.     // 2016-01-24: fix for the missing "producthistorytaxfree" class in the "editproducthistoryform" dialog
  276.     var editproducthistory_fix1 = function() {
  277.         // find the "Tax Free" <input type="checkbox"> element and its <td> parent
  278.         var taxfree = $("#txtEditProductHistorytaxfree"),
  279.             taxfreeParentTD = taxfree.parent();
  280.         // add the missing "producthistorytaxfree" class, so that the lines
  281.         //   $(".editproducthistorytaxfree input").attr("checked", true);
  282.         //   $(".editproducthistorytaxfree input").attr("checked", false);
  283.         // work as intended
  284.         taxfreeParentTD.addClass('editproducthistorytaxfree');
  285.     };
  286.     // 2016-01-24: fix for the "Tax Free" checkbox being always unchecked in the "editproducthistoryform" dialog
  287.     var editproducthistory_fix2 = function() {
  288.         $(".manageproducts").on("click", function() {
  289.             $(".editproducthistory").off();
  290.             $(".editproducthistory").on("click", function() {
  291.                 var $parent = $(this).parents("tr");
  292.                 var ID = $parent.find(".producthistoryid").html();
  293.                 var description = $parent.find(".producthistorydescription").html();
  294.                 var price = $parent.find(".producthistoryprice").html();
  295.                 var Params = { "ID": ID };
  296.                 var jQueryParams = JSON.stringify(Params);
  297.                 $.growlUI('<img src="' + STATIC_URL + 'images/monster-help.png" />Please Wait...', 'Loading Product History item...');
  298.                 $.ajax({
  299.                     type: "POST",
  300.                     url: "Services/GenericService.asmx/GetProductHistoryItem",
  301.                     data: jQueryParams,
  302.                     contentType: "application/json; charset=utf-8",
  303.                     dataType: "json",
  304.                     success: function (msg) {
  305.                         $(".editproducthistorydescription").val(msg.d.Description);
  306.                         $(".editproducthistoryprice").val(FormatNumber(msg.d.Price));
  307.                         $(".editproducthistoryid").html(msg.d.ID);
  308.                         $(".editproducthistoryupc").val(msg.d.UPC);
  309.                         $(".editproducthistorytaxfree input").removeAttribute("checked");
  310.                         if (msg.d.TaxFree) {
  311.                             $(".editproducthistorytaxfree input").checked = true;
  312.                         } else {
  313.                             $(".editproducthistorytaxfree input").checked = false;
  314.                         }
  315.                         $("#editproducthistoryform").find('input').keypress(function (e) {
  316.                             if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
  317.                                 $(".ui-dialog[aria-labelledby='ui-dialog-title-editproducthistoryform']").find('.ui-dialog-buttonpane').find('button:first').click();
  318.                                 return false;
  319.                             }
  320.                         });
  321.                         $("#editproducthistoryform").dialog("open");
  322.                     },
  323.                     failure: function (msg) {
  324.                     }
  325.                 });
  326.             });
  327.         });
  328.     };
  329.  
  330. /*
  331.  * The Tools
  332.  */
  333.  
  334.     // heredoc parser
  335.     var getHeredoc = function(container, identifier) {
  336.         // **WARNING**: Inputs not filtered (e.g. types, illegal chars within regex, etc.)
  337.         var re = new RegExp("/\\*\\*" + identifier + "[\\n\\r]+[\\s\\S]*?[\\n\\r]+" + identifier + "\\*\\*/", "m");
  338.         var str = container.toString();
  339.         str = re.exec(str).toString();
  340.         str = str.replace(new RegExp("/\\*\\*" + identifier + "[\\n\\r]+",'m'),'').toString();
  341.         return str.replace(new RegExp("[\\n\\r]+" +identifier + "\\*\\*/",'m'),'').toString();
  342.     };
  343.     
  344.     // template substitution
  345.     var replaceDialogTemplate = function(templateName, newContent) {
  346.         var scripts = document.getElementsByTagName('script');
  347.         if (scripts.length > 0) {
  348.             for (var i = 0; i < scripts.length; i++) {
  349.                 if (scripts[i].getAttribute('type') == templateName) {
  350.                     // replace template content
  351.                     scripts[i].innerHTML = newContent.toString().replace(/^[\r\n\s]*<script[^>]*>|<\/script>[\r\n\s]*$/g, '');
  352.                     return;
  353.                 }
  354.             }
  355.         }
  356.     };
  357.     
  358.     // code injection
  359.     var injectCode = function(code){
  360.         var tmpScript = document.createElement('script');
  361.         tmpScript.id = '__iC_script-'+Math.random().toString().slice(2);
  362.         if (arguments.length > 1) {
  363.             tmpScript.id = tmpScript.id + '_' + /[$_a-zA-Z][$_a-zA-Z0-9]*/.exec(arguments[1])[0] || tmpScript.id;
  364.         }
  365.         tmpScript.type = 'text/javascript';
  366.         tmpScript.textContent = (function() {
  367.             return [
  368.                 ';('+(function () {
  369.                     /*code*/
  370.                     var thisScript = document.getElementById('/*scriptId*/');
  371.                     if (thisScript) { thisScript.parentNode.removeChild(thisScript); } // <-- oh no, you didn't!!
  372.                 }).toString()+')();',
  373.                 { k: 'code', v: (typeof(code) == 'string' && code.trim().length > 0 ? code : '/*failed*/') },
  374.                 { k: 'scriptId', v: tmpScript.id }
  375.             ].reduce(function(base, mapping){
  376.                 return base.replace('/*'+mapping.k+'*/', mapping.v);
  377.              });
  378.         })();
  379.         document.head.appendChild(tmpScript);
  380.     };
  381.     var injectFuncCode = function(func){
  382.         if (typeof(func) !== 'function') return;
  383.         if (arguments.length > 1) {
  384.             injectCode('('+func.toString()+')();', arguments[1]);
  385.         } else {
  386.             injectCode('('+func.toString()+')();');
  387.         }
  388.     };
  389.     
  390.     // code injection, specialized
  391.     var replaceUnsafeFunc = function(targetName, newFuncImpl){
  392.         // inspiration: https://greasyfork.org/en/scripts/2599-gm-2-port-function-override-helper/code
  393.         var tmpScript = document.createElement('script');
  394.         tmpScript.id = '__rUF_script-'+Math.random().toString().slice(2);
  395.         if (arguments.length > 2) {
  396.             tmpScript.id = tmpScript.id + '_' + /[$_a-zA-Z][$_a-zA-Z0-9]*/.exec(arguments[2])[0] || tmpScript.id;
  397.         }
  398.         tmpScript.type = 'text/javascript';
  399.         tmpScript.textContent = (function() {
  400.             return [
  401.                 ';('+(function () {
  402.                     window/*target*/ = /*newFunc*/window;
  403.                     var thisScript = document.getElementById('/*scriptId*/');
  404.                     if (thisScript) { thisScript.parentNode.removeChild(thisScript); } // <-- oh no, you didn't!!
  405.                 }).toString()+')();',
  406.                 { k: 'target',   v: '.'+(typeof(targetName) == 'string' && targetName.trim().length > 0 ? targetName : '_void') },
  407.                 { k: 'newFunc',  v: (typeof(newFuncImpl) == 'function' ? newFuncImpl : function(){}).toString()+';//' },
  408.                 { k: 'scriptId', v: tmpScript.id }
  409.             ].reduce(function(base, mapping){
  410.                 return base.replace('/*'+mapping.k+'*/', mapping.v);
  411.              });
  412.         })();
  413.         document.head.appendChild(tmpScript);
  414.     };
  415.     
  416.     // reference some outside objects
  417.     window.console = window.console || (function() {
  418.         if (typeof(unsafeWindow) == 'undefined') return { 'log': function() {} };
  419.         return unsafeWindow.console;
  420.     })();
  421.     
  422.     // self-explanatory
  423.     document.addStyle = function(css) {
  424.         if (typeof(GM_addStyle) != 'undefined') {
  425.             GM_addStyle(css);
  426.         } else {  
  427.             var heads = this.getElementsByTagName('head');
  428.             if (heads.length > 0) {
  429.                 var node = this.createElement('style');
  430.                 node.type = 'text/css';
  431.                 node.appendChild(this.createTextNode(css));
  432.                 heads[0].appendChild(node); 
  433.             }
  434.         }
  435.     };
  436.  
  437. /*
  438.  * The Action
  439.  */
  440.  
  441.     // css injection
  442.     document.addStyle(css_fixes);
  443.     
  444.     // javascript patching
  445.     try {
  446.         // replace template "producthistory-template"
  447.         replaceDialogTemplate('producthistory-template', getHeredoc(templateProductHistory, 'HEREDOC'));
  448.         
  449.         // replace saveProductHistory()
  450.         replaceUnsafeFunc('saveProductHistory', mySaveProductHistory, 'mySaveProductHistory');
  451.         
  452.         // set initial width of "Product History Management" dialog
  453.         replaceUnsafeFunc('onload', function(){ $("#manageproducthistoryform").dialog("option", "width", "80%"); }, 'onload');
  454.         
  455.         // 2015-09-17: fixes for the "shoppingeditpopup" dialog
  456.         injectFuncCode(shoppingeditpopup_fix1, 'shoppingeditpopup_fix1');
  457.         injectFuncCode(shoppingeditpopup_fix2, 'shoppingeditpopup_fix2');
  458.         
  459.         // 2016-01-24: fixes for the "editproducthistoryform" dialog
  460.         injectFuncCode(editproducthistory_fix1, 'editproducthistory_fix1');
  461.         injectFuncCode(editproducthistory_fix2, 'editproducthistory_fix2');
  462.         
  463.         // 2015-09-17: fixes for "icon-taxfree.png" URLs
  464.         injectFuncCode(iconTaxFreeURLs_fix, 'iconTaxFreeURLs_fix');
  465.     } catch(err) {
  466.         console.log(err);
  467.     }
  468.  
  469. /*
  470.  * The End
  471.  */
  472.  
  473.     console.log('User script "' + USERSCRIPT_NAME + '" has completed.');
  474. })();