Modal representation of Web service page transitions [Development memo]
Introduction
When I made Tobidemo, as a key to the function I make a note of how to implement the edit screen that creates the screen transition of the page.
Introduction
Screenshots are displayed modally connected to represent the page transition of the Web service. This screen can all be created from the GUI.
Overall flow
- Place a pop-up
- Click the edit button of the pop-up icon
- A new HTML element is generated. Display: none; except for the display hierarchy
- Tell me the save button and save with Ajax.
At first, I was worried because I couldn't think of a way to realize it. Seen later, it's pretty simple! The main points are introduced below.
Notes on inventing:
Edit screen design
As a way to edit page transitions, add HTML elements as needed and Other than that, I set display: none; so that I could edit the interaction with the server side with minimal stress. The following are the elements that are actually generated.
Initially, I didn't have that idea, and I was thinking of implementing an implementation that asynchronously stores existing data as the number of pages increases. A request is generated for each page transition, and when you go back to the previous hierarchy and edit again, I have to take information from the database and redraw it, and it takes time to implement, so I think that the former implementation was the correct answer even now.
python
//Create the element to pop up
$('.edit_popup_target')
.on(
'click',
function() {
var _this = $('.flag_now_edit');
var page_level_num = TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1];
var page_level = page_level_num.slice(0, 1);
var next_page_level = Number(page_level) + 1;
var page_num = page_level_num.slice(2, 3);
var next_page_num = $('[data-dropzone^="'
+ next_page_level + '"]').length;
if ($(_this).attr("data-popuptarget") == undefined) {
if (next_page_num != 0) {
next_page_num += 1;
} else {
next_page_num = 1;
}
var this_dropzone_id = page_level + "." + page_num;
var next_dropzone_id = next_page_level + "."
+ next_page_num;
$('.mapEreaWrapper')
.append(
'<div class="maperea" data-dropzone="'
+ next_dropzone_id
+ '"><img src ="./../../img/default-none.png "></div>');
$(_this).attr("data-popuptarget", next_dropzone_id);
Hierarchical management design
Each page holds the following information.
- page number --Transition target page number --Item information (explain the screen such as memos)
- background image
The page number starts from 1.1 and increases to 1.2 and 1.3 in the same hierarchy. In the new hierarchy, the first number is incremented like 2.1, followed by 2.1,2,2. Items on the page are numbered sequentially after the page number, such as 2.1.1, 2.1.2 ,.
Based on this control number, the saved data will be redrawn.
Implementation of back button
Since it is an edit screen, you have to go back to the previous screen!
As a result of twisting my head, by writing the page number in the array when moving pages, It manages the page transition history.
// ------------Global variables--------------
TRANSITION_MANAGER = [ '1.1' ]; //Current location TRANSITION_MANAGER[TRANSITION_MANAGER.length
// - 1]
// ---------------------------------------
For example, when returning one page, the data is acquired from the page management array (TRANSITION_MANAGER) as shown below.
//Go back one page
$('.backToBeforePage')
.on(
'click',
function() {
if (TRANSITION_MANAGER.length != 1) {
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
+ '"]').hide();
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 2]
+ '"]').show();
// ACTIVE_PAGE_NUMBER =
// TRANSITION_MANAGER[TRANSITION_MANAGER.length-2];
TRANSITION_MANAGER.pop();
changePageTransitionView();
}
;
return false;
});
Data storage
- page number --Transition target page number --Item information (explain the screen such as memos)
- background image
Etc. are saved at once with Ajax. I think I was able to send it neatly when I nested it.
If you prepare a bean corresponding to Json data, Spring Boot will receive it nicely. I didn't know how to express the nested structure, so I wanted to send only a few items as shown below. All the items prepared by Bean are prepared. My back hair is pulled, but this time I gave up because there was a workaround.
I also intended to write a process to update the saved data, In Spring boot, if the information specified in the key on the table side of the database matches Since it updates as the same data, I was able to implement it unintentionally.
item_stat_array.push({
id : linkid + "_" + dropzone,
type : "drop-zone", // common
itemid : "0", // common
top : "0", // common
left : "0", // common
color : "0", // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : dropzone, // dropzpne
img : img
// dropzone
It's a little long, but the full text below.
$(document)
.on(
'submit',
".save_to_server",
function(e) {
e.preventDefault();
$(".maperea").show(); // disply:none is top,I can't get left
var demoname = $('.demo-name-val').val();
if (demoname === undefined || demoname === null | demoname.replace(/[\t\s ]/g, '').length < 1){
demoname = "-";
}
var item_stat_array = [];
var maperea_array = $('.maperea');
var maperea_leng = $('.maperea').length;
$(maperea_array[i]).attr('data-dropzone');
var linkid = $('#linkid').text();
var xsrf = $.cookie('XSRF-TOKEN');
for (var i = 0; i < maperea_leng; i++) {
var dropzone = $(maperea_array[i]).attr(
'data-dropzone');
var img = $(maperea_array[i]).attr('data-img')
if (img === undefined || img === null) {
img = "0";
}
// var id = linkid + "_" +dropzone; //Primary key when saving the database
item_stat_array.push({
id : linkid + "_" + dropzone,
type : "drop-zone", // common
itemid : "0", // common
top : "0", // common
left : "0", // common
color : "0", // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : dropzone, // dropzpne
img : img
// dropzone
});
}
var targetArray = $('.dropped');
var item_num = targetArray.length;
item_num - 1;
for (var i = 0; i < item_num; i++) {
var target = targetArray[i];
if (target.className.indexOf('_tooltip') != -1) {
var itemid = $(target).attr("data-item");
var top = $(target).position().top;
var left = $(target).position().left;
var color = $(target).attr(
"data-tooltipIconColor");
var size = $(target).attr(
"data-tooltipIconSize");
var title = $(target).attr("title");
// var id = linkid + "_" + itemid;
// //Primary key when saving the database
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_tooltip", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : size, // popup,tooltip
title : title, // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
} else if (target.className.indexOf('_popup') != -1) {
var top = $(target).position().top;
var left = $(target).position().left;
var itemid = $(target).attr("data-item");
var color = $(target).attr("data-popupColor");
var size = $(target).attr("data-popupSize");
var target = $(target).attr("data-popuptarget");
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_popup", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : size, // popup,tooltip
title : "0", // tooltip
target : target, // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
} else if (target.className.indexOf('_sticky') != -1) {
var top = $(target).position().top;
var left = $(target).position().left;
var width = $(target).width();
var height = $(target).height();
var itemid = $(target).attr("data-item");
var color = $(target).attr("data-stickycolor");
var text = $(target).children(".textsticky")
.val();
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_sticky", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : width, // sticky
height : height, // sticky
text : text, // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
}
}
$(".maperea").hide();
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
+ '"]').show();
if (window.FormData) {
var ajaxUrl = "/edit/uploaditemstat" + "?name=" + demoname ;
$
.ajax(
{
type : "POST", //HTTP communication type
url : ajaxUrl, //URL to send the request to
dataType : "json", //The type of data returned by the server
data : JSON
.stringify(item_stat_array),
contentType : 'application/json; charset=utf-8',
"beforeSend": function(xhr, setting) {
$(".btn").attr('disabled', true);
$(".item-uploading-animation").removeClass("nodispy");
},
headers : {
'X-XSRF-TOKEN' : xsrf
},
})
.done(
function(data) { //Processing when Ajax communication is successful
var yourLink = "/show?id=";
var yourLinkID = $("#linkid")
.text();
var demoname = $(".demo-name-val").val();
if(demoname==null ||demoname== "") {demoname = "Untitled Tobi Demo"}
$(".yourLink").attr("href",
yourLink + yourLinkID);
$(".yourLink").text(
demoname);
$(".yourLink").attr('target',
'_blank');
$('.upload-item-done').slideDown(1500);
$(".btn").attr('disabled', false);
$(".item-uploading-animation").addClass("nodispy");
}).fail(
function(XMLHttpRequest,
textStatus, errorThrown) { //Processing when Ajax communication fails
$(".btn").attr('disabled', false);
$(".item-uploading-animation").addClass("nodispy");
$('.upload-item-failed').slideDown(1500);
return false;
});
} else {
alert("It is a browser that does not support uploading.");
}
});
Summary
that's all!
In addition to what I wrote here, I also added details such as item coordinates and screen drawing. It took a few weeks. However, at first I thought it would be impossible, but I can do it!