Kovalsky

// white_like_thresold - minimal accepted value of color/white rate, colors that has higher rate is treated as white
// min_transparency - minimal accepted transparency (alpha), colors that has lesser transparency is treated as transparent

(function() {
	const rgb_max_intens_sum = 255 + 255 + 255;

	RegExp.integers = /\d+(\.\d+)?/g;

	var accepted_tags = ['article','aside','footer','header','hgroup','nav','section','div','main','pre','table','form'],
		white_like_thresold = 0.9, 
		min_transparency = 0.3,
		bg_color = '#fafbfc',
		$$result_collection = [];

	collectElements();
	setColor();

	function collectElements() {
		var background_color_key = 'background-color',
			rgba,
			color,
			collections = {},
			$$all = document.querySelectorAll(accepted_tags.join(','))

		for (var l = $$all.length, i = 0; i < l; i++) {
			color = getComputedStyle($$all[i])[ background_color_key ];
			if (!(color in collections)) {
				collections[ color ] = [];
			}
			collections[ color ].push( $$all[i] );
		}

		for (color in collections) {
			rgba = color.match( RegExp.integers ).map(Number);
			if ((rgba.length === 4 && rgba[3] < min_transparency) || (rgba[0]+rgba[1]+rgba[2])/rgb_max_intens_sum <= white_like_thresold) {
				continue;
			} else {
				$$result_collection = $$result_collection.concat( collections[color] );
			}
		}
	}
	function setColor() {
		var i = $$result_collection.length,
			$el;

		while (i--) {
			$el = $$result_collection[i];
			if (!$el._old_style) {
				$el._old_style = {
					backgroundColor: $el.style.backgroundColor
				};
			}
		    $el.style.backgroundColor = bg_color;
		}
	}
})();

var $ = jQuery;

$(function(){
  var $goods_list = $('ul.goods__list'),
      model = {
        data: JSON.parse(localStorage.getItem('g_zakazi')) || {
          title: 'Welcome',
          //juzer_id: $('#juzer-id').text(),
          subtotal: 0,
          zakazi: []
        },
        controller: controller
      };

  rivets.bind(document.querySelector('#rivetsSpace'), model);

  $('.goods__pagination').on('click', '.goods__page', function(){

    console.log('Клик по пагинации');
    var data = { id: $(this).text() };

        $.ajax({
            url: '/demo.php',
            type: 'POST',
            data: data,
            success: function (html) {
                //console.log(data);
                $goods_list.empty().append(html);
                rivets.bind($goods_list, model);
                toTopAfterAjaxUpdatePagination();
            }
        });
  });

});

function returnFalse(){
  console.log('Выходим');
  return false;
}

var controller = {

  onAtbClick: function(e, model) {
       var ID = $(this).data("id");

          var goods = model.data.zakazi.filter(function (goods) {
                  return goods.ID === ID;
          })[0];

          if (goods) {
              goods.quantity++;
              returnFalse();

          } else {

            model.data.zakazi.push({
                  ID: ID,
                  quantity: 1

                });
          }

		model.controller.updatePrice(model.data);
		model.controller.saveData(model.data);

   },

   updatePrice: function(data) {
    var zakazi = data.zakazi,
      product,
      subtotal = 0;

    data.subtotal = subtotal;

  },

   removeGoods: function(e, model) {

        e.stopImmediatePropagation();

        var index = model.index,
            zakazi = model.data.zakazi;

      zakazi.splice(index, 1);
      model.controller.saveData(model.data);

    },
	
   saveData: function(data) {
    localStorage.setItem( 'g_zakazi', JSON.stringify( data ) );
   }
}

function toTopAfterAjaxUpdatePagination() {
  var scrollGoods = $('section.goods').offset().top;
  $(document).scrollTop(scrollGoods - 50);
}



rivets.formatters.length = function(val) {
  return val.length;
};

window.items = [
	{ id: 1 },
	{ id: 2 },
	{ id: 3 },
	...
]

model.$goods_list.append( controller.processGoods(window.items, model) );
...
var controller = {
    processGoods: function(data, model) {
      var elements = new Array(data.length),
          temp_fragment = document.createDocumentFragment();

      for (var i = 0; i < data.length; i++) {
        elements[ i ] = model.controller.createElementFromTemplate('goods__item', model);
        rivets.bind(elements[i], Object.assign({ item: data[i] }, model));
        temp_fragment.appendChild( elements[ i ] );
      }

      return temp_fragment;
    },
    createElementFromTemplate: function(item, model) {
      return document.importNode(model.templates[ item ].content.children[0], true);
    },
    ...
}

$('.goods__pagination').on('click', '.goods__page', function() {
    var data = {
        id: $(this).text()
    };
    $.ajax({
        url: '/demo.php',
        type: 'POST',
        data: data,
        dataType: 'json',
        success: function(data) {
            model.$goods_list.empty().append( controller.processGoods(data, model) );
            toTopAfterAjaxUpdatePagination();
        }
    });
});

CKEDITOR.replace( 'editor1', {
		// Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
		// The full preset from CDN which we used as a base provides more features than we need.
		// Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row.
		toolbar: [
			{ name: 'document', items: [ 'Print' ] },
			{ name: 'clipboard', items: [ 'Undo', 'Redo' ] },
			{ name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
			{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting' ] },
			{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
			{ name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
			{ name: 'links', items: [ 'Link', 'Unlink' ] },
			{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
			{ name: 'insert', items: [ 'Image', 'Table' ] },
			{ name: 'tools', items: [ 'Maximize' ] },
			{ name: 'editing', items: [ 'Scayt' ] }
		],
		// Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
		// One HTTP request less will result in a faster startup time.
		// For more information check http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-customConfig
		customConfig: '',
		// Sometimes applications that convert HTML to PDF prefer setting image width through attributes instead of CSS styles.
		// For more information check:
		//  - About Advanced Content Filter: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
		//  - About Disallowed Content: http://docs.ckeditor.com/#!/guide/dev_disallowed_content
		//  - About Allowed Content: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
		disallowedContent: 'img{width,height,float}',
		extraAllowedContent: 'img[width,height,align]',
		// Enabling extra plugins, available in the full-all preset: http://ckeditor.com/presets-all
		extraPlugins: 'tableresize,uploadimage,uploadfile',
		/*********************** File management support ***********************/
		// In order to turn on support for file uploads, CKEditor has to be configured to use some server side
		// solution with file upload/management capabilities, like for example CKFinder.
		// For more information see http://docs.ckeditor.com/#!/guide/dev_ckfinder_integration
		// Uncomment and correct these lines after you setup your local CKFinder instance.
		// filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
		// filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
		/*********************** File management support ***********************/
		// Make the editing area bigger than default.
		height: 800,
		// An array of stylesheets to style the WYSIWYG area.
		// Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
		contentsCss: [ 'https://cdn.ckeditor.com/4.6.1/full-all/contents.css', 'mystyles.css' ],
		// This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
		bodyClass: 'document-editor',
		// Reduce the list of block elements listed in the Format dropdown to the most commonly used.
		format_tags: 'p;h1;h2;h3;pre',
		// Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
		removeDialogTabs: 'image:advanced;link:advanced',
		// Define the list of styles which should be available in the Styles dropdown list.
		// If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
		// (and on your website so that it rendered in the same way).
		// Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
		// that file, which means one HTTP request less (and a faster startup).
		// For more information see http://docs.ckeditor.com/#!/guide/dev_styles
		stylesSet: [
			/* Inline Styles */
			{ name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
			{ name: 'Cited Work', element: 'cite' },
			{ name: 'Inline Quotation', element: 'q' },
			/* Object Styles */
			{
				name: 'Special Container',
				element: 'div',
				styles: {
					padding: '5px 10px',
					background: '#eee',
					border: '1px solid #ccc'
				}
			},
			{
				name: 'Compact table',
				element: 'table',
				attributes: {
					cellpadding: '5',
					cellspacing: '0',
					border: '1',
					bordercolor: '#ccc'
				},
				styles: {
					'border-collapse': 'collapse'
				}
			},
			{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
			{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }
		]
	} );