Просмотр файла htmly-2.9.8/system/admin/views/menu.html.php

Конкурс дизайнеров на 15000 рублей
Реклама ваших сайтов
Размер файла: 9.98Kb 
  1. <?php if (!defined('HTMLY')) die('HTMLy'); ?>
  2. <?php
  3. $menu = '';
  4. $filename = "content/data/menu.json";
  5. if (file_exists($filename)) {
  6.     $json = json_decode(file_get_contents('content/data/menu.json', true));
  7.     $menus = json_decode($json);
  8.     if (!empty($menus)) {
  9.         $menu = parseMenus($menus);        
  10.     }
  11. }
  12.  
  13. function parseMenus($menus) {
  14.     $ol = '<ol class="dd-list">';
  15.     foreach ($menus as $menu) {
  16.         $ol .= parseMenu($menu); 
  17.     }
  18.     $ol .= '</ol>';
  19.     return $ol;
  20. }
  21.  
  22. function parseMenu($menu) {
  23.     $li = '<li class="dd-item" data-class="'. $menu->class .'" data-id="'. $menu->id .'" data-name="'.$menu->name.'" data-slug="'.htmlspecialchars($menu->slug, FILTER_SANITIZE_URL).'">';
  24.     $li .= '<div class="dd-handle">'.$menu->name.'</div>';
  25.     $li .= '<span class="button-delete btn btn-danger btn-xs" style="margin-right:0.5rem" data-owner-id="'.$menu->id.'">'.i18n('Delete').'</span>';
  26.     $li .= '<span class="button-edit btn btn-primary btn-xs" data-owner-id="'.$menu->id.'">'.i18n('Edit').'</span>';
  27.     if (isset($menu->children)) { 
  28.         $li .= parseMenus($menu->children);
  29.     }
  30.     $li .= '</li>';
  31.     return $li;
  32. }
  33.  
  34. ?>
  35.  
  36. <div class="row">
  37.     <div class="col-md-6">
  38.         <div class="dd nestable"><?php if (!empty($menu)) {echo  '<h2>Drag & Drop</h2><br>'. $menu;} else {echo '<span>'.i18n('At_the_moment_you_are_using_auto_generated_menu').'</span><ol class="dd-list"></ol>';}?></div>
  39.     </div>
  40.  
  41.     <div class="col-md-6">
  42.         <form id="menu-add">
  43.             <h4><?php echo i18n('Add_menu');?></h4>
  44.             <div class="form-group">
  45.             <label for="addInputName"><?php echo i18n('Name');?></label>
  46.             <input type="text" class="form-control" id="addInputName" placeholder="<?php echo i18n('Link_name')?>" required>
  47.             </div>
  48.             <div class="form-group">
  49.             <label for="addInputSlug"><?php echo i18n('Slug');?></label>
  50.             <input type="text" class="form-control" id="addInputSlug" placeholder="<?php echo i18n('item_slug');?>" required>
  51.             </div>
  52.             <div class="form-group">
  53.             <label for="addInputClass"><?php echo i18n('CSS_Class_Optional');?></label>
  54.             <input type="text" class="form-control" id="addInputClass" placeholder="<?php echo i18n('item_class');?>">
  55.             </div>
  56.             <button class="btn btn-primary btn-sm" id="addButton"><?php echo i18n('Add_link');?></button>
  57.         </form>
  58.         <form id="menu-editor" style="display: none;">
  59.             <h4>Editing <span id="currentEditName"></span></h4>
  60.             <div class="form-group">
  61.             <label for="addInputName"><?php echo i18n('Name')?></label>
  62.             <input type="text" class="form-control" id="editInputName" placeholder="<?php echo i18n('Link_name')?>" required>
  63.             </div>
  64.             <div class="form-group">
  65.             <label for="addInputSlug"><?php echo i18n('Slug');?></label>
  66.             <input type="text" class="form-control" id="editInputSlug" placeholder="<?php echo i18n('item_slug');?>">
  67.             </div>
  68.             <div class="form-group">
  69.             <label for="addInputClass"><?php echo i18n('CSS_Class_Optional');?></label>
  70.             <input type="text" class="form-control" id="editInputClass" placeholder="<?php echo i18n('item_class');?>">
  71.             </div>
  72.             <button class="btn btn-primary btn-sm" id="editButton"><?php echo i18n('Save_Edit');?></button>
  73.         </form>
  74.     </div>
  75. </div>
  76.  
  77. <div class="row">
  78.     <div class="output-container">
  79.         <div class="col">
  80.             <button class="btn btn-primary" id="saveButton"><?php echo i18n('Save_Menu');?></button>
  81.             <form class="form" style="display:none;">
  82.                 <textarea class="form-control" id="json-output" rows="5"></textarea>
  83.             </form>
  84.         </div>
  85.     </div>    
  86. </div>
  87. <script src="<?php echo site_url() ?>system/resources/js/jquery.nestable.js"></script>
  88. <script src="<?php echo site_url() ?>system/resources/js/jquery.nestable++.js"></script>
  89. <script>
  90.   $('.dd.nestable').nestable({
  91.     maxDepth: 2
  92.   })
  93.   .on('change', updateOutput);
  94.   
  95.  
  96.   $('#addMenu').click(function() {
  97.     $('#menu-add').fadeIn();
  98.   });
  99.     
  100.   $("#saveButton").click(function(){
  101.     updateOutput($('.dd.nestable').data('output', $('#json-output')));
  102.     var js = $('#json-output').val();
  103.     $.ajax({
  104.       type: 'POST',
  105.       url: '<?php echo site_url();?>admin/menu',
  106.       dataType: 'json',
  107.       data: {'json': js},
  108.       success: function (response) {
  109.          alert(response.message);
  110.          location.reload();
  111.       },
  112.     });    
  113.   });
  114. </script>
  115. <style>
  116. /**
  117. *  Nestable css
  118. */
  119. .dd {
  120.   position: relative;
  121.   display: block;
  122.   margin: 0;
  123.   padding: 0;
  124.   max-width: 600px;
  125.   list-style: none;
  126.   font-size: 13px;
  127.   line-height: 20px;
  128. }
  129.  
  130. .dd-list {
  131.   display: block;
  132.   position: relative;
  133.   margin: 0;
  134.   padding: 0;
  135.   list-style: none;
  136. }
  137.  
  138. .dd-list .dd-list {
  139.   padding-left: 30px;
  140. }
  141.  
  142. .dd-collapsed .dd-list {
  143.   display: none;
  144. }
  145.  
  146. .dd-item,
  147. .dd-empty,
  148. .dd-placeholder {
  149.   display: block;
  150.   position: relative;
  151.   margin: 0;
  152.   padding: 0;
  153.   min-height: 20px;
  154.   font-size: 13px;
  155.   line-height: 20px;
  156. }
  157.  
  158. .dd-handle {
  159.   display: block;
  160.   margin: 5px 0;
  161.   padding: 5px 10px;
  162.   color: #333;
  163.   text-decoration: none;
  164.   font-weight: bold;
  165.   border: 1px solid #ccc;
  166.   background: #fafafa;
  167.   background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
  168.   background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  169.   background: linear-gradient(top, #fafafa 0%, #eee 100%);
  170.   -webkit-border-radius: 3px;
  171.   border-radius: 3px;
  172.   box-sizing: border-box;
  173.   -moz-box-sizing: border-box;
  174.   cursor: move;
  175. }
  176.  
  177. .dd-handle:hover {
  178.   color: #2ea8e5;
  179.   background: #fff;
  180. }
  181.  
  182. .dd-item > button {
  183.   display: block;
  184.   position: relative;
  185.   cursor: pointer;
  186.   float: left;
  187.   width: 25px;
  188.   height: 20px;
  189.   margin: 5px 0;
  190.   padding: 0;
  191.   text-indent: 100%;
  192.   white-space: nowrap;
  193.   overflow: hidden;
  194.   border: 0;
  195.   background: transparent;
  196.   font-size: 12px;
  197.   line-height: 1;
  198.   text-align: center;
  199.   font-weight: bold;
  200. }
  201.  
  202. .dd-item > button:before {
  203.   content: '+';
  204.   display: block;
  205.   position: absolute;
  206.   width: 100%;
  207.   text-align: center;
  208.   text-indent: 0;
  209. }
  210.  
  211. .dd-item > button[data-action="collapse"]:before {
  212.   content: '-';
  213. }
  214.  
  215. .dd-placeholder,
  216. .dd-empty {
  217.   margin: 5px 0;
  218.   padding: 0;
  219.   min-height: 30px;
  220.   background: #f2fbff;
  221.   border: 1px dashed #b6bcbf;
  222.   box-sizing: border-box;
  223.   -moz-box-sizing: border-box;
  224. }
  225.  
  226. .dd-empty {
  227.   border: 1px dashed #bbb;
  228.   min-height: 100px;
  229.   background-color: #e5e5e5;
  230.   background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
  231.     -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  232.   background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
  233.     -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  234.   background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
  235.     linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
  236.   background-size: 60px 60px;
  237.   background-position: 0 0, 30px 30px;
  238. }
  239.  
  240. .dd-dragel {
  241.   position: absolute;
  242.   pointer-events: none;
  243.   z-index: 9999;
  244. }
  245.  
  246. .dd-dragel > .dd-item .dd-handle {
  247.   margin-top: 0;
  248. }
  249.  
  250. .dd-dragel .dd-handle {
  251.   -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
  252.   box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
  253. }
  254.  
  255. /**
  256. * Nestable Extras
  257. */
  258. .nestable-lists {
  259.   display: block;
  260.   clear: both;
  261.   padding: 30px 0;
  262.   width: 100%;
  263.   border: 0;
  264.   border-top: 2px solid #ddd;
  265.   border-bottom: 2px solid #ddd;
  266. }
  267.  
  268. #nestable-menu {
  269.   padding: 0;
  270.   margin: 20px 0;
  271. }
  272.  
  273. #nestable-output,
  274. #nestable2-output {
  275.   width: 100%;
  276.   height: 7em;
  277.   font-size: 0.75em;
  278.   line-height: 1.333333em;
  279.   font-family: Consolas, monospace;
  280.   padding: 5px;
  281.   box-sizing: border-box;
  282.   -moz-box-sizing: border-box;
  283. }
  284.  
  285. #nestable2 .dd-handle {
  286.   color: #fff;
  287.   border: 1px solid #999;
  288.   background: #bbb;
  289.   background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
  290.   background: -moz-linear-gradient(top, #bbb 0%, #999 100%);
  291.   background: linear-gradient(top, #bbb 0%, #999 100%);
  292. }
  293.  
  294. #nestable2 .dd-handle:hover {
  295.   background: #bbb;
  296. }
  297.  
  298. #nestable2 .dd-item > button:before {
  299.   color: #fff;
  300. }
  301.  
  302. .dd {
  303.   //  float: left;
  304.   //  width: 48 %;
  305.   width: 80%;
  306. }
  307.  
  308. .dd + .dd {
  309.   margin-left: 2%;
  310. }
  311.  
  312. .dd-hover > .dd-handle {
  313.   background: #2ea8e5 !important;
  314. }
  315.  
  316. /**
  317. * Nestable Draggable Handles
  318. */
  319. .dd3-content {
  320.   display: block;
  321.   height: 30px;
  322.   margin: 5px 0;
  323.   padding: 5px 10px 5px 40px;
  324.   color: #333;
  325.   text-decoration: none;
  326.   font-weight: bold;
  327.   border: 1px solid #ccc;
  328.   background: #fafafa;
  329.   background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
  330.   background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  331.   background: linear-gradient(top, #fafafa 0%, #eee 100%);
  332.   -webkit-border-radius: 3px;
  333.   border-radius: 3px;
  334.   box-sizing: border-box;
  335.   -moz-box-sizing: border-box;
  336. }
  337.  
  338. .dd3-content:hover {
  339.   color: #2ea8e5;
  340.   background: #fff;
  341. }
  342.  
  343. .dd-dragel > .dd3-item > .dd3-content {
  344.   margin: 0;
  345. }
  346.  
  347. .dd3-item > button {
  348.   margin-left: 30px;
  349. }
  350.  
  351. .dd3-handle {
  352.   position: absolute;
  353.   margin: 0;
  354.   left: 0;
  355.   top: 0;
  356.   cursor: pointer;
  357.   width: 30px;
  358.   text-indent: 100%;
  359.   white-space: nowrap;
  360.   overflow: hidden;
  361.   border: 1px solid #aaa;
  362.   background: #ddd;
  363.   background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
  364.   background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
  365.   background: linear-gradient(top, #ddd 0%, #bbb 100%);
  366.   border-top-right-radius: 0;
  367.   border-bottom-right-radius: 0;
  368. }
  369.  
  370. .dd3-handle:before {
  371.   content: '≡';
  372.   display: block;
  373.   position: absolute;
  374.   left: 0;
  375.   top: 3px;
  376.   width: 100%;
  377.   text-align: center;
  378.   text-indent: 0;
  379.   color: #fff;
  380.   font-size: 20px;
  381.   font-weight: normal;
  382. }
  383.  
  384. .dd3-handle:hover {
  385.   background: #ddd;
  386. }
  387.  
  388.  
  389. /*
  390. * Nestable++
  391. */
  392. .button-delete {
  393.   position: absolute;
  394.   top: 4px;
  395.   right: 40px;
  396. }
  397.  
  398. .button-edit {
  399.   position: absolute;
  400.   top: 4px;
  401.   right: 5px;
  402. }
  403.  
  404. #saveButton {
  405.   padding-right: 30px;
  406.   padding-left: 30px;
  407. }
  408.  
  409. .output-container {
  410.   margin-top: 20px;
  411. }
  412.  
  413. #json-output {
  414.   margin-top: 20px;
  415. }
  416. </style>