BVB Source Codes

Easy to point the content management system DianCMS v6.0.0 SQL version Show background.js Source code

Return Download Easy to point the content management system DianCMS v6.0.0 SQL version: download background.js Source code - Download Easy to point the content management system DianCMS v6.0.0 SQL version Source code - Type:.js
  1. (function () {
  2.  
  3.     var onlineImage,
  4.         backupStyle = editor.queryCommandValue('background');
  5.  
  6.     window.onload = function () {
  7.         initTabs();
  8.         initColorSelector();
  9.     };
  10.  
  11.     /* 初始化tab标签 */
  12.     function initTabs(){
  13.         var tabs = $G('tabHeads').children;
  14.         for (var i = 0; i < tabs.length; i++) {
  15.             domUtils.on(tabs[i], "click", function (e) {
  16.                 var target = e.target || e.srcElement;
  17.                 for (var j = 0; j < tabs.length; j++) {
  18.                     if(tabs[j] == target){
  19.                         tabs[j].className = "focus";
  20.                         var contentId = tabs[j].getAttribute('data-content-id');
  21.                         $G(contentId).style.display = "block";
  22.                         if(contentId == 'imgManager') {
  23.                             initImagePanel();
  24.                         }
  25.                     }else {
  26.                         tabs[j].className = "";
  27.                         $G(tabs[j].getAttribute('data-content-id')).style.display = "none";
  28.                     }
  29.                 }
  30.             });
  31.         }
  32.     }
  33.  
  34.     /* 初始化颜色设置 */
  35.     function initColorSelector () {
  36.         var obj = editor.queryCommandValue('background');
  37.         if (obj) {
  38.             var color = obj['background-color'],
  39.                 repeat = obj['background-repeat'] || 'repeat',
  40.                 image = obj['background-image'] || '',
  41.                 position = obj['background-position'] || 'center center',
  42.                 pos = position.split(' '),
  43.                 x = parseInt(pos[0]) || 0,
  44.                 y = parseInt(pos[1]) || 0;
  45.  
  46.             if(repeat == 'no-repeat' && (x || y)) repeat = 'self';
  47.  
  48.             image = image.match(/url[\s]*\(([^\)]*)\)/);
  49.             image = image ? image[1]:'';
  50.             updateFormState('colored', color, image, repeat, x, y);
  51.         } else {
  52.             updateFormState();
  53.         }
  54.  
  55.         var updateHandler = function () {
  56.             updateFormState();
  57.             updateBackground();
  58.         }
  59.         domUtils.on($G('nocolorRadio'), 'click', updateBackground);
  60.         domUtils.on($G('coloredRadio'), 'click', updateHandler);
  61.         domUtils.on($G('url'), 'keyup', function(){
  62.             if($G('url').value && $G('alignment').style.display == "none") {
  63.                 utils.each($G('repeatType').children, function(item){
  64.                     item.selected = ('repeat' == item.getAttribute('value') ? 'selected':false);
  65.                 });
  66.             }
  67.             updateHandler();
  68.         });
  69.         domUtils.on($G('repeatType'), 'change', updateHandler);
  70.         domUtils.on($G('x'), 'keyup', updateBackground);
  71.         domUtils.on($G('y'), 'keyup', updateBackground);
  72.  
  73.         initColorPicker();
  74.     }
  75.  
  76.     /* 初始化颜色选择器 */
  77.     function initColorPicker() {
  78.         var me = editor,
  79.             cp = $G("colorPicker");
  80.  
  81.         /* 生成颜色选择器ui对象 */
  82.         var popup = new UE.ui.Popup({
  83.             content: new UE.ui.ColorPicker({
  84.                 noColorText: me.getLang("clearColor"),
  85.                 editor: me,
  86.                 onpickcolor: function (t, color) {
  87.                     updateFormState('colored', color);
  88.                     updateBackground();
  89.                     UE.ui.Popup.postHide();
  90.                 },
  91.                 onpicknocolor: function (t, color) {
  92.                     updateFormState('colored', 'transparent');
  93.                     updateBackground();
  94.                     UE.ui.Popup.postHide();
  95.                 }
  96.             }),
  97.             editor: me,
  98.             onhide: function () {
  99.             }
  100.         });
  101.  
  102.         /* 设置颜色选择器 */
  103.         domUtils.on(cp, "click", function () {
  104.             popup.showAnchor(this);
  105.         });
  106.         domUtils.on(document, 'mousedown', function (evt) {
  107.             var el = evt.target || evt.srcElement;
  108.             UE.ui.Popup.postHide(el);
  109.         });
  110.         domUtils.on(window, 'scroll', function () {
  111.             UE.ui.Popup.postHide();
  112.         });
  113.     }
  114.  
  115.     /* 初始化在线图片列表 */
  116.     function initImagePanel() {
  117.         onlineImage = onlineImage || new OnlineImage('imageList');
  118.     }
  119.  
  120.     /* 更新背景色设置面板 */
  121.     function updateFormState (radio, color, url, align, x, y) {
  122.         var nocolorRadio = $G('nocolorRadio'),
  123.             coloredRadio = $G('coloredRadio');
  124.  
  125.         if(radio) {
  126.             nocolorRadio.checked = (radio == 'colored' ? false:'checked');
  127.             coloredRadio.checked = (radio == 'colored' ? 'checked':false);
  128.         }
  129.         if(color) {
  130.             domUtils.setStyle($G("colorPicker"), "background-color", color);
  131.         }
  132.  
  133.         if(url && /^\//.test(url)) {
  134.             var a = document.createElement('a');
  135.             a.href = url;
  136.             browser.ie && (a.href = a.href);
  137.             url = browser.ie ? a.href:(a.protocol + '//' + a.host + a.pathname + a.search + a.hash);
  138.         }
  139.  
  140.         if(url || url === '') {
  141.             $G('url').value = url;
  142.         }
  143.         if(align) {
  144.             utils.each($G('repeatType').children, function(item){
  145.                 item.selected = (align == item.getAttribute('value') ? 'selected':false);
  146.             });
  147.         }
  148.         if(x || y) {
  149.             $G('x').value = parseInt(x) || 0;
  150.             $G('y').value = parseInt(y) || 0;
  151.         }
  152.  
  153.         $G('alignment').style.display = coloredRadio.checked && $G('url').value ? '':'none';
  154.         $G('custom').style.display = coloredRadio.checked && $G('url').value && $G('repeatType').value == 'self' ? '':'none';
  155.     }
  156.  
  157.     /* 更新背景颜色 */
  158.     function updateBackground () {
  159.         if ($G('coloredRadio').checked) {
  160.             var color = domUtils.getStyle($G("colorPicker"), "background-color"),
  161.                 bgimg = $G("url").value,
  162.                 align = $G("repeatType").value,
  163.                 backgroundObj = {
  164.                     "background-repeat": "no-repeat",
  165.                     "background-position": "center center"
  166.                 };
  167.  
  168.             if (color) backgroundObj["background-color"] = color;
  169.             if (bgimg) backgroundObj["background-image"] = 'url(' + bgimg + ')';
  170.             if (align == 'self') {
  171.                 backgroundObj["background-position"] = $G("x").value + "px " + $G("y").value + "px";
  172.             } else if (align == 'repeat-x' || align == 'repeat-y' || align == 'repeat') {
  173.                 backgroundObj["background-repeat"] = align;
  174.             }
  175.  
  176.             editor.execCommand('background', backgroundObj);
  177.         } else {
  178.             editor.execCommand('background', null);
  179.         }
  180.     }
  181.  
  182.  
  183.     /* 在线图片 */
  184.     function OnlineImage(target) {
  185.         this.container = utils.isString(target) ? document.getElementById(target) : target;
  186.         this.init();
  187.     }
  188.     OnlineImage.prototype = {
  189.         init: function () {
  190.             this.reset();
  191.             this.initEvents();
  192.         },
  193.         /* 初始化容器 */
  194.         initContainer: function () {
  195.             this.container.innerHTML = '';
  196.             this.list = document.createElement('ul');
  197.             this.clearFloat = document.createElement('li');
  198.  
  199.             domUtils.addClass(this.list, 'list');
  200.             domUtils.addClass(this.clearFloat, 'clearFloat');
  201.  
  202.             this.list.id = 'imageListUl';
  203.             this.list.appendChild(this.clearFloat);
  204.             this.container.appendChild(this.list);
  205.         },
  206.         /* 初始化滚动事件,滚动到地步自动拉取数据 */
  207.         initEvents: function () {
  208.             var _this = this;
  209.  
  210.             /* 滚动拉取图片 */
  211.             domUtils.on($G('imageList'), 'scroll', function(e){
  212.                 var panel = this;
  213.                 if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
  214.                     _this.getImageData();
  215.                 }
  216.             });
  217.             /* 选中图片 */
  218.             domUtils.on(this.container, 'click', function (e) {
  219.                 var target = e.target || e.srcElement,
  220.                     li = target.parentNode,
  221.                     nodes = $G('imageListUl').childNodes;
  222.  
  223.                 if (li.tagName.toLowerCase() == 'li') {
  224.                     updateFormState('nocolor', null, '');
  225.                     for (var i = 0, node; node = nodes[i++];) {
  226.                         if (node == li && !domUtils.hasClass(node, 'selected')) {
  227.                             domUtils.addClass(node, 'selected');
  228.                             updateFormState('colored', null, li.firstChild.getAttribute("_src"), 'repeat');
  229.                         } else {
  230.                             domUtils.removeClasses(node, 'selected');
  231.                         }
  232.                     }
  233.                     updateBackground();
  234.                 }
  235.             });
  236.         },
  237.         /* 初始化第一次的数据 */
  238.         initData: function () {
  239.  
  240.             /* 拉取数据需要使用的值 */
  241.             this.state = 0;
  242.             this.listSize = editor.getOpt('imageManagerListSize');
  243.             this.listIndex = 0;
  244.             this.listEnd = false;
  245.  
  246.             /* 第一次拉取数据 */
  247.             this.getImageData();
  248.         },
  249.         /* 重置界面 */
  250.         reset: function() {
  251.             this.initContainer();
  252.             this.initData();
  253.         },
  254.         /* 向后台拉取图片列表数据 */
  255.         getImageData: function () {
  256.             var _this = this;
  257.  
  258.             if(!_this.listEnd && !this.isLoadingData) {
  259.                 this.isLoadingData = true;
  260.                 var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
  261.                     isJsonp = utils.isCrossDomainUrl(url);
  262.                 ajax.request(url, {
  263.                     'timeout': 100000,
  264.                     'dataType': isJsonp ? 'jsonp':'',
  265.                     'data': utils.extend({
  266.                             start: this.listIndex,
  267.                             size: this.listSize
  268.                         }, editor.queryCommandValue('serverparam')),
  269.                     'method': 'get',
  270.                     'onsuccess': function (r) {
  271.                         try {
  272.                             var json = isJsonp ? r:eval('(' + r.responseText + ')');
  273.                             if (json.state == 'SUCCESS') {
  274.                                 _this.pushData(json.list);
  275.                                 _this.listIndex = parseInt(json.start) + parseInt(json.list.length);
  276.                                 if(_this.listIndex >= json.total) {
  277.                                     _this.listEnd = true;
  278.                                 }
  279.                                 _this.isLoadingData = false;
  280.                             }
  281.                         } catch (e) {
  282.                             if(r.responseText.indexOf('ue_separate_ue') != -1) {
  283.                                 var list = r.responseText.split(r.responseText);
  284.                                 _this.pushData(list);
  285.                                 _this.listIndex = parseInt(list.length);
  286.                                 _this.listEnd = true;
  287.                                 _this.isLoadingData = false;
  288.                             }
  289.                         }
  290.                     },
  291.                     'onerror': function () {
  292.                         _this.isLoadingData = false;
  293.                     }
  294.                 });
  295.             }
  296.         },
  297.         /* 添加图片到列表界面上 */
  298.         pushData: function (list) {
  299.             var i, item, img, icon, _this = this,
  300.                 urlPrefix = editor.getOpt('imageManagerUrlPrefix');
  301.             for (i = 0; i < list.length; i++) {
  302.                 if(list[i] && list[i].url) {
  303.                     item = document.createElement('li');
  304.                     img = document.createElement('img');
  305.                     icon = document.createElement('span');
  306.  
  307.                     domUtils.on(img, 'load', (function(image){
  308.                         return function(){
  309.                             _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
  310.                         }
  311.                     })(img));
  312.                     img.width = 113;
  313.                     img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
  314.                     img.setAttribute('_src', urlPrefix + list[i].url);
  315.                     domUtils.addClass(icon, 'icon');
  316.  
  317.                     item.appendChild(img);
  318.                     item.appendChild(icon);
  319.                     this.list.insertBefore(item, this.clearFloat);
  320.                 }
  321.             }
  322.         },
  323.         /* 改变图片大小 */
  324.         scale: function (img, w, h, type) {
  325.             var ow = img.width,
  326.                 oh = img.height;
  327.  
  328.             if (type == 'justify') {
  329.                 if (ow >= oh) {
  330.                     img.width = w;
  331.                     img.height = h * oh / ow;
  332.                     img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
  333.                 } else {
  334.                     img.width = w * ow / oh;
  335.                     img.height = h;
  336.                     img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
  337.                 }
  338.             } else {
  339.                 if (ow >= oh) {
  340.                     img.width = w * ow / oh;
  341.                     img.height = h;
  342.                     img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
  343.                 } else {
  344.                     img.width = w;
  345.                     img.height = h * oh / ow;
  346.                     img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
  347.                 }
  348.             }
  349.         },
  350.         getInsertList: function () {
  351.             var i, lis = this.list.children, list = [], align = getAlign();
  352.             for (i = 0; i < lis.length; i++) {
  353.                 if (domUtils.hasClass(lis[i], 'selected')) {
  354.                     var img = lis[i].firstChild,
  355.                         src = img.getAttribute('_src');
  356.                     list.push({
  357.                         src: src,
  358.                         _src: src,
  359.                         floatStyle: align
  360.                     });
  361.                 }
  362.  
  363.             }
  364.             return list;
  365.         }
  366.     };
  367.  
  368.     dialog.onok = function () {
  369.         updateBackground();
  370.         editor.fireEvent('saveScene');
  371.     };
  372.     dialog.oncancel = function () {
  373.         editor.execCommand('background', backupStyle);
  374.     };
  375.  
  376. })();
downloadbackground.js Source code - Download Easy to point the content management system DianCMS v6.0.0 SQL version Source code
Related Source Codes/Software:
Ray speed v7.0 wage query system - To modify the software to conduct a comprehensive ... 2016-08-19
Address book v1.0 FaLiang three layer - This Demo is a three layer address book source cod... 2016-08-19
Deng Xi v2.4 website help system - Deng Xi website help system is a very useful help ... 2016-08-19
1.0 housing, rental housing sale platform - Rent housing rent out platform is a very typical r... 2016-08-19
Cloud on the CMS (SyCms) v1.95 - Add menus and blocks the system style functionalit... 2016-08-19
KesionICMS intelligent website system (school) v3.7 formal version - For school management web site, the kesion forward... 2016-08-19
KesionICMS intelligent website system (enterprise edition) v3.7 formal version - KesionICMS intelligent website (enterprise edition... 2016-08-19
KesionICMS intelligent website system (government) v3.7 formal version - Government Portal website construction Establish t... 2016-08-19
KesionICMS intelligent website system (gm) v3.7 formal version - KESIONICMS intelligent building systems with a fle... 2016-08-19
KesionIMALL v3.7 formal version online mall system - KESIONIMALLV3.7 online shop system, as a new e-com... 2016-08-19
fatfree - A powerful yet easy-to-use PHP micro-framework des... 2017-05-13
TSA-Travel-Sentry-master-keys - 3D reproduction of TSA Master key 2017-05-12
python3-cookbook - "The Python Cookbook" 3 rd Edition Translatio 2017-05-12
isso - a Disqus alternative https:... 2017-05-12
hologram - A markdown based documentation system for style gu... 2017-05-12
www.html5rocks.com - ....a top-notch resource for web developer 2017-05-12
MTStatusBarOverlay - A custom iOS status bar overlay seen in Apps like ... 2017-05-12
blueprint - Reverse engineer server configuration ... 2017-05-12
PullToRefresh - A simple iPhone TableViewController for adding the... 2017-05-12
mrjob - Run MapReduce jobs on Hadoop or Amazon Web Service... 2017-05-11

 Back to top