Search the Community

En este caso se usará CDN para que sea mejor 1 - En inc/class/c.admin.php buscamos function saveOrden() { ... todo ... } y lo reemplazamos por public function saveOrden() { global $tsCore; # $ordenado = []; # Obtenemos lista con el nuevo orden $nuevo_orden = 1; foreach (explode(',', $_POST["cats"]) as $orden) { db_exec([__FILE__, __LINE__], 'query', "UPDATE p_categorias SET c_orden = ".$nuevo_orden." WHERE cid = ".$orden); array_push($ordenado, $nuevo_orden); $nuevo_orden++; } } 2 - En inc/php/ajax/ajax.admin.php buscan 'admin-badwords-delete' => array('n' => 4, 'p' => ''), y debajo agregan 'admin-ordenar-categorias' => array('n' => 4, 'p' => ''), más abajo buscan case 'admin-badwords-delete': //<--- echo $tsAdmin->deleteBadWord(); //---> break; y debajo agregan case 'admin-ordenar-categorias': //<--- echo $tsAdmin->saveOrden(); //---> break; 3 - Luego en tema/templates/admin_mods/m.admin_cats.tpl y buscamos, puedes eliminar jquery.tablednd.js si quieres <script type="text/javascript" src="{$tsConfig.js}/jquery.tablednd.js"></script> y lo reemplazamos por, se usa la condicional ya que solo es donde se muestra la lista de categorías {if $tsAct == ''} <script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script> {/if} abajo de eso buscamos <script type="text/javascript"> // {literal} $(function(){ // {/literal} {if $tsAct == ''} {literal} $('#cats_orden').tableDnD({ onDrop: function(table, row) { $.ajax({ type: 'post', url: global_data.url + '/admin/cats?ajax=true&ordenar=true', cache: false, data: $.tableDnD.serialize() }); } }); // {/literal} {/if} {literal} $('#cats_orden').tableDnD({ onDrop: function(table, row) { $.ajax({ type: 'post', url: global_data.url + '/admin/cats?ajax=true&ordenar=true&t=cat', cache: false, data: $.tableDnD.serialize() }); } }); // $('#cat_img').change(function(){ var cssi = $("#cat_img option:selected").css('background'); $('#c_icon').css({"background" : cssi}); }); // }); //{/literal} </script> y lo reemplazamos por {if $tsAct == '' || $tsAct == 'editar' || $tsAct == 'nueva'} <script> $(() => { /* {if $tsAct == ''} */ new Sortable(document.getElementById('cats_orden'), { animation: 150, dragClass: "arrastrar", // Clase que puedes modificar selectedClass: "seleccionado", // Clase que puedes modificar store: { // Guardar orden set: sortable => $.post(global_data.url + '/admin-ordenar-categorias.php', 'cats=' + sortable.toArray().join(',')) } }); /* {/if} */ $('#cat_img').on('change', () => { $('#c_icon').css({ "background": $("#cat_img option:selected").css('background') }) }); }) </script> {/if} más abajo buscan y le borran id="cats_orden" de <table cellpadding="0" cellspacing="0" border="0" width="500" align="center" class="admin_table" id="cats_orden"> un poco más abajo buscan y le añaden id="cats_orden" a <tbody> abajo buscan <tr id="{$c.cid}"> y lo reemplazan por <tr id="{$c.cid}" data-id="{$c.cid}"> Si quieres puedes añadir estas líneas en tema/css/admin.css .arrastrar { background-color: #EEE; } .seleccionado { background-color: #CCC; } Si quieres obtener más información sobre el complemento "SortableJS", puedes acceder a la página que contiene la documentación para que puedas hacer los cambios que desees!

En este caso se usará CDN para que sea mejor 1 - En tema/templates/modules/m.cuenta_sidebar.tpl y reemplazamos todo por esto <div class="sidebar-tabs clearbeta"> <h3>Mi Avatar</h3> <div class="avatar-big-cont"> <div style="display: none" class="avatar-loading"></div> <img width="120" height="120" alt="" src="{$tsConfig.url}/files/avatar/{if $tsPerfil.p_avatar}{$tsPerfil.user_id}_120{else}avatar{/if}.jpg?t={$smarty.now}" class="avatar-big" id="avatar-img"/> </div> <ul class="change-avatar" id="change"> <li class="local-file" id="pc" style="width: 50%;text-align:center;"><span>Local</span></li> <li class="url-file" id="url" style="width: 50%;text-align:center;"><span>Url</span></li> </ul> <div class="clearfix"></div> <a href="javascript:avatar.subir()" class="avatar-next edit" >Editar</a> </div> <div class="clearfix"></div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/croppr.min.css" integrity="sha256-Bbkel8+0sOmrvX75oDwNElgbmrAP+Pw+XXKKUwoKiVE=" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/croppr.min.js" integrity="sha256-VPADQYvd0gjLaeduvmP9/UZAdNW3D2sJieeJ3a3PX64=" crossorigin="anonymous"></script> <script src="{$tsConfig.js}/subir-avatar.js?{$smarty.now}"></script> 2 - Creamos un archivo llamado "subir-avatar.js" y lo agregamos en tema/js const next = $(".avatar-next"); const sizeImg = 120; function cambiarFile(){ const input = $('#file-avatar')[0]; if(input.files && input.files[0]) { let name_file = decodeURIComponent(input.files[0].name); document.querySelector(".drop-message").innerHTML = name_file; next.removeClass('btn-disabled') } } $("#url-avatar").on('keyup', () => { if($("#url-avatar").val().length > 5) next.removeClass('btn-disabled') }) $("#change > li, #change > li span").on('click', event => { const block = $("#change") block.attr('class', '') var tipo = event.target.textContent if(tipo === 'Local') { block.html(`<div id="drop-region"> <input type="file" name="local" id="file-avatar" onchange="return cambiarFile();" class="browse"/> <div class="drop-message"> Arrastra y suelta la imagen o haz clic para subir </div> </div>`) } else { block.html(`<div style="margin: 0 auto 10px auto;"> <input type="text" name="url" autocomplete="off" id="url-avatar" placeholder="Url de la imagen" class="browse form-control"/> </div>`) } }) var avatar = { uid: false, key: false, ext: false, informacion: '', current: false, success: false, subir: async () => { $(".avatar-loading").show().css('display', 'flex'); inputs = [].slice.call(document.querySelectorAll(".browse")) inputs.forEach(input => { const datoUrl = new FormData(); datoUrl.append('url', (input.name == 'url') ? input.value : input.files[0]) if(!empty(input.value)) { fetch(global_data.url + '/upload-avatar.php', { method: 'POST', body: datoUrl }) .then(response => response.json()) .then(blobData => { avatar.subida_exitosa(blobData) }); } }) }, subida_exitosa: rsp => { if (rsp.error == 'success') avatar.success = true; else if (rsp.msg) { avatar.key = rsp.key; avatar.ext = rsp.ext; avatar.cortar(rsp.msg); } else cuenta.enviar_alerta(rsp.error, 0); $(".avatar-loading").hide(); }, cortar: img => { img = img + '?t=' + new Date(); mydialog.show(true); mydialog.title("Cortar avatar"); mydialog.body(`<img class="avatar-cortar" src="${img}" />`); mydialog.buttons(true, true, 'Cortar', "avatar.guardar()", true, false, true, 'Cancelar', 'close', true, true); /*mydialog.buttons([ {mostrar: true, texto: 'Cortar', accion: `avatar.guardar()`, activo: true}, {mostrar: true, texto: 'Cancelar', accion: 'cerrar', activo: true} ]);*/ mydialog.center(); $("#avatar-img, #avatar-menu").attr("src", img).on('load', () => { var croppr = new Croppr('.avatar-cortar', { aspectRatio: 1, // Mantemos el tamanio cuadrado 1:1 maxSize: { width: sizeImg, // Tamano por defecto height: sizeImg // Tamano por defecto }, // Enviamos las coordenadas para cortar la imagen // Tiene la funcion onCropEnd ya que es como va a quedar onCropEnd: data => avatar.informacion = data, }); }); }, recargar: () => $("#avatar-img").attr("src", avatar.current + '?r' + new Date()), guardar: () => { if (empty(avatar.informacion)) cuenta.enviar_alerta('Debes seleccionar una parte de la foto', 0); else { const coordenadas = new FormData(); coordenadas.append('key', avatar.key) coordenadas.append('ext', avatar.ext) coordenadas.append('x', avatar.informacion.x) coordenadas.append('y', avatar.informacion.y) coordenadas.append('w', avatar.informacion.width) coordenadas.append('h', avatar.informacion.height) fetch(global_data.url + '/upload-crop.php', { method: 'POST', body: coordenadas }) .then(response => response.json()) .then(blobData => { if(blobData.error == "success") { mydialog.body("Tu avatar se ha creado correctamente, ahora espera que recargue la página"); setTimeout(() => location.reload(), 1200); mydialog.buttons(false) } }); } } } 3 - Luego en tema/js/cuenta.js buscar¿ var avatar = { ..... y borran todo hasta el final del archivo 4 - Luego van a inc/php/ajax.upload.php y lo reemplazan por esto <?php if ( ! defined('TS_HEADER')) exit('No se permite el acceso directo al script'); /** * Controlador AJAX * * @name ajax.upload.php * @author PHPost Team */ /**********************************\ * (VARIABLES POR DEFAULT) * \*********************************/ // NIVELES DE ACCESO Y PLANTILLAS DE CADA ACCIÓN $files = array( 'upload-avatar' => array('n' => 2, 'p' => ''), 'upload-crop' => array('n' => 2, 'p' => ''), 'upload-images' => array('n' => 2, 'p' => ''), ); /**********************************\ * (VARIABLES LOCALES ESTE ARCHIVO) * \*********************************/ // REDEFINIR VARIABLES $tsPage = 'php_files/p.upload.'.$files[$action]['p']; $tsLevel = $files[$action]['n']; $tsAjax = empty($files[$action]['p']) ? 1 : 0; /**********************************\ * (INSTRUCCIONES DE CODIGO) * \*********************************/ // DEPENDE EL NIVEL $tsLevelMsg = $tsCore->setLevel($tsLevel, true); if($tsLevelMsg != 1) { echo '0: '.$tsLevelMsg['mensaje']; die();} // CLASE require('../class/c.upload.php'); $tsUpload = new tsUpload(); // CODIGO switch($action){ case 'upload-avatar': // <-- $tsUpload->image_scale = true; $tsUpload->image_size['w'] = 640; $tsUpload->image_size['h'] = 480; // $tsUpload->file_url = $_POST['url']; // $result = $tsUpload->newUpload(3); echo json_encode($result); // --> break; case 'upload-crop': // <-- echo json_encode($tsUpload->cropAvatar($tsUser->uid)); // PARA EL PERFIL db_exec(array(__FILE__, __LINE__), 'query', 'UPDATE u_perfil SET p_avatar = 1 WHERE user_id = ' . $tsUser->uid); // --> break; case 'upload-images': echo json_encode($tsUpload->newUpload(1)); break; } Eso es todo...

Bueno hace tiempo hice este cambio para el modal, el cual facilitaría la creaciones de modales con botones. Antes se tenia que usar así: mydialog.buttons(true, true, 'SI', "bloquear('"+user+"', true, '"+lugar+"', true)", true, false, true, 'NO', 'close', true, true); Ahora es poco más largo, pero más fácil de entender mydialog.buttons([ {mostrar:true,texto:'SI',accion:"bloquear('"+user+"', true, '"+lugar+"', true)",activo:true}, {mostrar:true,texto:'NO',accion:'cerrar',activo:true} ]) Tiene varias maneras de poder emplearlo, la primera es como se muestra en el código de arriba ↑ y las otras 2 son de estas formas: mydialog.buttons({mostrar:true,texto:'SI',accion:"bloquear('"+user+"', true, '"+lugar+"', true)",activo:true}) mydialog.buttons(false) // Puede ser true Y se le podrá agregar más de 2 botones, puede ser 3,4, etc... Vamos al archivo acciones.js, buscamos buttons: function(display_all, btn1_display, btn1_val, btn1_action, btn1_enabled, btn1_focus, btn2_display, btn2_val, btn2_action, btn2_enabled, btn2_focus){ ... TODO EL CODIGO INCLUIDO ... }, La reemplazamos por buttons: function(object) { let agregar_botones = ''; // Es un objeto... if(typeof object === 'object') { // Es un Arreglo (array)... if(Array.isArray(object)) { for(let i = 0; i < object.length; i++) { if(object[i].mostrar) { let clase = !empty(object[i].clase) ? object[i].clase : (!i ? 'btnOk' : 'btnCancel'); let activo = object[i].activo ? '' : ' disabled' // Si la acción es igual a "cerrar" let accion = (object[i].accion == 'cerrar') ? ` onclick="mydialog.close()"` : ` onclick="${object[i].accion}"` agregar_botones += `<input type="button" class="mBtn ${clase}${activo}" style="display:inline-block" value="${object[i].texto}"${accion}${activo} >`; } } } else { if(object.mostrar) { let clase = !empty(object.clase) ? object.clase : 'btnOk'; let activo = object.activo ? '' : ' disabled' // Si la acción es igual a "cerrar" o contiene una función let accion = (object.accion == 'cerrar') ? `onclick="mydialog.close()"` : ` onclick="${object.accion}"` agregar_botones += `<input type="button" class="mBtn ${clase}${activo}" style="display:inline-block" value="${object.texto}"${accion}${activo}>`; } } // Si el boolean es TRUE entonces mostrará este botón por defecto, si es FALSE no mostrará nada } else if(typeof object === 'boolean') { agregar_botones += object ? `<input type="button" class="mBtn btnOk" style="display:inline-block" value="Aceptar" onclick="mydialog.close()">` : '' } $('#mydialog #buttons').html(agregar_botones) }, El objeto que se puede pasar, si solo contendrá un botón pude ir solo el objeto, en caso que sean 2 o más botones deberá ir así [ { ... PARAMETROS DEL OBJETO 1 ... }, { ... PARAMETROS DEL OBJETO 2 ... } ] Los parámetros que se pueden usar { mostrar: boolean, // TRUE o FALSE texto: string, // El texto que se mostrará accion: string, // Función que se empleará o "cerrar" activo: boolean, // TRUE o FALSE clase: string // Opcional, puede incluir clase para modificar la apariencia del botón } Espero que sea clara la explicación y lo puedan entender...