PageRenderTime 66ms CodeModel.GetById 36ms RepoModel.GetById 0ms app.codeStats 0ms

/tools/model_builder/res/js/kd/plugins/image/image.html

https://bitbucket.org/snail/mrpmvc
HTML | 268 lines | 267 code | 1 blank | 0 comment | 0 complexity | 218e97e199a70ba7a1de1d7e11ec7d56 MD5 | raw file
    

  1. <!doctype html>

    2. 

  2. <html>

    3. 

  3. 	<head>

    4. 

  4. 		<meta charset="utf-8" />

    5. 

  5. 		<title>Image</title>

    6. 

  6. 		<style type="text/css" rel="stylesheet">

    7. 

  7. 			body {

    8. 

  8. 				margin: 0;

    9. 

  9. 				font:12px/1.5 "sans serif",tahoma,verdana,helvetica;

    10. 

  10. 				background-color:#F0F0EE;

    11. 

  11. 				color:#222222;

    12. 

  12. 				overflow:hidden;

    13. 

  13. 			}

    14. 

  14. 			form {

    15. 

  15. 				margin:0;

    16. 

  16. 			}

    17. 

  17. 			label {

    18. 

  18. 				cursor:pointer;

    19. 

  19. 			}

    20. 

  20. 			#resetBtn {

    21. 

  21. 				margin-left:10px;

    22. 

  22. 				cursor:pointer;

    23. 

  23. 			}

    24. 

  24. 			.main {

    25. 

  25. 				margin: 0 10px;

    26. 

  26. 			}

    27. 

  27. 			.clearfix:after {

    28. 

  28. 				content: ".";

    29. 

  29. 				display: block;

    30. 

  30. 				height: 0;

    31. 

  31. 				clear: both;

    32. 

  32. 				visibility: hidden;

    33. 

  33. 			}

    34. 

  34. 			.tab-navi {

    35. 

  35. 				width:98%;

    36. 

  36. 				border-bottom:1px solid #A0A0A0;

    37. 

  37. 				padding-left:5px;

    38. 

  38. 				margin-bottom:10px;

    39. 

  39. 				

    40. 

  40. 			}

    41. 

  41. 			.tab-navi ul  {

    42. 

  42. 				list-style-image:none;

    43. 

  43. 				list-style-position:outside;

    44. 

  44. 				list-style-type:none;

    45. 

  45. 				margin:0;

    46. 

  46. 				padding:0;

    47. 

  47. 			}

    48. 

  48. 			.tab-navi li {

    49. 

  49. 				position: relative;

    50. 

  50. 				border: 1px solid #A0A0A0;

    51. 

  51. 				background-color: #E0E0E0;

    52. 

  52. 				margin: 0 2px -1px 0;

    53. 

  53. 				padding: 0 20px;

    54. 

  54. 				float: left;

    55. 

  55. 				line-height: 25px;

    56. 

  56. 				text-align: center;

    57. 

  57. 				color: #555555;

    58. 

  58. 				cursor: pointer;

    59. 

  59. 			}

    60. 

  60. 			.tab-navi li.selected {

    61. 

  61. 				background-color: #F0F0EE;

    62. 

  62. 				border-bottom: 1px solid #F0F0EE;

    63. 

  63. 				color: #000000;

    64. 

  64. 				cursor: default;

    65. 

  65. 			}

    66. 

  66. 			.tab-navi li.on {

    67. 

  67. 				background-color: #F0F0EE;

    68. 

  68. 				color: #000000;

    69. 

  69. 			}

    70. 

  70. 			.table  {

    71. 

  71. 				list-style-image:none;

    72. 

  72. 				list-style-position:outside;

    73. 

  73. 				list-style-type:none;

    74. 

  74. 				margin:0;

    75. 

  75. 				padding:0;

    76. 

  76. 				display:block;

    77. 

  77. 			}

    78. 

  78. 			.table li {

    79. 

  79. 				padding:0;

    80. 

  80. 				margin-bottom:10px;

    81. 

  81. 				display:list-item;

    82. 

  82. 			}

    83. 

  83. 			.table li label {

    84. 

  84. 				font-weight:bold;

    85. 

  85. 			}

    86. 

  86. 			.table li input {

    87. 

  87. 				vertical-align:middle;

    88. 

  88. 			}

    89. 

  89. 			.table li img {

    90. 

  90. 				vertical-align:middle;

    91. 

  91. 			}

    92. 

  92. 		</style>

    93. 

  93. 		<script type="text/javascript">

    94. 

  94. 			var KE = parent.KindEditor;

    95. 

  95. 			location.href.match(/\?id=([\w-]+)/i);

    96. 

  96. 			var id = RegExp.$1;

    97. 

  97. 			var fileManager = null;

    98. 

  98. 			var allowUpload = (typeof KE.g[id].allowUpload == 'undefined') ? true : KE.g[id].allowUpload;

    99. 

  99. 			var allowFileManager = (typeof KE.g[id].allowFileManager == 'undefined') ? false : KE.g[id].allowFileManager;

    100. 

  100. 			var referMethod = (typeof KE.g[id].referMethod == 'undefined') ? '' : KE.g[id].referMethod;

    101. 

  101. 			var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson;

    102. 

  102. 			var lang = KE.lang.plugins.image;

    103. 

  103. 			KE.event.ready(function() {

    104. 

  104. 				var typeBox = KE.$('type', document);

    105. 

  105. 				var urlBox = KE.$('url', document);

    106. 

  106. 				var alignElements = document.getElementsByName('align');

    107. 

  107. 				var fileBox = KE.$('imgFile', document);

    108. 

  108. 				var widthBox = KE.$('imgWidth', document);

    109. 

  109. 				var heightBox = KE.$('imgHeight', document);

    110. 

  110. 				var titleBox = KE.$('imgTitle', document);

    111. 

  111. 				var resetBtn = KE.$('resetBtn', document);

    112. 

  112. 				var tabNavi = KE.$('tabNavi', document);

    113. 

  113. 				var defaultImg = KE.$('defaultImg', document);

    114. 

  114. 				var leftImg = KE.$('leftImg', document);

    115. 

  115. 				var rightImg = KE.$('rightImg', document);

    116. 

  116. 				var viewServer = KE.$('viewServer', document);

    117. 

  117. 				var liList = tabNavi.getElementsByTagName('li');

    118. 

  118. 				var selectTab = function(num) {

    119. 

  119. 					if (num == 1) resetBtn.style.display = 'none';

    120. 

  120. 					else resetBtn.style.display = '';

    121. 

  121. 					widthBox.value = '';

    122. 

  122. 					heightBox.value = '';

    123. 

  123. 					titleBox.value = '';

    124. 

  124. 					alignElements[0].checked = true;

    125. 

  125. 					for (var i = 0, len = liList.length; i < len; i++) {

    126. 

  126. 						var li = liList[i];

    127. 

  127. 						if (i === num) {

    128. 

  128. 							li.className = 'selected';

    129. 

  129. 							li.onclick = null;

    130. 

  130. 						} else {

    131. 

  131. 							if (allowUpload) {

    132. 

  132. 								li.className = '';

    133. 

  133. 								li.onmouseover = function() { KE.addClass(this, 'on'); };

    134. 

  134. 								li.onmouseout = function() { KE.removeClass(this, 'on'); };

    135. 

  135. 								li.onclick = (function (i) {

    136. 

  136. 									return function() {

    137. 

  137. 										if (!fileManager) selectTab(i);

    138. 

  138. 									};

    139. 

  139. 								})(i);

    140. 

  140. 							} else {

    141. 

  141. 								li.parentNode.removeChild(li);

    142. 

  142. 							}

    143. 

  143. 						}

    144. 

  144. 						KE.$('tab' + (i + 1), document).style.display = 'none';

    145. 

  145. 					}

    146. 

  146. 					typeBox.value = num + 1;

    147. 

  147. 					KE.$('tab' + (num + 1), document).style.display = '';

    148. 

  148. 				}

    149. 

  149. 				if (!allowFileManager) {

    150. 

  150. 					viewServer.parentNode.removeChild(viewServer);

    151. 

  151. 					urlBox.style.width = '300px';

    152. 

  152. 				}

    153. 

  153. 				selectTab(0);

    154. 

  154. 				var imgNode = KE.plugin['image'].getSelectedNode(id);

    155. 

  155. 				if (imgNode) {

    156. 

  156. 					var tempDiv = KE.$$('div', KE.g[id].iframeDoc);

    157. 

  157. 					tempDiv.appendChild(imgNode.cloneNode(false));

    158. 

  158. 					var imgHtml = tempDiv.innerHTML;

    159. 

  159. 					var src = imgNode.src;

    160. 

  160. 					if (imgHtml.match(/kesrc="([^"]+)"/i)) src = RegExp.$1;

    161. 

  161. 					urlBox.value = src;

    162. 

  162. 					widthBox.value = imgNode.width;

    163. 

  163. 					heightBox.value = imgNode.height;

    164. 

  164. 					titleBox.value = (typeof imgNode.alt != 'undefined') ? imgNode.alt : imgNode.title;

    165. 

  165. 					for (var i = 0, len = alignElements.length; i < len; i++) {

    166. 

  166. 						if (alignElements[i].value == imgNode.align) {

    167. 

  167. 							alignElements[i].checked = true;

    168. 

  168. 							break;

    169. 

  169. 						}

    170. 

  170. 					}

    171. 

  171. 				}

    172. 

  172. 				KE.event.add(viewServer, 'click', function () {

    173. 

  173. 					if (fileManager) return false;

    174. 

  174. 					fileManager = new KE.dialog({

    175. 

  175. 						id : id,

    176. 

  176. 						cmd : 'file_manager',

    177. 

  177. 						file : 'file_manager/file_manager.html?id=' + id + '&ver=' + KE.version,

    178. 

  178. 						width : 500,

    179. 

  179. 						height : 400,

    180. 

  180. 						loadingMode : true,

    181. 

  181. 						title : KE.lang.fileManager,

    182. 

  182. 						noButton : KE.lang.no,

    183. 

  183. 						afterHide : function() {

    184. 

  184. 							fileManager = null;

    185. 

  185. 						}

    186. 

  186. 					});

    187. 

  187. 					fileManager.show();

    188. 

  188. 				});

    189. 

  189. 				KE.$('uploadForm', document).action = imageUploadJson;

    190. 

  190. 				KE.$('referMethod', document).value = referMethod;

    191. 

  191. 				var alignIds = ['default', 'left', 'right'];

    192. 

  192. 				for (var i = 0, len = alignIds.length; i < len; i++) {

    193. 

  193. 					KE.event.add(KE.$(alignIds[i] + 'Img', document), 'click', (function(i) {

    194. 

  194. 						return function() {

    195. 

  195. 							KE.$(alignIds[i] + 'Chk', document).checked = true;

    196. 

  196. 						};

    197. 

  197. 					})(i));

    198. 

  198. 				}

    199. 

  199. 				KE.event.add(resetBtn, 'click', function() {

    200. 

  200. 					var g = KE.g[id];

    201. 

  201. 					var img = KE.$$('img', g.iframeDoc);

    202. 

  202. 					img.src = urlBox.value;

    203. 

  203. 					img.style.position = 'absolute';

    204. 

  204. 					img.style.visibility = 'hidden';

    205. 

  205. 					img.style.top = '0px';

    206. 

  206. 					img.style.left = '1000px';

    207. 

  207. 					g.iframeDoc.body.appendChild(img);

    208. 

  208. 					widthBox.value = img.width;

    209. 

  209. 					heightBox.value = img.height;

    210. 

  210. 					g.iframeDoc.body.removeChild(img);

    211. 

  211. 				});

    212. 

  212. 				KE.util.pluginLang('image', document);

    213. 

  213. 				viewServer.value = lang.viewServer;

    214. 

  214. 				resetBtn.alt = resetBtn.title = lang.resetSize;

    215. 

  215. 				defaultImg.alt = defaultImg.title = lang.defaultAlign;

    216. 

  216. 				leftImg.alt = leftImg.title = lang.leftAlign;

    217. 

  217. 				rightImg.alt = rightImg.title = lang.rightAlign;

    218. 

  218. 				KE.util.hideLoadingPage(id);

    219. 

  219. 			}, window, document);

    220. 

  220. 		</script>

    221. 

  221. 	</head>

    222. 

  222. 	<body>

    223. 

  223. 		<div class="main">

    224. 

  224. 			<div id="tabNavi" class="tab-navi">

    225. 

  225. 				<ul class="clearfix">

    226. 

  226. 					<li><span id="lang.remoteImage"></span></li>

    227. 

  227. 					<li><span id="lang.localImage"></span></li>

    228. 

  228. 				</ul>

    229. 

  229. 			</div>

    230. 

  230. 			<iframe name="uploadIframe" id="uploadIframe" style="display:none;"></iframe>

    231. 

  231. 			<input type="hidden" id="type" name="type" value="" />

    232. 

  232. 			<form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data" target="uploadIframe">

    233. 

  233. 				<input type="hidden" id="editorId" name="id" value="" />

    234. 

  234. 				<input type="hidden" id="referMethod" name="referMethod" value="" />

    235. 

  235. 				<input type="hidden" name="imgBorder" value="0" />

    236. 

  236. 				<ul class="table">

    237. 

  237. 					<li>

    238. 

  238. 						<div id="tab1" style="display:none;">

    239. 

  239. 							<label for="url"><span id="lang.remoteUrl"></span></label>&nbsp;

    240. 

  240. 							<input type="text" id="url" name="url" value="http://" maxlength="255" style="width:230px;" />

    241. 

  241. 							<input type="button" id="viewServer" name="viewServer" value="" />

    242. 

  242. 						</div>

    243. 

  243. 						<div id="tab2" style="display:none;">

    244. 

  244. 							<label for="imgFile"><span id="lang.localUrl"></span></label>&nbsp;

    245. 

  245. 							<input type="file" id="imgFile" name="imgFile" style="width:300px;" />

    246. 

  246. 						</div>

    247. 

  247. 					</li>

    248. 

  248. 					<li>

    249. 

  249. 						<label for="imgWidth"><span id="lang.size"></span></label>&nbsp;

    250. 

  250. 						<span id="lang.width"></span> <input type="text" id="imgWidth" name="imgWidth" value="" maxlength="4" style="width:50px;text-align:right;" />

    251. 

  251. 						<span id="lang.height"></span> <input type="text" id="imgHeight" name="imgHeight" value="" maxlength="4" style="width:50px;text-align:right;" />

    252. 

  252. 						<img src="./images/refresh.gif" width="16" height="16" id="resetBtn" alt="" title="" />

    253. 

  253. 					</li>

    254. 

  254. 					<li>

    255. 

  255. 						<label><span id="lang.align"></span></label>&nbsp;

    256. 

  256. 						<input type="radio" id="defaultChk" name="align" value="" checked="checked" /> <img id="defaultImg" src="./images/align_top.gif" width="23" height="25" border="0" alt="" title="" />

    257. 

  257. 						<input type="radio" id="leftChk" name="align" value="left" /> <img id="leftImg" src="./images/align_left.gif" width="23" height="25" border="0" alt="" title="" />

    258. 

  258. 						<input type="radio" id="rightChk" name="align" value="right" /> <img id="rightImg" src="./images/align_right.gif" width="23" height="25" border="0" alt="" title="" />

    259. 

  259. 					</li>

    260. 

  260. 					<li>

    261. 

  261. 						<label for="imgTitle"><span id="lang.imgTitle"></span></label>

    262. 

  262. 						<input type="text" id="imgTitle" name="imgTitle" value="" maxlength="255" style="width:95%;" />

    263. 

  263. 					</li>

    264. 

  264. 				</ul>

    265. 

  265. 			</form>

    266. 

  266. 		</div>

    267. 

  267. 	</body>

    268. 

  268. </html>

    269. 

  269.