Skip to content

Commit ae285e4

Browse files
author
hikki
committed
1
1 parent b77ad15 commit ae285e4

File tree

3 files changed

+221
-6
lines changed

3 files changed

+221
-6
lines changed

‎ComponentViewer.php

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?php
2+
3+
namespace App\Admin\Controllers;
4+
5+
use Encore\Admin\Admin;
6+
use Encore\Admin\Grid;
7+
use Encore\Admin\Layout\Content;
8+
use Illuminate\Http\Request;
9+
10+
class ComponentViewer
11+
{
12+
public static function makeEditFormAction(Grid &$grid)
13+
{
14+
$grid->actions(function ($actions) {
15+
$actions->disableEdit();
16+
$url = Request::capture()->getPathInfo();
17+
Admin::script(<<<EOF
18+
componentEditForm.apply('CEForm','{$url}');
19+
EOF
20+
);
21+
$id = $actions->getKey();
22+
$actions->append("<a data-id='$id' href='javascript:void(0);' class='CEForm'><i class='fa fa-edit'></i></a>");
23+
});
24+
}
25+
26+
public static function makeForm(Content $content)
27+
{
28+
$items = [
29+
'_content_' => str_replace('pjax-container', '', $content->build())
30+
];
31+
return view('admin.content', $items)->render();
32+
}
33+
}

‎component.js

Lines changed: 168 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
function nodesEvent(nodes,event,func) {
1+
function nodesBindEvent(nodes,event,func) {
22
for (let element of nodes){
33
element.addEventListener(event,func);
44
}
@@ -21,7 +21,7 @@ function componentSelect(name,selected,options) {
2121
}
2222
function addVal() {
2323
var val = '';
24-
$('#'+name+'-select').children().each(function(i,n){
24+
document.getElementById(name+'-select').childNodes.forEach(function (n) {
2525
val += parseInt(n.getAttribute('data-id'))+",";
2626
});
2727
val = val.replace(/,$/g, '');
@@ -52,8 +52,8 @@ function componentSelect(name,selected,options) {
5252
'</div>' +
5353
'</div>';
5454
document.getElementById(name).innerHTML = html;
55-
nodesEvent(document.getElementById(name+'-select').getElementsByClassName("v-tag"),'click',tagCancel);
56-
nodesEvent(document.getElementById(name+'-content').getElementsByClassName("v-tag"),'click',tagSelect);
55+
nodesBindEvent(document.getElementById(name+'-select').getElementsByClassName("v-tag"),'click',tagCancel);
56+
nodesBindEvent(document.getElementById(name+'-content').getElementsByClassName("v-tag"),'click',tagSelect);
5757
document.getElementById(name+'-search').addEventListener('input',function () {
5858
var search = this.value;
5959
if(search == ''){
@@ -68,12 +68,11 @@ function componentSelect(name,selected,options) {
6868
});
6969
}
7070

71-
7271
function componentJsonTable(name,columns,data) {
7372
function selectTd(td,type,value,column) {
7473
switch (type) {
7574
case 'text':
76-
td.innerText = value;
75+
td.innerHTML = '<p style="text-overflow: ellipsis;overflow: hidden;display: block;white-space: nowrap;">'+value+'</p>';
7776
break;
7877
case 'input':
7978
let input = document.createElement('input');
@@ -92,6 +91,9 @@ function componentJsonTable(name,columns,data) {
9291
});
9392
td.appendChild(input);
9493
break;
94+
default:
95+
td.innerHTML = '<p style="text-overflow: ellipsis;overflow: hidden;display: block;white-space: nowrap;">'+value+'</p>';
96+
break;
9597
}
9698
}
9799
function deleteButton(td) {
@@ -121,6 +123,9 @@ function componentJsonTable(name,columns,data) {
121123
var head = '<tr style="display:table;width:100%;table-layout:fixed;">';
122124
var foot = head;
123125
for (let column in columns){
126+
if(columns[column].type == 'hidden'){
127+
continue;
128+
}
124129
if(columns[column].style){
125130
head += '<th style="'+columns[column].style+'">'+columns[column].name+'</th>';
126131
foot += '<th style="'+columns[column].style+'">' +
@@ -145,6 +150,12 @@ function componentJsonTable(name,columns,data) {
145150
let flag =false;
146151
let record = {};
147152
for (let column in columns){
153+
if(columns[column].type == 'hidden'){
154+
if(value[column]){
155+
record[column] = value[column];
156+
}
157+
continue;
158+
}
148159
let td = document.createElement('td');
149160
if(value[column]){
150161
record[column] = value[column];
@@ -211,3 +222,154 @@ function componentJsonTable(name,columns,data) {
211222
});
212223
dom.getElementsByClassName('JsonTableInsert')[0].appendChild(i);
213224
}
225+
226+
let componentCommonBlock = {
227+
_loadingSvg:"<svg version=\"1.1\" style='width: 100%;height:100px' xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n" +
228+
" width=\"40px\" height=\"40px\" viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\" xml:space=\"preserve\">\n" +
229+
" <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n" +
230+
" s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634\n" +
231+
" c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\"/>\n" +
232+
" <path fill=\"#000\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0\n" +
233+
" C22.32,8.481,24.301,9.057,26.013,10.047z\">\n" +
234+
" <animateTransform attributeType=\"xml\"\n" +
235+
" attributeName=\"transform\"\n" +
236+
" type=\"rotate\"\n" +
237+
" from=\"0 20 20\"\n" +
238+
" to=\"360 20 20\"\n" +
239+
" dur=\"0.5s\"\n" +
240+
" repeatCount=\"indefinite\"/>\n" +
241+
" </path>\n" +
242+
" </svg>",
243+
_nodesBindEvent:function (nodes,event,func) {
244+
for (let element of nodes){
245+
element.addEventListener(event,func);
246+
}
247+
}
248+
};
249+
250+
let componentEditForm = {
251+
url: '',
252+
apply:function(name,url){
253+
this.url = url;
254+
componentCommonBlock._nodesBindEvent(document.getElementsByClassName(name),'click',this.make);
255+
},
256+
make:function () {
257+
componentEditForm._DOM = this;
258+
componentEditForm._modalBodyNode = null;
259+
componentEditForm._boxNode = null;
260+
componentEditForm._boxBodyNode = null;
261+
componentEditForm._tableNode = null;
262+
componentEditForm._loadingNode = null;
263+
componentEditForm._createModal();
264+
let url = componentEditForm.url + '/'+this.getAttribute('data-id') + '/edit';
265+
componentEditForm._createBox(url);
266+
},
267+
_DOM:null,
268+
_modalBodyNode:null,
269+
_boxNode:null,
270+
_boxBodyNode: null,
271+
_tableNode: null,
272+
_loadingNode:null,
273+
_loading:function(remove=false){
274+
if(remove){
275+
this._modalBodyNode.removeChild(this._loadingNode);
276+
this._loadingNode = null;
277+
return;
278+
}
279+
if(this._loadingNode instanceof HTMLElement){
280+
return;
281+
}
282+
let svg = componentCommonBlock._loadingSvg;
283+
let loading = document.createElement('div');
284+
loading.style = 'width: 100%;height: 100px;';
285+
loading.innerHTML = svg;
286+
this._loadingNode = loading;
287+
let firstChild = this._modalBodyNode.childNodes[0];
288+
if(firstChild instanceof HTMLElement){
289+
this._modalBodyNode.insertBefore(loading,firstChild);
290+
return;
291+
}
292+
this._modalBodyNode.append(loading);
293+
},
294+
_request: function (url) {
295+
//loading
296+
var thisObj = this;
297+
this._loading();
298+
var xhr = new XMLHttpRequest();
299+
xhr.open("GET", url, true);
300+
xhr.timeout = 3000;
301+
xhr.responseType = "text";
302+
var token= document.querySelector('meta[name="csrf-token"]').getAttribute('content');
303+
xhr.setRequestHeader("Content-type", "application/text;charset=UTF-8");
304+
xhr.setRequestHeader("X-CSRF-TOKEN", token);
305+
xhr.send(null);
306+
xhr.onreadystatechange = function () {
307+
if (xhr.readyState == xhr.DONE && xhr.status == 200) {
308+
thisObj._loading(true);
309+
var response = xhr.response;
310+
//thisObj._modalBodyNode.append(response);
311+
$('.modal-content').append(response)
312+
}
313+
};
314+
xhr.onerror = function (e) {
315+
console.log(e)
316+
};
317+
},
318+
_createBox: function (url) {
319+
let box = document.createElement("div");
320+
box.className = "box grid-box";
321+
let box_body = document.createElement("div");
322+
box_body.className = "box-body table-responsive no-padding";
323+
324+
box.append(box_body);
325+
this._boxNode = box;
326+
this._boxBodyNode = box_body;
327+
this._request(url);
328+
return;
329+
},
330+
_createModal: function () {
331+
//modal
332+
let modal = document.createElement("div");
333+
modal.setAttribute('class', 'modal grid-modal in');
334+
modal.setAttribute('tabindex', '-1');
335+
modal.setAttribute('role', 'dialog');
336+
modal.style = 'display: block;';
337+
338+
//modal_dialog
339+
let mod_dialog = document.createElement("div");
340+
mod_dialog.setAttribute('class', 'modal-dialog modal-lg');
341+
mod_dialog.setAttribute('role', 'document');
342+
343+
//modal_content
344+
let modal_content = document.createElement("div");
345+
modal_content.className = "modal-content";
346+
347+
//header
348+
let modal_header = document.createElement("div");
349+
modal_header.className = 'modal-header';
350+
modal_header.style = 'background-color:#ffffff;padding: 3px;display: flex;justify-content:flex-end;';
351+
//X
352+
let X = document.createElement('i');
353+
X.setAttribute('class','fa fa-close');
354+
X.setAttribute('style','cursor: pointer');
355+
356+
X.addEventListener('click', function () {
357+
document.body.removeChild(modal);
358+
});
359+
360+
let modal_body = document.createElement('div');
361+
modal_body.className = "modal-body";
362+
modal_body.style = 'background-color:#f4f4f4;padding:0;';
363+
this._modalBodyNode = modal_body;
364+
this._loading();
365+
//create modal
366+
modal_header.append(X);
367+
modal_content.append(modal_header);
368+
modal_content.append(modal_body);
369+
mod_dialog.append(modal_content);
370+
modal.appendChild(mod_dialog);
371+
document.body.append(modal);
372+
}
373+
};
374+
375+

‎content.blade.php

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<style>
2+
#componentForm{overflow: auto}
3+
#componentForm::-webkit-scrollbar { width: 0 !important }
4+
</style>
5+
6+
{!! Admin::style() !!}
7+
<div id="componentForm">
8+
{!! $_content_ !!}
9+
</div>
10+
{!! Admin::script() !!}
11+
{!! Admin::html() !!}
12+
13+
<script>
14+
function LA() {}
15+
LA.token = "{{ csrf_token() }}";
16+
document.getElementById('componentForm').style = 'height:'+window.innerHeight*0.8 + 'px';
17+
</script>
18+
<!-- REQUIRED JS SCRIPTS -->
19+
{!! Admin::js() !!}
20+

0 commit comments

Comments
 (0)