#9073 added design v1
This commit is contained in:
Daniel Cebrian
parent
e62dee1c62
commit
6619cf059d
|
|
@ -127,31 +127,36 @@ class TipsWindow
|
|||
public function run()
|
||||
{
|
||||
ui_require_css_file('tips_window');
|
||||
ui_require_css_file('jquery.bxslider');
|
||||
ui_require_javascript_file('tipsWindow');
|
||||
echo '<div id="tips_window_modal" class="invisible"></div>';
|
||||
ui_require_javascript_file('jquery.bxslider.min');
|
||||
echo '<div id="tips_window_modal"></div>';
|
||||
?>
|
||||
|
||||
|
||||
<script>
|
||||
load_modal({
|
||||
target: $('#tips_window_modal'),
|
||||
url: '<?php echo ui_get_full_url('ajax.php'); ?>',
|
||||
modal: {
|
||||
title: '<?php echo __('Hola! estos son los tips del día'); ?>',
|
||||
ok: '<?php echo __('De acuerdo'); ?>'
|
||||
},
|
||||
onshow: {
|
||||
page: '<?php echo $this->ajaxController; ?>',
|
||||
method: 'renderView',
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var totalTips = <?php echo $this->getTotalTips(); ?>;
|
||||
var idTips = [<?php echo $initialTip['id']; ?>];
|
||||
var url = '<?php echo ui_get_full_url('ajax.php'); ?>';
|
||||
var page = '<?php echo $this->ajaxController; ?>';
|
||||
</script>
|
||||
<script>
|
||||
if(totalTips > 0){
|
||||
load_tips_modal({
|
||||
target: $('#tips_window_modal'),
|
||||
url: '<?php echo ui_get_full_url('ajax.php'); ?>',
|
||||
modal: {
|
||||
title: '<?php echo __('Hola! estos son los tips del día'); ?>',
|
||||
next: '<?php echo __('De acuerdo'); ?>',
|
||||
close: '<?php echo __('Quizás luego'); ?>'
|
||||
},
|
||||
onshow: {
|
||||
page: '<?php echo $this->ajaxController; ?>',
|
||||
method: 'renderView',
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,42 +1,183 @@
|
|||
/* globals $, idTips, totalTips, idTips, url, page */
|
||||
$(".carousel").ready(function() {
|
||||
function render({ title, text, url, files }) {
|
||||
$("#title_tip").html(title);
|
||||
$("#text_tip").html(text);
|
||||
$("#url_tip").attr("href", url);
|
||||
$(".carousel .images").empty();
|
||||
|
||||
if (files) {
|
||||
files.forEach(file => {
|
||||
$(".carousel .images").append(`<img src="${file.filename}" />`);
|
||||
});
|
||||
$(".carousel").removeClass("invisible");
|
||||
} else {
|
||||
$(".carousel").addClass("invisible");
|
||||
}
|
||||
$(".carousel .images").ready(function() {
|
||||
if ($(".carousel .images img").length > 1) {
|
||||
$(".carousel .images").bxSlider({ controls: true });
|
||||
}
|
||||
});
|
||||
function render({ title, text, url, files }) {
|
||||
$("#title_tip").html(title);
|
||||
$("#text_tip").html(text);
|
||||
$("#url_tip").attr("href", url);
|
||||
$(".carousel .images").empty();
|
||||
|
||||
$("#next_tip").on("click", function() {
|
||||
if (idTips.length >= totalTips) {
|
||||
idTips = [];
|
||||
if (files) {
|
||||
files.forEach(file => {
|
||||
$(".carousel .images").append(`<img src="${file.filename}" />`);
|
||||
});
|
||||
$(".carousel").removeClass("invisible");
|
||||
} else {
|
||||
$(".carousel").addClass("invisible");
|
||||
}
|
||||
}
|
||||
|
||||
function next_tip() {
|
||||
if (idTips.length >= totalTips) {
|
||||
idTips = [];
|
||||
}
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: url,
|
||||
dataType: "json",
|
||||
data: {
|
||||
page: page,
|
||||
method: "getRandomTip",
|
||||
exclude: JSON.stringify(idTips)
|
||||
},
|
||||
success: function({ success, data }) {
|
||||
if (success) {
|
||||
idTips.push(parseInt(data.id));
|
||||
render(data);
|
||||
} else {
|
||||
//TODO control error
|
||||
}
|
||||
}
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: url,
|
||||
dataType: "json",
|
||||
data: {
|
||||
page: page,
|
||||
method: "getRandomTip",
|
||||
exclude: JSON.stringify(idTips)
|
||||
},
|
||||
success: function({ success, data }) {
|
||||
if (success) {
|
||||
idTips.push(parseInt(data.id));
|
||||
render(data);
|
||||
});
|
||||
}
|
||||
|
||||
function load_tips_modal(settings) {
|
||||
var data = new FormData();
|
||||
if (settings.extradata) {
|
||||
settings.extradata.forEach(function(item) {
|
||||
if (item.value != undefined) {
|
||||
if (item.value instanceof Object || item.value instanceof Array) {
|
||||
data.append(item.name, JSON.stringify(item.value));
|
||||
} else {
|
||||
//TODO control error
|
||||
data.append(item.name, item.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
data.append("page", settings.onshow.page);
|
||||
data.append("method", settings.onshow.method);
|
||||
if (settings.onshow.extradata != undefined) {
|
||||
data.append("extradata", JSON.stringify(settings.onshow.extradata));
|
||||
}
|
||||
|
||||
if (settings.target == undefined) {
|
||||
var uniq = uniqId();
|
||||
var div = document.createElement("div");
|
||||
div.id = "div-modal-" + uniq;
|
||||
div.style.display = "none";
|
||||
|
||||
if (document.getElementById("main") == null) {
|
||||
// MC env.
|
||||
document.getElementById("page").append(div);
|
||||
} else {
|
||||
document.getElementById("main").append(div);
|
||||
}
|
||||
|
||||
var id_modal_target = "#div-modal-" + uniq;
|
||||
|
||||
settings.target = $(id_modal_target);
|
||||
}
|
||||
|
||||
var width = 630;
|
||||
if (settings.onshow.width) {
|
||||
width = settings.onshow.width;
|
||||
}
|
||||
|
||||
if (settings.modal.overlay == undefined) {
|
||||
settings.modal.overlay = {
|
||||
opacity: 0.5,
|
||||
background: "black"
|
||||
};
|
||||
}
|
||||
|
||||
if (settings.beforeClose == undefined) {
|
||||
settings.beforeClose = function() {};
|
||||
}
|
||||
|
||||
settings.target.html("Loading modal...");
|
||||
settings.target
|
||||
.dialog({
|
||||
title: "Loading",
|
||||
close: false,
|
||||
width: 200,
|
||||
buttons: []
|
||||
})
|
||||
.show();
|
||||
|
||||
$.ajax({
|
||||
method: "post",
|
||||
url: settings.url,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
data: data,
|
||||
success: function(data) {
|
||||
if (settings.onshow.parser) {
|
||||
data = settings.onshow.parser(data);
|
||||
} else {
|
||||
data = (function(d) {
|
||||
try {
|
||||
d = JSON.parse(d);
|
||||
} catch (e) {
|
||||
// Not JSON
|
||||
return d;
|
||||
}
|
||||
if (d.error) return d.error;
|
||||
|
||||
if (d.result) return d.result;
|
||||
})(data);
|
||||
}
|
||||
settings.target.html(data);
|
||||
if (settings.onload != undefined) {
|
||||
settings.onload(data);
|
||||
}
|
||||
settings.target.dialog({
|
||||
resizable: true,
|
||||
draggable: true,
|
||||
modal: true,
|
||||
header: false,
|
||||
dialogClass: "dialog_tips",
|
||||
title: settings.modal.title,
|
||||
width: width,
|
||||
minHeight:
|
||||
settings.onshow.minHeight != undefined
|
||||
? settings.onshow.minHeight
|
||||
: "auto",
|
||||
maxHeight:
|
||||
settings.onshow.maxHeight != undefined
|
||||
? settings.onshow.maxHeight
|
||||
: "auto",
|
||||
overlay: settings.modal.overlay,
|
||||
position: {
|
||||
my: "top+20%",
|
||||
at: "top",
|
||||
of: window,
|
||||
collision: "fit"
|
||||
},
|
||||
closeOnEscape: true,
|
||||
close: function() {
|
||||
$(this).dialog("destroy");
|
||||
|
||||
if (id_modal_target != undefined) {
|
||||
$(id_modal_target).remove();
|
||||
}
|
||||
|
||||
if (settings.cleanup != undefined) {
|
||||
settings.cleanup();
|
||||
}
|
||||
},
|
||||
beforeClose: settings.beforeClose()
|
||||
});
|
||||
$(".dialog_tips .ui-dialog-titlebar").empty();
|
||||
$(".dialog_tips .ui-dialog-titlebar").append($(".tips_header").html());
|
||||
$(".tips_header").remove();
|
||||
$(".dialog_tips .ui-dialog-titlebar").addClass("tips_header");
|
||||
$(".dialog_tips .ui-dialog-titlebar").removeClass("ui-helper-clearfix");
|
||||
},
|
||||
error: function(data) {
|
||||
console.error(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,172 @@
|
|||
/** VARIABLES
|
||||
===================================*/
|
||||
/** RESET AND LAYOUT
|
||||
===================================*/
|
||||
.bx-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 60px;
|
||||
padding: 0;
|
||||
*zoom: 1;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.bx-wrapper img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.bxslider {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul.bxslider {
|
||||
list-style: none;
|
||||
}
|
||||
.bx-viewport {
|
||||
/*fix other elements on the page moving (on Chrome)*/
|
||||
-webkit-transform: translatez(0);
|
||||
}
|
||||
/** THEME
|
||||
===================================*/
|
||||
.bx-wrapper {
|
||||
-moz-box-shadow: 0 0 5px transparent;
|
||||
-webkit-box-shadow: 0 0 5px transparent;
|
||||
box-shadow: 0 0 5px transparent;
|
||||
border: 5px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
.bx-wrapper .bx-pager,
|
||||
.bx-wrapper .bx-controls-auto {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
}
|
||||
/* LOADER */
|
||||
.bx-wrapper .bx-loading {
|
||||
min-height: 50px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
}
|
||||
/* PAGER */
|
||||
.bx-wrapper .bx-pager {
|
||||
text-align: center;
|
||||
font-size: 0.85em;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.bx-wrapper .bx-pager.bx-default-pager a {
|
||||
background: #666;
|
||||
text-indent: -9999px;
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 5px;
|
||||
outline: 0;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.bx-wrapper .bx-pager.bx-default-pager a:hover,
|
||||
.bx-wrapper .bx-pager.bx-default-pager a.active,
|
||||
.bx-wrapper .bx-pager.bx-default-pager a:focus {
|
||||
background: #000;
|
||||
}
|
||||
.bx-wrapper .bx-pager-item,
|
||||
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.bx-wrapper .bx-pager-item {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
/* DIRECTION CONTROLS (NEXT / PREV) */
|
||||
.bx-wrapper .bx-prev {
|
||||
left: 10px;
|
||||
}
|
||||
.bx-wrapper .bx-prev:hover,
|
||||
.bx-wrapper .bx-prev:focus {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.bx-wrapper .bx-next {
|
||||
right: 10px;
|
||||
}
|
||||
.bx-wrapper .bx-next:hover,
|
||||
.bx-wrapper .bx-next:focus {
|
||||
background-position: -43px 0;
|
||||
}
|
||||
.bx-wrapper .bx-controls-direction a {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
outline: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
text-indent: -9999px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.bx-wrapper .bx-controls-direction a.disabled {
|
||||
display: none;
|
||||
}
|
||||
/* AUTO CONTROLS (START / STOP) */
|
||||
.bx-wrapper .bx-controls-auto {
|
||||
text-align: center;
|
||||
}
|
||||
.bx-wrapper .bx-controls-auto .bx-start {
|
||||
display: block;
|
||||
text-indent: -9999px;
|
||||
width: 10px;
|
||||
height: 11px;
|
||||
outline: 0;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.bx-wrapper .bx-controls-auto .bx-start:hover,
|
||||
.bx-wrapper .bx-controls-auto .bx-start.active,
|
||||
.bx-wrapper .bx-controls-auto .bx-start:focus {
|
||||
background-position: -86px 0;
|
||||
}
|
||||
.bx-wrapper .bx-controls-auto .bx-stop {
|
||||
display: block;
|
||||
text-indent: -9999px;
|
||||
width: 9px;
|
||||
height: 11px;
|
||||
outline: 0;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.bx-wrapper .bx-controls-auto .bx-stop:hover,
|
||||
.bx-wrapper .bx-controls-auto .bx-stop.active,
|
||||
.bx-wrapper .bx-controls-auto .bx-stop:focus {
|
||||
background-position: -86px -33px;
|
||||
}
|
||||
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
|
||||
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
}
|
||||
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
|
||||
right: 0;
|
||||
width: 35px;
|
||||
}
|
||||
/* IMAGE CAPTIONS */
|
||||
.bx-wrapper .bx-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #666;
|
||||
background: rgba(80, 80, 80, 0.75);
|
||||
width: 100%;
|
||||
}
|
||||
.bx-wrapper .bx-caption span {
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -7,15 +7,25 @@
|
|||
left: 0;
|
||||
z-index: 2001;
|
||||
}
|
||||
#tips_window_modal {
|
||||
padding: 0px;
|
||||
}
|
||||
.window {
|
||||
background-color: white;
|
||||
background-image: linear-gradient(180deg, #fffce8 0%, #ffffff 100%);
|
||||
width: 640px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tips_header {
|
||||
.ui-dialog .tips_header.ui-dialog-titlebar {
|
||||
display: flex;
|
||||
padding: 0px 20px;
|
||||
justify-content: space-between;
|
||||
height: fit-content;
|
||||
background-color: white;
|
||||
color: #161628;
|
||||
}
|
||||
.tips_header .title {
|
||||
font-size: 15px;
|
||||
}
|
||||
.description {
|
||||
padding: 20px;
|
||||
|
|
@ -30,8 +40,11 @@
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
height: 400px;
|
||||
max-width: 464px;
|
||||
max-height: 290px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.carousel .prev_step {
|
||||
position: absolute;
|
||||
|
|
@ -65,7 +78,63 @@
|
|||
.carousel .images img {
|
||||
width: 100%;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.dialog_tips .ui-dialog-buttonset {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#tips_window_modal .ui-dialog-buttonset button.submit-cancel-tips {
|
||||
border-radius: 6px;
|
||||
color: #14524f;
|
||||
width: fit-content;
|
||||
font-size: 15px;
|
||||
border: 1px solid #14524f;
|
||||
height: 35px;
|
||||
margin: 0px;
|
||||
background-color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
#tips_window_modal .ui-dialog-buttonset button.submit-next-tips {
|
||||
border-radius: 6px;
|
||||
color: #ffffff;
|
||||
width: fit-content;
|
||||
font-size: 15px;
|
||||
border: 1px solid #14524f;
|
||||
background-color: #14524f;
|
||||
height: 35px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dialog_tips {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.dialog_tips .ui-widget-header {
|
||||
margin: 0px !important;
|
||||
}
|
||||
.dialog_tips .tips_header {
|
||||
border-top-right-radius: 10px !important;
|
||||
border-top-left-radius: 10px !important;
|
||||
}
|
||||
#tips_window_modal .ui-dialog-buttonset button {
|
||||
margin: 0px 20px !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
.dialog_tips .ui-dialog-buttonset {
|
||||
border-bottom-right-radius: 10px !important;
|
||||
border-bottom-left-radius: 10px !important;
|
||||
border-top: 1px solid #c1ccdc;
|
||||
}
|
||||
#title_tip {
|
||||
font-size: 15px;
|
||||
color: #161628;
|
||||
}
|
||||
#text_tip {
|
||||
color: #161628;
|
||||
}
|
||||
#url_tip {
|
||||
font-size: 13px;
|
||||
color: #14524f;
|
||||
font-weight: 600;
|
||||
}
|
||||
#url_tip .arrow_tips {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,37 @@
|
|||
<?php
|
||||
/**
|
||||
* Dashboards Modal for tips
|
||||
*
|
||||
* @category Console Class
|
||||
* @package Pandora FMS
|
||||
* @subpackage Dashboards
|
||||
* @version 1.0.0
|
||||
* @license See below
|
||||
*
|
||||
* ______ ___ _______ _______ ________
|
||||
* | __ \.-----.--.--.--| |.-----.----.-----. | ___| | | __|
|
||||
* | __/| _ | | _ || _ | _| _ | | ___| |__ |
|
||||
* |___| |___._|__|__|_____||_____|__| |___._| |___| |__|_|__|_______|
|
||||
*
|
||||
* ============================================================================
|
||||
* Copyright (c) 2005-2021 Artica Soluciones Tecnologicas
|
||||
* Please see http://pandorafms.org for full contribution list
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public License
|
||||
* as published by the Free Software Foundation for version 2.
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
* ============================================================================
|
||||
*/
|
||||
?>
|
||||
<div class="window">
|
||||
<div class="tips_header">
|
||||
<p><input type="checkbox" name="tips_in_start"/>Ver típs al iniciar</p>
|
||||
<p class="title"><?php echo __('¡Hola! estos son los tips del día.'); ?></p>
|
||||
<p><?php echo html_print_checkbox('tips_in_start', true, true, true); ?>Ver típs al iniciar</p>
|
||||
</div>
|
||||
<div class="carousel <?php echo ($files === false) ? 'invisible' : ''; ?>">
|
||||
<button class="next_step">></button>
|
||||
<div class="images">
|
||||
<?php if ($files !== false) : ?>
|
||||
<?php foreach ($files as $key => $file) : ?>
|
||||
|
|
@ -11,7 +39,6 @@
|
|||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<button class="prev_step"><</button>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
|
|
@ -19,9 +46,13 @@
|
|||
<p id="text_tip">
|
||||
<?php echo $text; ?>
|
||||
</p>
|
||||
<a href="<?php echo $url; ?>" id="url_tip"><?php echo __('Más información'); ?></a>
|
||||
<?php if (empty($url) === false) : ?>
|
||||
<a href="<?php echo $url; ?>" id="url_tip"><?php echo __('Ver más info'); ?> <span class="arrow_tips">→</span></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button id="next_tip"><?php echo __('Siguiente'); ?></button>
|
||||
|
||||
<div class="ui-dialog-buttonset">
|
||||
<button type="button" class="submit-cancel-tips ui-button ui-corner-all ui-widget">Quizás luego</button>
|
||||
<button type="button" class="submit-next-tips ui-button ui-corner-all ui-widget">De acuerdo</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue