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

5月-20-2018-14-35-39-compressor.gif

Screenshots are displayed modally connected to represent the page transition of the Web service. This screen can all be created from the GUI.

5月-20-2018-14-45-06-compressor (1).gif

Overall flow

  1. Place a pop-up
  2. Click the edit button of the pop-up icon
  3. A new HTML element is generated. Display: none; except for the display hierarchy
  4. 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:

IMG_20180523_223631.jpg

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.

スクリーンショット 2018-05-20 15.01.40.png

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

スクリーンショット 2018-05-20 15.17.16.png

Each page holds the following information.

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! スクリーンショット 2018-05-20 15.32.17.png

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

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!

Recommended Posts

Modal representation of Web service page transitions [Development memo]
Docker + Java + SpringBoot WEB development hands-on attendance memo (2019/08/19)