Skip to content

Commit 1392bd3

Browse files
i-rockyi-rocky
committed
Parent mount works
1 parent 43dfe2c commit 1392bd3

File tree

22 files changed

+87
-70
lines changed

22 files changed

+87
-70
lines changed

‎build.js

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
import initFM from './src';
22
import ImagePreview from "./src/plugins/ImagePreview";
33

4-
window.openFileManager = initFM('/react-filemanager-server/', document.querySelector('.app'));
4+
const doc = window.parent.document;
5+
// const doc = window.document;
56

6-
["//try.getquix.net/libraries/quix/assets/css/qxbs.css", "//try.getquix.net/libraries/quix/assets/css/qxui.css"].forEach(href=>{
7-
const link = document.createElement("link");
7+
const div = doc.createElement('div');
8+
doc.body.appendChild(div);
9+
window.openFileManager = initFM('/react-filemanager-server/', div);
10+
11+
// window.openFileManager = initFM('/react-filemanager-server/', document.querySelector('.app'));
12+
13+
[
14+
"dist/style.css",
15+
"//try.getquix.net/libraries/quix/assets/css/qxui.css",
16+
"//try.getquix.net/libraries/quix/assets/css/qxbs.css",
17+
].forEach(href=>{
18+
const link = doc.createElement("link");
819
link.rel = "stylesheet";
920
link.href = href;
10-
document.head.insertBefore(link, document.head.firstChild);
21+
doc.head.insertBefore(link, doc.head.firstChild);
1122
});
1223

1324
window.ReactFileManager.registerPlugin(ImagePreview);

‎content.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>File Manager</title>
9+
</head>
10+
<body>
11+
<button onclick="openFileManager(callback)">Open File Manager</button>
12+
<div class="app">
13+
<p>Hello</p>
14+
</div>
15+
<p>Hello</p>
16+
<script src="dist/build.js"></script>
17+
<script>
18+
function callback(list) {
19+
if(list.length !== 1) {
20+
console.log("Select one file");
21+
return false;
22+
}
23+
return true;
24+
}
25+
</script>
26+
</body>
27+
</html>

‎iframe.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>File Manager</title>
9+
</head>
10+
<body>
11+
<iframe src="content.html"></iframe>
12+
</body>
13+
</html>

‎src/core/Helper.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import message from "antd/lib/message/index";
22

3-
export function viewport() {
4-
const w = window,
5-
d = document,
3+
export function viewport(doc) {
4+
const d = doc || document,
65
e = d.documentElement,
7-
g = d.getElementsByTagName('body')[0],
8-
x = w.innerWidth || e.clientWidth || g.clientWidth,
9-
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
6+
g = d.body,
7+
x = e.clientWidth || g.clientWidth,
8+
y = e.clientHeight|| g.clientHeight;
109
return {
1110
width: x,
1211
height: y

‎src/core/file-manager.jsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,11 @@ import FMStore from "./store";
33
import {Provider, observer} from 'mobx-react'
44

55
import Modal from "antd/lib/modal";
6-
import Button from "antd/lib/button";
76
import Spin from "antd/lib/spin";
87
import Tabs from "antd/lib/tabs";
98
import {viewport} from "./Helper";
109

11-
require("antd/lib/spin/style");
12-
require('../style.css');
13-
1410
const TabPane = Tabs.TabPane;
15-
const view_size = viewport();
16-
1711
const stores = {
1812
fm_store: new FMStore()
1913
};
@@ -43,6 +37,7 @@ const FileManager = class FileManager extends Component {
4337
};
4438

4539
render = () => {
40+
const view_size = viewport(stores.fm_store.document);
4641
return (
4742
<Provider {...stores}>
4843
<Modal
@@ -54,7 +49,7 @@ const FileManager = class FileManager extends Component {
5449
prefixCls="qxui-modal"
5550
footer={null}
5651
onCancel={this.handleCancel}
57-
width={window.innerWidth/1.5}
52+
width={view_size.width/1.5}
5853
getContainer={this.store.mount_point}
5954
>
6055
{this.store.tabs.length ? <Tabs defaultActiveKey={this.store.tabs[0].hook} prefixCls="qxui-tabs">

‎src/core/fm/action/index.jsx

-7
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,10 @@ import Icon from 'antd/lib/icon'
99
import Input from 'antd/lib/input'
1010
import Breadcrumb from 'antd/lib/breadcrumb'
1111

12-
require('antd/lib/auto-complete/style');
13-
require('antd/lib/message/style');
14-
require('antd/lib/input/style');
15-
require('antd/lib/breadcrumb/style');
16-
1712
import throttle from 'debounce'
1813
import ButtonGroup from 'antd/lib/button/button-group';
19-
import FMStore from "../../store";
2014

2115
const {confirm} = Modal;
22-
require('./style.css');
2316

2417
const FMAction = class FMAction extends Component {
2518
constructor(props) {

‎src/core/fm/action/style.css

Whitespace-only changes.

‎src/core/fm/content/index.jsx

-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ import PluginContainer from "../../PluginContainer";
55
import throttle from 'debounce';
66
import Button from 'antd/lib/button'
77

8-
import {viewport} from "../../Helper";
98
import ContextMenu from "../context_menu";
10-
const view_size = viewport();
119

1210
import file_types from '../../file_types';
1311

‎src/core/fm/context_menu/index.jsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React, { Component } from 'react';
2-
require('./style.css');
32

43
export default class ContextMenu extends Component {
54
componentDidMount() {
6-
this.props.el.addEventListener('contextmenu', this._handleContextMenu);
7-
this.props.el.addEventListener('click', this._handleClick);
5+
this.props.el.ownerDocument.addEventListener('contextmenu', this._handleContextMenu);
6+
this.props.el.ownerDocument.addEventListener('click', this._handleClick);
87
};
98

109
componentWillUnmount() {
11-
this.props.el.removeEventListener('contextmenu', this._handleContextMenu);
12-
this.props.el.removeEventListener('click', this._handleClick);
10+
this.props.el.ownerDocument.removeEventListener('contextmenu', this._handleContextMenu);
11+
this.props.el.ownerDocument.removeEventListener('click', this._handleClick);
1312
}
1413

1514
_handleContextMenu = (event) => {
@@ -49,7 +48,6 @@ export default class ContextMenu extends Component {
4948
};
5049

5150
_handleClick = (event) => {
52-
event.target.getAttribute('onclick').call(this);
5351
const menu_items = this.props.menu_items;
5452
const wasOutside = !(event.target.contains === this.root);
5553

‎src/core/general/copy/index.jsx

-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ import AutoComplete from 'antd/lib/auto-complete'
55
import Modal from 'antd/lib/modal'
66
import message from 'antd/lib/message'
77

8-
require('antd/lib/auto-complete/style');
9-
require('antd/lib/modal/style');
10-
require('antd/lib/message/style');
11-
128
const PLUGIN = "General";
139

1410
export default class Copy extends Component {

‎src/core/general/file-info/index.jsx

-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import message from 'antd/lib/message'
44
import Modal from 'antd/lib/modal'
55
import Row from 'antd/lib/grid/row'
66

7-
require('antd/lib/message/style');
8-
require('antd/lib/modal/style');
9-
require('antd/lib/grid/style');
10-
117
const PLUGIN = "General";
128

139
export default class FileInfo extends Component {

‎src/core/general/move/index.jsx

-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ import message from 'antd/lib/message'
55
import Modal from 'antd/lib/modal'
66
import AutoComplete from "antd/lib/auto-complete"
77

8-
require('antd/lib/message/style');
9-
require('antd/lib/modal/style');
10-
require('antd/lib/auto-complete/style');
11-
128
const PLUGIN = "General";
139

1410
export default class Move extends Component {

‎src/core/general/new_dir/index.jsx

-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import message from 'antd/lib/message'
44
import Modal from 'antd/lib/modal'
55
import Input from 'antd/lib/input'
66

7-
require('antd/lib/message/style');
8-
require('antd/lib/modal/style');
9-
require('antd/lib/input/style');
10-
117
const PLUGIN = "General";
128

139
export default class NewDirectory extends Component {

‎src/core/general/new_file/index.jsx

-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ import message from 'antd/lib/message'
44
import Modal from 'antd/lib/modal'
55
import Input from 'antd/lib/input'
66

7-
require('antd/lib/message/style');
8-
require('antd/lib/modal/style');
9-
require('antd/lib/input/style');
107

118
const PLUGIN = "General";
129

‎src/core/general/rename/index.jsx

-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ import Col from 'antd/lib/grid/col'
66
import Row from 'antd/lib/grid/row'
77
import Input from 'antd/lib/input'
88

9-
require('antd/lib/message/style');
10-
require('antd/lib/modal/style');
11-
require('antd/lib/grid/style');
12-
require('antd/lib/input/style');
13-
149
const PLUGIN = "General";
1510

1611
export default class Rename extends Component {

‎src/core/general/upload/index.jsx

-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@ import Modal from 'antd/lib/modal'
55
import Icon from 'antd/lib/icon'
66
import Upload from 'antd/lib/upload'
77

8-
require('antd/lib/message/style');
9-
require('antd/lib/modal/style');
10-
require('antd/lib/icon/style');
11-
require('antd/lib/upload/style');
12-
138
const {Dragger} = Upload;
149

1510
export default class Uploader extends Component {

‎src/core/store.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import {observable, computed, action} from 'mobx'
33

44
import message from 'antd/lib/message';
55

6-
require("antd/lib/message/style");
7-
86
import NewDirectory from "./general/new_dir/index";
97

108
import axios from 'axios'
@@ -18,8 +16,6 @@ import FM from "./fm";
1816
import {remove_duplicate_slash} from "./Helper";
1917
import {audio, image, video} from "./file_types";
2018

21-
require('antd/lib/message/style');
22-
2319
const FILTERS = ["image", "video", "dir", "icon"];
2420

2521
export default class FMStore {
@@ -265,6 +261,10 @@ export default class FMStore {
265261
return () => this.config.mount_point;
266262
}
267263

264+
get document() {
265+
return this.mount_point() ? this.mount_point().ownerDocument : window.document;
266+
}
267+
268268
//all core information
269269
get data() {
270270
return this.config.data;

‎src/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import {render} from 'react-dom'
33
import FileManager from './core/file-manager'
4-
import './style.less';
54

65
window.ReactFileManager = {};
76
window.ReactFileManager.React = React;

‎src/plugins/ImagePreview/ImagePreview.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {Component} from 'react'
22
import Modal from "antd/lib/modal/Modal";
33
import Card from "antd/lib/card";
4-
require('antd/lib/card/style');
54

65
export default class ImagePreview extends Component {
76
constructor(props) {

‎src/style.css

Whitespace-only changes.

‎src/style.less

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
@import "~antd/lib/message/style/index.less";
2+
@import "~antd/lib/spin/style/index.less";
3+
@import "~antd/lib/auto-complete/style/index.less";
4+
@import "~antd/lib/input/style/index.less";
5+
@import "~antd/lib/breadcrumb/style/index.less";
6+
@import "~antd/lib/modal/style/index.less";
7+
@import "~antd/lib/grid/style/index.less";
8+
@import "~antd/lib/card/style/index.less";
9+
@import "~antd/lib/style/index.less"; // icon
10+
@import "~antd/lib/upload/style/index.less";
11+
112
// Modal
213
.fm-modal{
314
// z-index: 9991 !important;
@@ -116,4 +127,6 @@
116127
clear: both;
117128
display: block;
118129
margin: 0 auto;
119-
}
130+
}
131+
132+
@import "./core/fm/context_menu/style.css";

‎webpack.mix.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,6 @@ mix
2323
]
2424
}
2525
})
26-
.sourceMaps()
27-
.react('build.js', 'dist');
26+
.react('build.js', 'dist')
27+
.less('src/style.less', 'dist')
28+
.sourceMaps();

0 commit comments

Comments
 (0)