API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 30th, 2016
80
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.32 KB | None | 0 0
raw download clone embed print report
  1. <? include($_SERVER["DOCUMENT_ROOT"] . '/include/functions/main.php'); ?>
  2. <? include($_SERVER["DOCUMENT_ROOT"] . '/include/header.php'); ?>
  3.  
  4.  
  5. <? globalPageBegin('', 'state-header-b state-nav-b'); ?>
  6.  
  7. <div class="global-document" id="global-document">
  8.  
  9. <div class="global-navigation" id="global-navigation">
  10. <? include($_SERVER["DOCUMENT_ROOT"] . '/include/patterns/menu-states/state1.php'); ?>
  11. </div>
  12.  
  13. <div class="global-backstage" id="global-backstage">
  14.  
  15. <div class="is-header-buttons">
  16. <a class="hb-default btn-type-a" href="#">
  17. Помочь природе сейчас
  18. </a>
  19. <a class="hb-default btn-type-b h-waves-light" href="#">
  20. Час земли
  21. </a>
  22. <a class="hb-default btn-type-c" href="#">
  23. Добрый подарок на новый год
  24. </a>
  25. </div>
  26.  
  27. <div class="full-size img-cover img-loader" data-load-bg="/assets/img/temp/temp2.jpg"></div>
  28. </div>
  29.  
  30. <div class="global-content" id="global-content">
  31.  
  32. <h1 data-ce="page-header">
  33. Новая страница с правой колонкой
  34. </h1>
  35.  
  36. <div class="global-white-paper">
  37.  
  38. <div class="is-layout">
  39. <div class="layout-right-aside is-style">
  40. <p data-ce="paragraph">
  41. Текст в правой колонке
  42. </p>
  43. <div data-ce-action="addup" class="_ce-add-new-item _ce-service-item"></div>
  44. </div>
  45.  
  46. <div class="layout-content">
  47. <a class="is-white-paper-back" href="#"></a>
  48.  
  49. <div class="is-text-block is-style">
  50. <h2 data-ce="header">
  51. Начните новую такую страницу с этого файла
  52. </h2>
  53. <p data-ce="paragraph">
  54. Обитает на дрейфующих и припайных морских льдах, где охотится на свою основную добычу: кольчатую нерпу, морского зайца, моржа и др. морских животных. Ловит он их, подкрадываясь из-за укрытий, или возле лунок: стоит животному высунуть голову из воды, как медведь ударом лапы оглушает добычу и вытаскивает.
  55. </p>
  56. <p data-ce="paragraph">
  57. Иногда снизу опрокидывает льдину, на которой находятся тюлени. С моржом может справиться только на суше. В первую очередь пожирает шкуру и сало, остальную тушу — лишь в случае сильного голода. Остатки добычи доедают песцы. При случае подбирает падаль, дохлую рыбу, яйца и птенцов, может есть траву и морские водоросли, в обжитых местах питается на помойках. Известны случаи ограбления им складов продовольствия полярных экспедиций. Из добычи белый медведь получает большое количество витамина A, который накапливается в его печени: известны случаи отравлений печенью белого медведя.
  58. </p>
  59. <p data-ce="paragraph">
  60. В обжитых местах питается на помойках. Известны случаи ограбления им складов продовольствия полярных экспедиций. Из добычи белый медведь получает большое количество витамина A, который накапливается в его печени: известны случаи отравлений печенью белого медведя.
  61. </p>
  62.  
  63. <div data-ce-action="addup" class="_ce-add-new-item _ce-service-item"></div>
  64. </div>
  65. </div>
  66. </div>
  67.  
  68. </div>
  69.  
  70. </div>
  71.  
  72. <div class="global-widgets" id="global-widgets">
  73. <div class="widget-item size2x1" data-ce="cell-widget">
  74. <div class="widget-inner">
  75. <img data-load-src="/assets/img/temp/wigdet-news.png" />
  76. </div>
  77. </div>
  78. <div class="widget-item size1x1" data-ce="cell-widget">
  79. <div class="widget-inner">
  80. <img data-load-src="/assets/img/temp/wigdet-video.png" />
  81. </div>
  82. </div>
  83. <div class="widget-item size1x1" data-ce="cell-widget">
  84. <div class="widget-inner">
  85. <img data-load-src="/assets/img/temp/widget-tiger-home.png" />
  86. </div>
  87. </div>
  88. <div class="widget-item size1x1" data-ce="cell-widget">
  89. <div class="widget-inner">
  90. <img data-load-src="/assets/img/temp/wigdet-mission.png" />
  91. </div>
  92. </div>
  93. </div>
  94.  
  95. <div class="global-footer h-waves-light">
  96. <? include($_SERVER["DOCUMENT_ROOT"] . '/include/footer.nav.php'); ?>
  97. </div>
  98.  
  99. </div>
  100.  
  101. <? globalPageEnd(); ?>
  102.  
  103.  
  104. <? include($_SERVER["DOCUMENT_ROOT"] . '/include/footer.php'); ?>
  105.  
  106. ===========================================
  107.  
  108.  
  109. var contentEditable = function(){
  110.  
  111. var bouncer = false;
  112. var $document = $(document);
  113. var $body = $('body');
  114. var $ce = {};
  115. var ce = {
  116. 'attr':'data-ce'
  117. };
  118. var $currentEdit = false;
  119.  
  120. var ceApp = {
  121. 'init':function(){
  122. ceApp.constructMarkup();
  123. ceApp.initEvents();
  124. },
  125. 'constructMarkup':function(){
  126. var ceActionTemplate = '';
  127.  
  128.  
  129. ceActionTemplate += '<div class="_ce-sb-group-link">Добавить';
  130. ceActionTemplate += '<div class="_ce-sb-panel-submenu">';
  131. ceActionTemplate += '<div data-ce-action="addup" class="_ce-sb-action-link">Сверху</div>';
  132. ceActionTemplate += '<div data-ce-action="adddown" class="_ce-sb-action-link">Снизу</div>';
  133. ceActionTemplate += '</div></div>';
  134.  
  135. ceActionTemplate += '<div class="_ce-sb-group-link">Переместить';
  136. ceActionTemplate += '<div class="_ce-sb-panel-submenu">';
  137. ceActionTemplate += '<div data-ce-action="moveup" class="_ce-sb-action-link">Вверх</div>';
  138. ceActionTemplate += '<div data-ce-action="movedown" class="_ce-sb-action-link">Вниз</div>';
  139. ceActionTemplate += '</div></div>';
  140.  
  141. ceActionTemplate += '<div data-ce-action="edit" class="_ce-sb-action-link">Править</div>';
  142. ceActionTemplate += '<div data-ce-action="remove" class="_ce-sb-action-link">Удалить</div>';
  143.  
  144.  
  145.  
  146.  
  147. $body.prepend('<div class="_ce-selected-box"><div class="_ce-sb-panel">'+ceActionTemplate+'</div></div>');
  148. $ce.selectedBox = $('._ce-selected-box');
  149. },
  150. 'initEvents':function(){
  151. $document.on('mouseenter','['+ce.attr+']',ceApp.elementEnterEvent);
  152. $document.on('mousemove',ceApp.elementLeaveEvent);
  153. $document.on('click','[data-ce-action]',ceApp.editableActionEvent)
  154. },
  155. 'showSelectedBox':function(styleArray){
  156. $ce.selectedBox.css(styleArray).addClass('_state-hover');
  157. },
  158. 'hideSelectedBox':function(){
  159. $ce.selectedBox.css({
  160. 'opacity':'0',
  161. 'visibility':'hidden'
  162. }).removeClass('_state-hover');
  163. },
  164. 'elementEnterEvent':function(e){
  165. if (bouncer) { return true; }
  166. var $thisElement = $(e.target);
  167. var thisStyle = {
  168. 'top':($thisElement.offset().top-5)+'px',
  169. 'left':($thisElement.offset().left-5)+'px',
  170. 'width':($thisElement.width()+10)+'px',
  171. 'height':($thisElement.height()+10)+'px',
  172. 'opacity':'1',
  173. 'visibility':'visible'
  174. };
  175. ceApp.showSelectedBox(thisStyle);
  176. $currentEdit = $thisElement;
  177. },
  178. 'elementLeaveEvent':function(e){
  179. if (bouncer) { return true; }
  180. var $thisElement = $(e.target);
  181. if(
  182. !$thisElement.attr(ce.attr) &&
  183. !$thisElement.closest('['+ce.attr+']').length &&
  184. !$thisElement.hasClass('_ce-selected-box') &&
  185. !$thisElement.closest('._ce-selected-box').length
  186. ) {
  187. $currentEdit = false;
  188. ceApp.hideSelectedBox();
  189. }
  190. },
  191. 'editableActionEvent':function(e){
  192. e.preventDefault();
  193. var $this = $(this);
  194. var thisAction = $(this).attr('data-ce-action');
  195. if ($currentEdit === false) { $currentEdit = $this; }
  196. if (ceApp.editableActions[thisAction]) { ceApp.editableActions[thisAction](); }
  197.  
  198. },
  199. 'editableActions':{
  200. 'edit':function(){
  201. bouncer = true;
  202.  
  203. var clearContent = $.trim($currentEdit.html());
  204. var thisPrompt = prompt('Редактируем содержимое блока: ', clearContent);
  205. if (thisPrompt && thisPrompt.length > 0) {
  206. $currentEdit.html(thisPrompt);
  207.  
  208. ceApp.hideSelectedBox();
  209. $currentEdit = false;
  210. }
  211. if (thisPrompt && thisPrompt.length == 0) {
  212. alert('Если вы хотите удалить блок, воспользуйтесь функцией "Удалить".');
  213. }
  214. bouncer = false;
  215. },
  216. 'remove':function(){
  217. bouncer = true;
  218. var thisConfirm = confirm('Вы действительно хотите удлаить элемент?');
  219.  
  220. if (thisConfirm) {
  221. ceApp.hideSelectedBox();
  222.  
  223. $currentEdit.slideUp(200,function(){
  224. $currentEdit.remove();
  225. $currentEdit = false;
  226. bouncer = false;
  227. });
  228.  
  229. }
  230. },
  231. 'moveup':function(){
  232. bouncer = true;
  233.  
  234. var $prevBox = $currentEdit.prev();
  235. var prevPossible = !$prevBox.hasClass('_ce-service-item');
  236.  
  237. if($prevBox.length && prevPossible) {
  238. $currentEdit.insertBefore($prevBox);
  239. } else {
  240. alert('Блок находится в самом верхнем положении.');
  241. }
  242.  
  243. ceApp.hideSelectedBox();
  244. $currentEdit = false;
  245. bouncer = false;
  246. },
  247. 'movedown':function(){
  248. bouncer = true;
  249.  
  250. var $nextBox = $currentEdit.next();
  251. var nextPossible = !$nextBox.hasClass('_ce-service-item');
  252.  
  253. if($nextBox.length && nextPossible) {
  254. $currentEdit.insertAfter($nextBox);
  255. } else {
  256. alert('Блок находится в самом нижнем положении.');
  257. }
  258.  
  259. $currentEdit = false;
  260. ceApp.hideSelectedBox();
  261. bouncer = false;
  262. },
  263. 'addup':function(){
  264. bouncer = true;
  265.  
  266. var $thisNewElement;
  267. var $thisParent = $currentEdit.parent();
  268.  
  269. var thisPrompt = prompt('Добавление блока сверху: ', "Введите текст...");
  270.  
  271. if (thisPrompt && thisPrompt.length > 0) {
  272. $thisParent.prepend('<p style="display:none;" data-ce-new data-ce="paragraph">'+thisPrompt+'</p>');
  273. $thisNewElement = $thisParent.find('[data-ce-new]').removeAttr('data-ce-new');
  274. $thisNewElement.insertBefore($currentEdit).slideDown(200).slideDown(200, function(){
  275. $currentEdit = false;
  276. ceApp.hideSelectedBox();
  277. bouncer = false;
  278. });
  279. } else {
  280. $currentEdit = false;
  281. ceApp.hideSelectedBox();
  282. bouncer = false;
  283. }
  284.  
  285. },
  286. 'adddown':function(){
  287. bouncer = true;
  288.  
  289. var $thisNewElement;
  290. var $thisParent = $currentEdit.parent();
  291.  
  292. var thisPrompt = prompt('Добавление блока сверху: ', "Введите текст...");
  293.  
  294. if (thisPrompt && thisPrompt.length > 0) {
  295. $thisParent.prepend('<p style="display:none;" data-ce-new data-ce="paragraph">'+thisPrompt+'</p>');
  296. $thisNewElement = $thisParent.find('[data-ce-new]').removeAttr('data-ce-new');
  297. $thisNewElement.insertAfter($currentEdit).slideDown(200, function(){
  298. $currentEdit = false;
  299. ceApp.hideSelectedBox();
  300. bouncer = false;
  301. });
  302. } else {
  303. $currentEdit = false;
  304. ceApp.hideSelectedBox();
  305. bouncer = false;
  306. }
  307.  
  308. }
  309. }
  310. }
  311.  
  312. ceApp.init();
  313.  
  314. };
  315.  
  316. ===================================
  317.  
  318. ._ce-selected-box {
  319. display: block;
  320. position: absolute;
  321. z-index: 3000;
  322. top: 0; left: 0;
  323. width: 0;
  324. height: 0;
  325. opacity: 0;
  326. visibility: hidden;
  327. box-shadow: inset 0 0 0 2px #cb1c84;
  328. border-radius: 2px;
  329. background-color: rgba(203,28,132,.4);
  330. transition: opacity .2s, visibility .2s;
  331. &._state-hover {
  332. ._ce-sb-panel {
  333. opacity: 1;
  334. transform: translateX(0);
  335. transition: transform .3s .2s, opacity .3s .2s;
  336. }
  337. }
  338. }
  339.  
  340. ._ce-sb-panel {
  341. box-sizing: border-box;
  342. display: block;
  343. position: absolute;
  344. top: 0; left: 100%;
  345. margin-left: -2px;
  346. width: 150px;
  347. background-color: #cb1c84;
  348. border-radius: 2px;
  349. opacity: 0;
  350. transform: translateX(-30px);
  351. }
  352.  
  353.  
  354. ._ce-sb-panel-submenu {
  355. display: block;
  356. position: absolute;
  357. top: 0; left: -1px;
  358. width: 150px;
  359. margin-left: 150px;
  360. background-color: darken(#cb1c84,10%);
  361. opacity: 0;
  362. visibility: hidden;
  363. transform: translateX(-15px);
  364. transition: transform .2s .1s, opacity .2s .1s, visibility .2s .1s;
  365. ._ce-sb-action-link {
  366. &:hover {
  367. background-color: darken(#cb1c84,15%);
  368. }
  369. }
  370. }
  371.  
  372.  
  373. ._ce-sb-group-link {
  374. cursor: default;
  375. user-select: none;
  376. display: block;
  377. padding: 10px;
  378. &:hover {
  379. background-color: darken(#cb1c84,10%);
  380. ._ce-sb-panel-submenu {
  381. opacity: 1;
  382. visibility: visible;
  383. transform: translateX(0);
  384. transition: transform .3s 0, opacity .3s 0, visibility .3s 0;
  385. }
  386. }
  387. }
  388.  
  389. ._ce-sb-action-link {
  390. cursor: pointer;
  391. user-select: none;
  392. display: block;
  393. padding: 10px;
  394. &:hover {
  395. background-color: darken(#cb1c84,10%);
  396. }
  397. }
  398.  
  399. ._ce-add-new-item {
  400. cursor: pointer;
  401. user-select: none;
  402. position: relative;
  403. display: block;
  404. width: 39px;
  405. height: 39px;
  406. border-radius: 2px;
  407. border: 3px solid #999;
  408. transition: border .2s, background .2s;
  409. &:before {
  410. content: '';
  411. display: block;
  412. position: absolute;
  413. top: 5px;
  414. left: 17px;
  415. width: 5px;
  416. height: 29px;
  417. background: #999;
  418. transition: background .2s;
  419. }
  420. &:after {
  421. content: '';
  422. display: block;
  423. position: absolute;
  424. top: 17px;
  425. left: 5px;
  426. width: 29px;
  427. height: 5px;
  428. background: #999;
  429. transition: background .2s;
  430. }
  431. &:hover {
  432. border-color: #cb1c84;
  433. background-color: rgba(203,28,132,.4);
  434. &:before, &:after {
  435. background-color: #cb1c84;
  436. }
  437. }
  438. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!