ONO::Lib::Content::Tutorial
package ONO::Lib::Content::Tutorial;
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2000-2025 Jos KIRPS [ www.kirps.com | jos_AT_kirps_DOT_com ]
# and The Joopita Project [ www.joopita.org | contact_AT_joopita_DOT_com ]
#
# This file, as well as other parts of the ONO Software Project or related
# elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# 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.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
use strict;
use ONO::IO;
###############################################################################
# tutorial
###############################################################################
#
#: Tutorial content. Please note that is feature is EOL, it may become obsolete and deprecated soon.
#:
#: format:
#: - type:id;x_pos;y_pos;width;data (with ID, required when using the editor mode)
#: - type;x_pos;y_pos;width;data (without ID)
#:
#: types:
#:
#: - box (text),
#: - box_color (replace 'color' by hex value)
#: - up / down / left / right
#: - header (warning: needs to be parsed externally)
#: - border (warning: needs to be parsed externally)
#: - setup (warning: needs to be parsed externally)
#: - image
#: - frame (or "focus" for legacy apps)
sub render {
my (
$self,
$script_url,
$page,
$pages,
$image,
$boxes_ref,
$BLK_ref,
$setup_ref,
) = @_;
my @boxes = @$boxes_ref;
my %BLK = %$BLK_ref;
my %setup;
if ($setup_ref) {
%setup = %$setup_ref;
}
my ($BOXES,$FLOAT,$DEBUG);
foreach my $box (@boxes) {
if ($box !~ /^#/) {
if (ONO::IO->devstation) {
$DEBUG .= "$box<br>";
}
my @bp = split(/\;/,$box);
my $color;
my $ax = 0;
my $ay = 0;
my $bx = 0;
my $by = 0;
my $top = "top";
my $left = "left";
if ($box =~ /^border:noborder;/) {
$setup{'disable_shadow'}++;
$setup{'disable_border'}++;
}
if ($setup{'ratio'}) {
$bp[1] = int($bp[1]*$setup{'ratio'});
$bp[2] = int($bp[2]*$setup{'ratio'});
if ($bp[3] =~ /x/) {
my @bpp = split(/x/,$bp[3]);
$bp[3] = int($bpp[0]*$setup{'ratio'})."x".int($bpp[1]*$setup{'ratio'});
} else {
$bp[3] = int($bp[3]*$setup{'ratio'});
}
if ($bp[0] eq "focus") {
$bp[4] = int($bp[4]*$setup{'ratio'});
}
}
my $ID;
if ($bp[0] =~ s~:(.*)$~~) {
$ID = $1;
}
if ($bp[0] =~ s~^(box|ticket)_(.*?)$~$1~) {
$color = $2;
}
if ($bp[0] eq "up") {
$ax = -17;
$ay = -10;
$bx = -int($bp[3]/2);
$by = 21;
}
if ($bp[0] eq "down") {
$top = "bottom";
$ax = -17;
$ay = -22;
$bx = -int($bp[3]/2);
$by = 53;
}
if ($bp[0] eq "up" || $bp[0] eq "down") {
if ($bp[1] + int($bp[3]/2) > 930) {
$left = "right";
$bx = 0;
}
}
if ($bp[0] eq "left") {
$ax = -12;
$ay = -16;
$bx = 31+$ax;
$by = -5+$ay;
}
if ($bp[0] eq "right") {
$left = "right";
$ax = -22;
$ay = -16;
$bx = 31-$ax;
$by = -5+$ay;
}
my ($DRAG,$DRAG_ID,$DRAG_BOX,$DRAG_TRANS);
if ($setup{'editor'}) {
$DRAG = qq~ draggable="true"~;
if ($ID) {
$DRAG_ID = qq~ id="draggable_$ID"~;
$DRAG_BOX = qq~ id="draggable_${ID}_box"~;
}
}
my $width = $bp[3];
my $height = $bp[3];
my $ROT;
if ($bp[3] =~ /^(.*?)x(.*?)$/) {
$width = $1;
$height = $2;
}
if ($bp[3] =~ /^(.*?)x(.*?)x(.*?)$/) {
$width = $1;
$height = $2;
$ROT = ";transform:rotate(${3}deg);-ms-transform:rotate(${3}deg);-webkit-transform:rotate(${3}deg)";
}
my $dim = "64x64";
if ($width > 64 || $height > 64) {
$dim = "128x128";
}
if ($bp[0] eq "image") {
if ($setup{'editor'}) {
my $IMG;
if ($bp[4] =~ m~/~) {
my $rand = 1000+int(rand(8999));
$IMG = qq~<img class="block abs" src="$bp[4]?$rand" style="top:0px;left:0px;width:${width}px;height:${height}px" alt="">~;
if ($bp[5] =~ /s/) {
$IMG = qq~<div class="shadow">$IMG</div>~;
}
}
$BOXES .= qq~<div$DRAG_ID class="abs bo" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
$IMG
<div$DRAG_BOX class="abs" style="op:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_img_url'}=$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:10px;right:30px" alt="">
</a>
<a href="$setup{'delete_img_url'}=$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:10px;right:10px" alt="">
</a>
</div>
~;
} else {
if ($bp[4] =~ m~/~) {
my $IMG = qq~<img class="block abs" src="$bp[4]" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT" alt="">~;
if ($bp[5] =~ /(s|b)/) {
my $CLASS;
if ($bp[5] =~ /s/) {
$CLASS .= " shadow";
}
if ($bp[5] =~ /b/) {
$CLASS .= " bo";
}
$IMG = qq~<div class="abs$CLASS" style="left:$bp[1]px;top:$bp[2]px$ROT"><img class="block" src="$bp[4]" style="width:${width}px;height:${height}px" alt=""></div>~;
}
if ($bp[5] =~ /f/) {
$FLOAT .= $IMG;
} else {
$BOXES .= $IMG;
}
}
}
}
# focus is only here for legacy stuff, will probably be dropped later on !!!
if ($bp[0] eq "focus") {
$BOXES .= qq~<div class="block abs radius10 trans50" style="border:5px solid #990000;left:$bp[1]px;top:$bp[2]px;width:$bp[3]px;height:$bp[4]px"></div>~;
}
# header
if ($bp[0] eq "header") {
my ($HIDE,$SHOW);
if ($setup{'editor'} && !$setup{'header_nohide'}) {
$HIDE = qq~<div class="abs" style="top:5px;right:5px">
<a href="javascript:void(0);" onclick="onojs_hide('draggable_$ID');onojs_block('tutorial_header_show');"
class="button button_small">$BLK{'hide'}</a>
</div>
~;
$SHOW = qq~<div id="tutorial_header_show" class="abs hide" style="top:5px;right:5px">
<a href="javascript:void(0);" onclick="onojs_block('draggable_$ID');onojs_hide('tutorial_header_show');"
class="button button_small">$BLK{'header'} - $BLK{'show'}</a>
</div>
~;
}
$BOXES .= qq~$SHOW<div$DRAG_ID class="block abs" style="left:0px;top:0px;width:100%"><!-- publisher_screen_header_$ID -->$HIDE</div>~;
}
# border (will do nothing but transmitting the border ID to apply...)
if ($bp[0] eq "border") {
$BOXES .= qq~<!-- publisher_screen_border_$ID -->~;
if ($ID eq "movie") {
$setup{'round_corners'} = 10;
}
if ($ENV{'HTTP_USER_AGENT'} !~ /(iPhone|iPad|iPod|Android)/i) {
if ($ID eq "browser") {
$setup{'disable_shadow'} = 1;
}
if ($ID =~ /^(computer|laptop|tablet)$/) {
$setup{'border_color'} = "#333333";
}
}
}
# frame replaces the legacy focus type
if ($bp[0] eq "frame") {
if (!$bp[4]) {
$bp[4] = "red";
}
if ($setup{'editor'}) {
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<div$DRAG_BOX class="block abs radius10 trans50" style="border:5px solid $bp[4];left:0px;top:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=frame_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=frame_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<div class="block abs radius10 trans50" style="border:5px solid $bp[4];left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"></div>~;
}
}
if ($bp[0] eq "flag") {
# large flag is not available !!!
$dim = "64x64";
if ($setup{'editor'}) {
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<img class="block abs" src="/ono/osr/images/icons/crystal/$dim/apps/flag.png" style="left:0px;top:0px;width:${width}px;height:${height}px" alt="">
<div$DRAG_BOX class="abs" style="op:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=flag_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=flag_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<img class="block abs" src="/ono/osr/images/icons/crystal/$dim/apps/flag.png" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT" alt="">~;
}
}
if ($bp[0] eq "icon") {
if ($setup{'editor'}) {
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<img class="block abs" src="/ono/osr/images/icons/crystal/64x64/$bp[4].png" style="left:0px;top:0px;width:${width}px;height:${height}px" alt="">
<div$DRAG_BOX class="abs" style="op:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=icon_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=icon_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<img class="block abs" src="/ono/osr/images/icons/crystal/64x64/$bp[4].png" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT" alt="">~;
}
}
if ($bp[0] eq "graphic") {
my @gp = split(/-/,$bp[4]);
if (!$gp[1]) {
$gp[1] = "black";
}
my ($STYLE,$MORE,$editor_border);
if ($gp[0] =~ /(rectangle|circle)/ && $gp[2]) {
$STYLE .= qq~;border:5px solid $gp[2]~;
}
if ($gp[0] =~ /(circle)/) {
$editor_border = " bo";
$height = $width;
my $radius = int($width/2);
$STYLE .= qq~;border-radius:${radius}px;-moz-border-radius:${radius}px;-webkit-border-radius:${radius}px~;
}
if ($gp[0] =~ /arrow/) {
$MORE = qq~<div class="block abs" style="right:-5px;top:-6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)"></div>~;
$MORE .= qq~<div class="block abs" style="right:-5px;top:6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg)"></div>~;
}
if ($gp[0] =~ /arrow2/) {
$MORE .= qq~<div class="block abs" style="left:-5px;top:-6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg)"></div>~;
$MORE .= qq~<div class="block abs" style="left:-5px;top:6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)"></div>~;
}
if ($setup{'editor'}) {
my $editor_width = $width;
my $editor_height = $height;
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<div class="block abs" style="left:0px;top:0px;width:${width}px;height:${height}px;background-color:$gp[1]$STYLE"></div>
$MORE
<div$DRAG_BOX class="abs" style="top:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=graphic_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=graphic_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<div class="block abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px;background-color:$gp[1]$STYLE;$ROT">$MORE</div>~;
}
}
if ($bp[0] eq "setup" && $bp[2] =~ /g/) {
$setup{'enable_grid'}++;
}
# box_ : standard text boxes and more....
if ($bp[0] !~ /^(image|focus|frame|flag|header|border|setup|icon|graphic)$/) {
my $pos_x = $bp[1]+$bx;
my $pos_y = $bp[2]+$by;
if (!$setup{'disable_pos_correction'}) {
my $whilecounter;
while ($pos_x < 10 && $whilecounter < 256) {
$whilecounter++;
$bx = $bx+10;
$pos_x = $bp[1]+$bx;
}
while ($pos_x > 910 && $whilecounter < 256) {
$whilecounter++;
$bx = $bx-10;
$pos_x = $bp[1]+$bx;
}
}
my $CONTENT = $bp[4];
$CONTENT =~ s~ \& ~ \&\; ~;
my ($ARROW,$RESIZE);
if ($bp[0] !~ /^(box|note|trans|ticket)/) {
$ARROW .= qq~ <img class="block32 rel" src="/ono/osr/images/arrows/nuvola/white32shadow/nav_$bp[0].png" style="left:${ax}px;top:${ay}px;z-index:3" alt="">~;
}
if ($setup{'editor'}) {
# the 'empty_inline_editor' switch leaves the inline editor textarea blank,
# which is required for multi-language editing for example.
my $EDITAREA = $CONTENT;
if ($CONTENT =~ s~#:empty_inline_editor:#~~) {
$EDITAREA = "";
}
my ($EDIT,$SETUP,$DELETE);
if (!$setup{'disable_object_edit'}) {
my $EDIT_ICON = "/ono/osr/images/icons/ono/32x32/edit.png";
my $EDIT_SIZE = 16;
my $EDIT_POS = "fr";
my $EDIT_STYLE;
if ($setup{'object_edit_alt_icon'}) {
$EDIT_ICON = $setup{'object_edit_alt_icon'};
if ($EDIT_ICON =~ s~^(.*?):(.*?):(.*?):(.*?)$~$1~) {
$EDIT_SIZE = $2;
$EDIT_POS = "abs";
$EDIT_STYLE = qq~ style="top:${3}px;right:${4}px"~;
}
}
$EDIT = qq~<a href="javascript:void(0);" onclick="onojs_hide('draggable_content_draggable_$ID');onojs_block('draggable_editor_draggable_$ID');">
<img class="block$EDIT_SIZE ml5 $EDIT_POS" src="$EDIT_ICON"$EDIT_STYLE alt="">
</a>
~;
if ($setup{'object_edit_url'}) {
$EDIT = qq~<a href="$setup{'object_edit_url'}=$ID"><img class="block$EDIT_SIZE ml5 $EDIT_POS" src="$EDIT_ICON"$EDIT_STYLE alt=""></a>~;
}
}
if (!$setup{'disable_object_setup'}) {
$SETUP = qq~<a href="$setup{'setup_url'}=$ID"><img class="block16 ml5 fr" src="/ono/osr/images/icons/ono/32x32/setup.png" alt=""></a>~;
}
if (!$setup{'disable_object_delete'}) {
$DELETE = qq~<a href="$setup{'delete_url'}=$ID"><img class="block16 ml5 fr" src="/ono/osr/images/icons/ono/32x32/delete.png" alt=""></a>~;
}
my ($TEXTAREA,$ICONS);
if (!$setup{'object_edit_url'}) {
$TEXTAREA = qq~<div class="hide" id="draggable_editor_draggable_$ID">
<img class="abs close" src="/ono/osr/images/icons/crystal/32x32/ono/close.png" style="top:5px;right:5px" alt=""
onclick="onojs_block('draggable_content_draggable_$ID');onojs_hide('draggable_editor_draggable_$ID');">
<textarea name="draggable_editor_draggable_$ID" class="w95 h50">$EDITAREA</textarea>
</div>
~;
}
if ("$DELETE$SETUP$EDIT") {
$ICONS = qq~<div class="abs" style="top:-5px;right:10px">$DELETE$SETUP$EDIT</div>~;
}
$CONTENT = qq~ <div id="draggable_content_draggable_$ID">
$ICONS
$CONTENT
</div>
$TEXTAREA
~;
if (!$setup{'disable_object_resize'}) {
$RESIZE .= qq~ <img id="draggable_resizer_draggable_$ID" class="block16 abs" src="/ono/osr/images/icons/crystal/16x16/actions/indent_task.png" alt=""
style="right:-5px;bottom:0px;cursor:se-resize;">~;
}
}
my $CLASS = "box_white";
my $BG;
if ($color) {
if ($color =~ /^(white|black|red|green|blue|yellow)$/) {
$CLASS = "box_$color";
} else {
$CLASS = "radius10 shadow";
$BG = "background-color:#$color;";
}
}
if ($bp[0] eq "note") {
$CLASS = "shadow";
$BG = "background-color:#ffee88;background-image:url('/ono/osr/images/web/elements/note.jpg');background-position:right bottom;background-repeat:no-repeat;";
}
if ($bp[0] =~ /^ticket/) {
$CLASS = "shadow";
}
if ($bp[0] eq "trans" || $bp[0] eq "transe") {
$CLASS = "";
if ($setup{'editor'}) {
$CLASS = "bo";
}
}
if ($bp[0] eq "transe") {
$CLASS .= " cole";
}
if ($setup{'transmit_object_id'}) {
$CONTENT .= qq~<!-- tutorial_object_id_$ID -->~;
}
if ($setup{'ratio'}) {
my $font_size = int(100*$setup{'ratio'});
$CONTENT = qq~<div style="font-size:$font_size%">$CONTENT</div>~;
}
my $ROT;
if ($bp[3] =~ s~xx(.*)$~~) {
$ROT = ";transform:rotate(${1}deg);-ms-transform:rotate(${1}deg);-webkit-transform:rotate(${1}deg)";
}
# z-index:1 -> has been removed to respect layer order, does this hurt anything?
$BOXES .= qq~<div$DRAG_ID class="trans98 abs" style="left:$bp[1]px;top:$bp[2]px"$DRAG>
<div$DRAG_BOX class="$CLASS abs" style="${BG}width:$bp[3]px;padding:10px;$left:${bx}px;$top:${by}px;z-index:2$ROT">
$CONTENT$RESIZE
</div>
$ARROW
</div>
~;
}
}
}
my $IMG_CLASS;
if ($image =~ s~:(.*?)$~~) {
$IMG_CLASS = " $1";
}
if ($page > $pages) {
$page = $pages;
}
my $prev = $page - 1;
my $next = $page + 1;
if ($prev < 2) {
$prev = 1;
}
if ($prev > $pages) {
$prev = $pages;
}
my $first = 1;
if ($setup{'page_first'}) {
$first = $setup{'page_first'};
}
if ($setup{'page_prev'}) {
$prev = $setup{'page_prev'};
}
if ($setup{'page_next'}) {
$next = $setup{'page_next'};
}
my $margin_top = 10;
my $icon_size = 16;
if ($ENV{'HTTP_USER_AGENT'} =~ /(ipad|iphone)/i) {
$margin_top = 0;
$icon_size = 24;
}
if ($setup{'margin_top'} =~ /x/i) {
$margin_top = 0;
}
$BOXES =~ s~###NEXT###~<a href="$script_url=$next" class="button_green">$BLK{'continue'}...</a>~g;
$BOXES =~ s~###PREV###~<a href="$script_url=$prev" class="button_green">$BLK{'previous'}</a>~g;
my $SCREEN = &screen(
"",
$image,$IMG_CLASS,
$BOXES,
$script_url,
$page,$pages,$first,$prev,$next,
$icon_size,
$margin_top,
\%setup,
$BLK_ref,
$FLOAT,
$DEBUG,
);
if ($setup{'rel_up'}) {
$SCREEN = qq~<div class="rel" style="bottom:$setup{'rel_up'}px">$SCREEN</div>~;
}
return $SCREEN;
}
###############################################################################
# screen
###############################################################################
sub screen {
my (
$self,
$image,$IMG_CLASS,
$content,
$script_url,
$page,$pages,$first,$prev,$next,
$icon_size,
$margin_top,
$setup_ref,
$BLK_ref,
$FLOAT,
$DEBUG,
) = @_;
my %setup = %$setup_ref;
my %BLK = %$BLK_ref;
my $width = 920;
my $height = 480;
if ($setup{'width'}) {
$width = $setup{'width'};
}
if ($setup{'height'}) {
$height = $setup{'height'};
}
if ($setup{'scale'}) {
$height = int($height*$setup{'scale'});
$width = int($width*$setup{'scale'});
}
my ($SAVE,$OVERFLOW);
if ($setup{'editor'}) {
$SAVE = qq~<td>$BLK{'submit_save_small'}</td>~;
} else {
$OVERFLOW = ";overflow:hidden";
}
my $PREV = qq~<img class="block$icon_size" src="/ono/osr/images/spacer/trans.gif" alt="">~;
my $NEXT = qq~<a href="$script_url=$first"><img class="block$icon_size" src="/ono/osr/images/icons/crystal/32x32/actions/reload.png" alt=""></a>~;
if ($page > 1) {
$PREV = qq~<a href="$script_url=$prev"><img class="block$icon_size" src="/ono/osr/images/arrows/nuvola/green/nav_previous.png" alt=""></a>~;
}
if ($page < $pages) {
$NEXT = qq~<a href="$script_url=$next"><img class="block$icon_size" src="/ono/osr/images/arrows/nuvola/green/nav_next.png" alt=""></a>~;
}
my ($NAV,$PAGES);
if ($pages && !$setup{'nav_disable'}) {
$PAGES = qq~<td>$PREV</td>
<td class="bold" style="padding:2px 20px 2px 20px">$page / $pages</td>
<td>$NEXT</td>
~;
}
if ($PAGES || $SAVE) {
my $nav_width = 200;
if ($pages && $SAVE) {
$nav_width = 250;
}
$NAV = qq~<div class="box_white auto rel" style="padding:5px;bottom:5px;width:${nav_width}px;z-index:1">
<table class="default_table auto">
<tr>
$SAVE
$PAGES
</tr>
</table>
</div>
~;
}
my ($IMG,$GRID,$ROUND_CORNERS,$SHADOW,$BORDER,$BORDER_COLOR);
if ($setup{'round_corners'}) {
$ROUND_CORNERS = " radius$setup{'round_corners'}";
}
if ($setup{'border_color'}) {
$BORDER_COLOR = $setup{'border_color'};
} else {
$BORDER_COLOR = "#cccccc";
}
if (!$setup{'disable_shadow'}) {
$SHADOW = " shadow";
}
if (!$setup{'disable_border'}) {
$BORDER = "border:1px solid $BORDER_COLOR";
} else {
if ($setup{'editor'}) {
$BORDER = "border:1px dotted #dddddd";
}
}
my $BG = "#333333";
if (ONO::IO->image($image)) {
$IMG = qq~<img class="block$IMG_CLASS$ROUND_CORNERS" src="$image" style="width:${width}px;height:${height}px" alt="">~;
} else {
$BG = $image;
$BG =~ s~/~~g;
}
if ($setup{'enable_grid'}) {
$GRID = qq~<div class="abs trans20" style="top:0px;left:0px;width:${width}px;height:${height}px;background-image:url('/ono/osr/images/imageedit/grid_100.png')"></div>~;
}
return qq~<div class="auto$SHADOW$ROUND_CORNERS" style="background-color:$BG;$BORDER;width:${width}px;height:${height}px;margin-top:${margin_top}px;z-index:2">
<div class="abs$ROUND_CORNERS" style="width:${width}px;height:${height}px;z-index:2;background-color:$BG$OVERFLOW">
$IMG
$setup{'background_overlay'}
$GRID
$content
</div>
<div class="rel" style="z-index:3">$FLOAT</div>
</div>
$NAV
$DEBUG
~;
}
###############################################################################
# end of script
###############################################################################
1;
__END__
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2000-2025 Jos KIRPS [ www.kirps.com | jos_AT_kirps_DOT_com ]
# and The Joopita Project [ www.joopita.org | contact_AT_joopita_DOT_com ]
#
# This file, as well as other parts of the ONO Software Project or related
# elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# 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.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
use strict;
use ONO::IO;
###############################################################################
# tutorial
###############################################################################
#
#: Tutorial content. Please note that is feature is EOL, it may become obsolete and deprecated soon.
#:
#: format:
#: - type:id;x_pos;y_pos;width;data (with ID, required when using the editor mode)
#: - type;x_pos;y_pos;width;data (without ID)
#:
#: types:
#:
#: - box (text),
#: - box_color (replace 'color' by hex value)
#: - up / down / left / right
#: - header (warning: needs to be parsed externally)
#: - border (warning: needs to be parsed externally)
#: - setup (warning: needs to be parsed externally)
#: - image
#: - frame (or "focus" for legacy apps)
sub render {
my (
$self,
$script_url,
$page,
$pages,
$image,
$boxes_ref,
$BLK_ref,
$setup_ref,
) = @_;
my @boxes = @$boxes_ref;
my %BLK = %$BLK_ref;
my %setup;
if ($setup_ref) {
%setup = %$setup_ref;
}
my ($BOXES,$FLOAT,$DEBUG);
foreach my $box (@boxes) {
if ($box !~ /^#/) {
if (ONO::IO->devstation) {
$DEBUG .= "$box<br>";
}
my @bp = split(/\;/,$box);
my $color;
my $ax = 0;
my $ay = 0;
my $bx = 0;
my $by = 0;
my $top = "top";
my $left = "left";
if ($box =~ /^border:noborder;/) {
$setup{'disable_shadow'}++;
$setup{'disable_border'}++;
}
if ($setup{'ratio'}) {
$bp[1] = int($bp[1]*$setup{'ratio'});
$bp[2] = int($bp[2]*$setup{'ratio'});
if ($bp[3] =~ /x/) {
my @bpp = split(/x/,$bp[3]);
$bp[3] = int($bpp[0]*$setup{'ratio'})."x".int($bpp[1]*$setup{'ratio'});
} else {
$bp[3] = int($bp[3]*$setup{'ratio'});
}
if ($bp[0] eq "focus") {
$bp[4] = int($bp[4]*$setup{'ratio'});
}
}
my $ID;
if ($bp[0] =~ s~:(.*)$~~) {
$ID = $1;
}
if ($bp[0] =~ s~^(box|ticket)_(.*?)$~$1~) {
$color = $2;
}
if ($bp[0] eq "up") {
$ax = -17;
$ay = -10;
$bx = -int($bp[3]/2);
$by = 21;
}
if ($bp[0] eq "down") {
$top = "bottom";
$ax = -17;
$ay = -22;
$bx = -int($bp[3]/2);
$by = 53;
}
if ($bp[0] eq "up" || $bp[0] eq "down") {
if ($bp[1] + int($bp[3]/2) > 930) {
$left = "right";
$bx = 0;
}
}
if ($bp[0] eq "left") {
$ax = -12;
$ay = -16;
$bx = 31+$ax;
$by = -5+$ay;
}
if ($bp[0] eq "right") {
$left = "right";
$ax = -22;
$ay = -16;
$bx = 31-$ax;
$by = -5+$ay;
}
my ($DRAG,$DRAG_ID,$DRAG_BOX,$DRAG_TRANS);
if ($setup{'editor'}) {
$DRAG = qq~ draggable="true"~;
if ($ID) {
$DRAG_ID = qq~ id="draggable_$ID"~;
$DRAG_BOX = qq~ id="draggable_${ID}_box"~;
}
}
my $width = $bp[3];
my $height = $bp[3];
my $ROT;
if ($bp[3] =~ /^(.*?)x(.*?)$/) {
$width = $1;
$height = $2;
}
if ($bp[3] =~ /^(.*?)x(.*?)x(.*?)$/) {
$width = $1;
$height = $2;
$ROT = ";transform:rotate(${3}deg);-ms-transform:rotate(${3}deg);-webkit-transform:rotate(${3}deg)";
}
my $dim = "64x64";
if ($width > 64 || $height > 64) {
$dim = "128x128";
}
if ($bp[0] eq "image") {
if ($setup{'editor'}) {
my $IMG;
if ($bp[4] =~ m~/~) {
my $rand = 1000+int(rand(8999));
$IMG = qq~<img class="block abs" src="$bp[4]?$rand" style="top:0px;left:0px;width:${width}px;height:${height}px" alt="">~;
if ($bp[5] =~ /s/) {
$IMG = qq~<div class="shadow">$IMG</div>~;
}
}
$BOXES .= qq~<div$DRAG_ID class="abs bo" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
$IMG
<div$DRAG_BOX class="abs" style="op:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_img_url'}=$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:10px;right:30px" alt="">
</a>
<a href="$setup{'delete_img_url'}=$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:10px;right:10px" alt="">
</a>
</div>
~;
} else {
if ($bp[4] =~ m~/~) {
my $IMG = qq~<img class="block abs" src="$bp[4]" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT" alt="">~;
if ($bp[5] =~ /(s|b)/) {
my $CLASS;
if ($bp[5] =~ /s/) {
$CLASS .= " shadow";
}
if ($bp[5] =~ /b/) {
$CLASS .= " bo";
}
$IMG = qq~<div class="abs$CLASS" style="left:$bp[1]px;top:$bp[2]px$ROT"><img class="block" src="$bp[4]" style="width:${width}px;height:${height}px" alt=""></div>~;
}
if ($bp[5] =~ /f/) {
$FLOAT .= $IMG;
} else {
$BOXES .= $IMG;
}
}
}
}
# focus is only here for legacy stuff, will probably be dropped later on !!!
if ($bp[0] eq "focus") {
$BOXES .= qq~<div class="block abs radius10 trans50" style="border:5px solid #990000;left:$bp[1]px;top:$bp[2]px;width:$bp[3]px;height:$bp[4]px"></div>~;
}
# header
if ($bp[0] eq "header") {
my ($HIDE,$SHOW);
if ($setup{'editor'} && !$setup{'header_nohide'}) {
$HIDE = qq~<div class="abs" style="top:5px;right:5px">
<a href="javascript:void(0);" onclick="onojs_hide('draggable_$ID');onojs_block('tutorial_header_show');"
class="button button_small">$BLK{'hide'}</a>
</div>
~;
$SHOW = qq~<div id="tutorial_header_show" class="abs hide" style="top:5px;right:5px">
<a href="javascript:void(0);" onclick="onojs_block('draggable_$ID');onojs_hide('tutorial_header_show');"
class="button button_small">$BLK{'header'} - $BLK{'show'}</a>
</div>
~;
}
$BOXES .= qq~$SHOW<div$DRAG_ID class="block abs" style="left:0px;top:0px;width:100%"><!-- publisher_screen_header_$ID -->$HIDE</div>~;
}
# border (will do nothing but transmitting the border ID to apply...)
if ($bp[0] eq "border") {
$BOXES .= qq~<!-- publisher_screen_border_$ID -->~;
if ($ID eq "movie") {
$setup{'round_corners'} = 10;
}
if ($ENV{'HTTP_USER_AGENT'} !~ /(iPhone|iPad|iPod|Android)/i) {
if ($ID eq "browser") {
$setup{'disable_shadow'} = 1;
}
if ($ID =~ /^(computer|laptop|tablet)$/) {
$setup{'border_color'} = "#333333";
}
}
}
# frame replaces the legacy focus type
if ($bp[0] eq "frame") {
if (!$bp[4]) {
$bp[4] = "red";
}
if ($setup{'editor'}) {
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<div$DRAG_BOX class="block abs radius10 trans50" style="border:5px solid $bp[4];left:0px;top:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=frame_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=frame_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<div class="block abs radius10 trans50" style="border:5px solid $bp[4];left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"></div>~;
}
}
if ($bp[0] eq "flag") {
# large flag is not available !!!
$dim = "64x64";
if ($setup{'editor'}) {
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<img class="block abs" src="/ono/osr/images/icons/crystal/$dim/apps/flag.png" style="left:0px;top:0px;width:${width}px;height:${height}px" alt="">
<div$DRAG_BOX class="abs" style="op:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=flag_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=flag_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<img class="block abs" src="/ono/osr/images/icons/crystal/$dim/apps/flag.png" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT" alt="">~;
}
}
if ($bp[0] eq "icon") {
if ($setup{'editor'}) {
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<img class="block abs" src="/ono/osr/images/icons/crystal/64x64/$bp[4].png" style="left:0px;top:0px;width:${width}px;height:${height}px" alt="">
<div$DRAG_BOX class="abs" style="op:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=icon_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=icon_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<img class="block abs" src="/ono/osr/images/icons/crystal/64x64/$bp[4].png" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT" alt="">~;
}
}
if ($bp[0] eq "graphic") {
my @gp = split(/-/,$bp[4]);
if (!$gp[1]) {
$gp[1] = "black";
}
my ($STYLE,$MORE,$editor_border);
if ($gp[0] =~ /(rectangle|circle)/ && $gp[2]) {
$STYLE .= qq~;border:5px solid $gp[2]~;
}
if ($gp[0] =~ /(circle)/) {
$editor_border = " bo";
$height = $width;
my $radius = int($width/2);
$STYLE .= qq~;border-radius:${radius}px;-moz-border-radius:${radius}px;-webkit-border-radius:${radius}px~;
}
if ($gp[0] =~ /arrow/) {
$MORE = qq~<div class="block abs" style="right:-5px;top:-6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)"></div>~;
$MORE .= qq~<div class="block abs" style="right:-5px;top:6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg)"></div>~;
}
if ($gp[0] =~ /arrow2/) {
$MORE .= qq~<div class="block abs" style="left:-5px;top:-6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg)"></div>~;
$MORE .= qq~<div class="block abs" style="left:-5px;top:6px;width:20px;height:${height}px;background-color:$gp[1];~;
$MORE .= qq~transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)"></div>~;
}
if ($setup{'editor'}) {
my $editor_width = $width;
my $editor_height = $height;
$BOXES .= qq~<div$DRAG_ID class="abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px$ROT"$DRAG>
<div class="block abs" style="left:0px;top:0px;width:${width}px;height:${height}px;background-color:$gp[1]$STYLE"></div>
$MORE
<div$DRAG_BOX class="abs" style="top:0px;left:0px;width:${width}px;height:${height}px"></div>
<a href="$setup{'setup_mk_url'}=graphic_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/setup.png" style="top:-5px;right:15px" alt="">
</a>
<a href="$setup{'delete_mk_url'}=graphic_$ID">
<img class="block16 abs" src="/ono/osr/images/icons/ono/32x32/delete.png" style="top:-5px;right:-5px" alt="">
</a>
</div>
~;
} else {
$BOXES .= qq~<div class="block abs" style="left:$bp[1]px;top:$bp[2]px;width:${width}px;height:${height}px;background-color:$gp[1]$STYLE;$ROT">$MORE</div>~;
}
}
if ($bp[0] eq "setup" && $bp[2] =~ /g/) {
$setup{'enable_grid'}++;
}
# box_ : standard text boxes and more....
if ($bp[0] !~ /^(image|focus|frame|flag|header|border|setup|icon|graphic)$/) {
my $pos_x = $bp[1]+$bx;
my $pos_y = $bp[2]+$by;
if (!$setup{'disable_pos_correction'}) {
my $whilecounter;
while ($pos_x < 10 && $whilecounter < 256) {
$whilecounter++;
$bx = $bx+10;
$pos_x = $bp[1]+$bx;
}
while ($pos_x > 910 && $whilecounter < 256) {
$whilecounter++;
$bx = $bx-10;
$pos_x = $bp[1]+$bx;
}
}
my $CONTENT = $bp[4];
$CONTENT =~ s~ \& ~ \&\; ~;
my ($ARROW,$RESIZE);
if ($bp[0] !~ /^(box|note|trans|ticket)/) {
$ARROW .= qq~ <img class="block32 rel" src="/ono/osr/images/arrows/nuvola/white32shadow/nav_$bp[0].png" style="left:${ax}px;top:${ay}px;z-index:3" alt="">~;
}
if ($setup{'editor'}) {
# the 'empty_inline_editor' switch leaves the inline editor textarea blank,
# which is required for multi-language editing for example.
my $EDITAREA = $CONTENT;
if ($CONTENT =~ s~#:empty_inline_editor:#~~) {
$EDITAREA = "";
}
my ($EDIT,$SETUP,$DELETE);
if (!$setup{'disable_object_edit'}) {
my $EDIT_ICON = "/ono/osr/images/icons/ono/32x32/edit.png";
my $EDIT_SIZE = 16;
my $EDIT_POS = "fr";
my $EDIT_STYLE;
if ($setup{'object_edit_alt_icon'}) {
$EDIT_ICON = $setup{'object_edit_alt_icon'};
if ($EDIT_ICON =~ s~^(.*?):(.*?):(.*?):(.*?)$~$1~) {
$EDIT_SIZE = $2;
$EDIT_POS = "abs";
$EDIT_STYLE = qq~ style="top:${3}px;right:${4}px"~;
}
}
$EDIT = qq~<a href="javascript:void(0);" onclick="onojs_hide('draggable_content_draggable_$ID');onojs_block('draggable_editor_draggable_$ID');">
<img class="block$EDIT_SIZE ml5 $EDIT_POS" src="$EDIT_ICON"$EDIT_STYLE alt="">
</a>
~;
if ($setup{'object_edit_url'}) {
$EDIT = qq~<a href="$setup{'object_edit_url'}=$ID"><img class="block$EDIT_SIZE ml5 $EDIT_POS" src="$EDIT_ICON"$EDIT_STYLE alt=""></a>~;
}
}
if (!$setup{'disable_object_setup'}) {
$SETUP = qq~<a href="$setup{'setup_url'}=$ID"><img class="block16 ml5 fr" src="/ono/osr/images/icons/ono/32x32/setup.png" alt=""></a>~;
}
if (!$setup{'disable_object_delete'}) {
$DELETE = qq~<a href="$setup{'delete_url'}=$ID"><img class="block16 ml5 fr" src="/ono/osr/images/icons/ono/32x32/delete.png" alt=""></a>~;
}
my ($TEXTAREA,$ICONS);
if (!$setup{'object_edit_url'}) {
$TEXTAREA = qq~<div class="hide" id="draggable_editor_draggable_$ID">
<img class="abs close" src="/ono/osr/images/icons/crystal/32x32/ono/close.png" style="top:5px;right:5px" alt=""
onclick="onojs_block('draggable_content_draggable_$ID');onojs_hide('draggable_editor_draggable_$ID');">
<textarea name="draggable_editor_draggable_$ID" class="w95 h50">$EDITAREA</textarea>
</div>
~;
}
if ("$DELETE$SETUP$EDIT") {
$ICONS = qq~<div class="abs" style="top:-5px;right:10px">$DELETE$SETUP$EDIT</div>~;
}
$CONTENT = qq~ <div id="draggable_content_draggable_$ID">
$ICONS
$CONTENT
</div>
$TEXTAREA
~;
if (!$setup{'disable_object_resize'}) {
$RESIZE .= qq~ <img id="draggable_resizer_draggable_$ID" class="block16 abs" src="/ono/osr/images/icons/crystal/16x16/actions/indent_task.png" alt=""
style="right:-5px;bottom:0px;cursor:se-resize;">~;
}
}
my $CLASS = "box_white";
my $BG;
if ($color) {
if ($color =~ /^(white|black|red|green|blue|yellow)$/) {
$CLASS = "box_$color";
} else {
$CLASS = "radius10 shadow";
$BG = "background-color:#$color;";
}
}
if ($bp[0] eq "note") {
$CLASS = "shadow";
$BG = "background-color:#ffee88;background-image:url('/ono/osr/images/web/elements/note.jpg');background-position:right bottom;background-repeat:no-repeat;";
}
if ($bp[0] =~ /^ticket/) {
$CLASS = "shadow";
}
if ($bp[0] eq "trans" || $bp[0] eq "transe") {
$CLASS = "";
if ($setup{'editor'}) {
$CLASS = "bo";
}
}
if ($bp[0] eq "transe") {
$CLASS .= " cole";
}
if ($setup{'transmit_object_id'}) {
$CONTENT .= qq~<!-- tutorial_object_id_$ID -->~;
}
if ($setup{'ratio'}) {
my $font_size = int(100*$setup{'ratio'});
$CONTENT = qq~<div style="font-size:$font_size%">$CONTENT</div>~;
}
my $ROT;
if ($bp[3] =~ s~xx(.*)$~~) {
$ROT = ";transform:rotate(${1}deg);-ms-transform:rotate(${1}deg);-webkit-transform:rotate(${1}deg)";
}
# z-index:1 -> has been removed to respect layer order, does this hurt anything?
$BOXES .= qq~<div$DRAG_ID class="trans98 abs" style="left:$bp[1]px;top:$bp[2]px"$DRAG>
<div$DRAG_BOX class="$CLASS abs" style="${BG}width:$bp[3]px;padding:10px;$left:${bx}px;$top:${by}px;z-index:2$ROT">
$CONTENT$RESIZE
</div>
$ARROW
</div>
~;
}
}
}
my $IMG_CLASS;
if ($image =~ s~:(.*?)$~~) {
$IMG_CLASS = " $1";
}
if ($page > $pages) {
$page = $pages;
}
my $prev = $page - 1;
my $next = $page + 1;
if ($prev < 2) {
$prev = 1;
}
if ($prev > $pages) {
$prev = $pages;
}
my $first = 1;
if ($setup{'page_first'}) {
$first = $setup{'page_first'};
}
if ($setup{'page_prev'}) {
$prev = $setup{'page_prev'};
}
if ($setup{'page_next'}) {
$next = $setup{'page_next'};
}
my $margin_top = 10;
my $icon_size = 16;
if ($ENV{'HTTP_USER_AGENT'} =~ /(ipad|iphone)/i) {
$margin_top = 0;
$icon_size = 24;
}
if ($setup{'margin_top'} =~ /x/i) {
$margin_top = 0;
}
$BOXES =~ s~###NEXT###~<a href="$script_url=$next" class="button_green">$BLK{'continue'}...</a>~g;
$BOXES =~ s~###PREV###~<a href="$script_url=$prev" class="button_green">$BLK{'previous'}</a>~g;
my $SCREEN = &screen(
"",
$image,$IMG_CLASS,
$BOXES,
$script_url,
$page,$pages,$first,$prev,$next,
$icon_size,
$margin_top,
\%setup,
$BLK_ref,
$FLOAT,
$DEBUG,
);
if ($setup{'rel_up'}) {
$SCREEN = qq~<div class="rel" style="bottom:$setup{'rel_up'}px">$SCREEN</div>~;
}
return $SCREEN;
}
###############################################################################
# screen
###############################################################################
sub screen {
my (
$self,
$image,$IMG_CLASS,
$content,
$script_url,
$page,$pages,$first,$prev,$next,
$icon_size,
$margin_top,
$setup_ref,
$BLK_ref,
$FLOAT,
$DEBUG,
) = @_;
my %setup = %$setup_ref;
my %BLK = %$BLK_ref;
my $width = 920;
my $height = 480;
if ($setup{'width'}) {
$width = $setup{'width'};
}
if ($setup{'height'}) {
$height = $setup{'height'};
}
if ($setup{'scale'}) {
$height = int($height*$setup{'scale'});
$width = int($width*$setup{'scale'});
}
my ($SAVE,$OVERFLOW);
if ($setup{'editor'}) {
$SAVE = qq~<td>$BLK{'submit_save_small'}</td>~;
} else {
$OVERFLOW = ";overflow:hidden";
}
my $PREV = qq~<img class="block$icon_size" src="/ono/osr/images/spacer/trans.gif" alt="">~;
my $NEXT = qq~<a href="$script_url=$first"><img class="block$icon_size" src="/ono/osr/images/icons/crystal/32x32/actions/reload.png" alt=""></a>~;
if ($page > 1) {
$PREV = qq~<a href="$script_url=$prev"><img class="block$icon_size" src="/ono/osr/images/arrows/nuvola/green/nav_previous.png" alt=""></a>~;
}
if ($page < $pages) {
$NEXT = qq~<a href="$script_url=$next"><img class="block$icon_size" src="/ono/osr/images/arrows/nuvola/green/nav_next.png" alt=""></a>~;
}
my ($NAV,$PAGES);
if ($pages && !$setup{'nav_disable'}) {
$PAGES = qq~<td>$PREV</td>
<td class="bold" style="padding:2px 20px 2px 20px">$page / $pages</td>
<td>$NEXT</td>
~;
}
if ($PAGES || $SAVE) {
my $nav_width = 200;
if ($pages && $SAVE) {
$nav_width = 250;
}
$NAV = qq~<div class="box_white auto rel" style="padding:5px;bottom:5px;width:${nav_width}px;z-index:1">
<table class="default_table auto">
<tr>
$SAVE
$PAGES
</tr>
</table>
</div>
~;
}
my ($IMG,$GRID,$ROUND_CORNERS,$SHADOW,$BORDER,$BORDER_COLOR);
if ($setup{'round_corners'}) {
$ROUND_CORNERS = " radius$setup{'round_corners'}";
}
if ($setup{'border_color'}) {
$BORDER_COLOR = $setup{'border_color'};
} else {
$BORDER_COLOR = "#cccccc";
}
if (!$setup{'disable_shadow'}) {
$SHADOW = " shadow";
}
if (!$setup{'disable_border'}) {
$BORDER = "border:1px solid $BORDER_COLOR";
} else {
if ($setup{'editor'}) {
$BORDER = "border:1px dotted #dddddd";
}
}
my $BG = "#333333";
if (ONO::IO->image($image)) {
$IMG = qq~<img class="block$IMG_CLASS$ROUND_CORNERS" src="$image" style="width:${width}px;height:${height}px" alt="">~;
} else {
$BG = $image;
$BG =~ s~/~~g;
}
if ($setup{'enable_grid'}) {
$GRID = qq~<div class="abs trans20" style="top:0px;left:0px;width:${width}px;height:${height}px;background-image:url('/ono/osr/images/imageedit/grid_100.png')"></div>~;
}
return qq~<div class="auto$SHADOW$ROUND_CORNERS" style="background-color:$BG;$BORDER;width:${width}px;height:${height}px;margin-top:${margin_top}px;z-index:2">
<div class="abs$ROUND_CORNERS" style="width:${width}px;height:${height}px;z-index:2;background-color:$BG$OVERFLOW">
$IMG
$setup{'background_overlay'}
$GRID
$content
</div>
<div class="rel" style="z-index:3">$FLOAT</div>
</div>
$NAV
$DEBUG
~;
}
###############################################################################
# end of script
###############################################################################
1;
__END__