https://lingyuzhao.top/js/DiskMirrorUserResource.js

1class DiskMirrorUserResource {
2
3    /**
4     * 将一个对象添加到页面中
5     * @param e 用于存储元素的控件
6     * @param imageJson {
7     * {  "fileName": string,  "url": string,  "lastModified": number,  "size": number}
8     * } 需要被添加的文件元数据对象
9     * @param removeCallback {function} 用于删除元素的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
10     * @param reNameCallback {function} 用于重命名元素的回调函数 (json: {fileName: string, newName: string, url: string, lastModified: number, size: number}) => void
11     * @param className 子元素空间额外的类名 默认是空字符串
12     * @param fileNameMap 文件名称层级处理映射函数
13     */
14    static addVideoDiv(e, imageJson, removeCallback = undefined, reNameCallback = undefined, className = "", fileNameMap = undefined) {
15
16        // 计算出时间
17        const lastModified = getDate(imageJson.lastModified);
18        // 计算出url
19        const url = imageJson.url;
20        // 计算出 名称
21        const fileName = imageJson.fileName;
22        const div = document.createElement("div");
23        div.className = "imageDiv" + ' ' + className;
24
25        const img = document.createElement("video");
26        img.src = url;
27        img.alt = fileName;
28        img.controls = true;
29        div.appendChild(img);
30
31        const bottom = document.createElement("div");
32        bottom.className = "bottom profile-button";
33        this.initBottomE(fileName, bottom, lastModified, url, imageJson, removeCallback, e, div, reNameCallback, undefined, undefined);
34
35        div.appendChild(bottom);
36
37        e.appendChild(div);
38    }
39
40    /**
41     * 将元素添加到指定的控件中
42     * @param fileName
43     * @param bottom
44     * @param lastModified
45     * @param url
46     * @param imageJson
47     * @param removeCallback
48     * @param e
49     * @param div
50     * @param reNameCallback
51     * @param a_is_fun 点击查阅之后是否会使用回调函数 如果不使用会回调就是使用 url
52     * @param titleName_First 标题名称的开头
53     */
54    static initBottomE(fileName, bottom, lastModified, url, imageJson, removeCallback, e, div, reNameCallback, a_is_fun = undefined, titleName_First = "") {
55        const h4 = document.createElement("h4");
56        h4.textContent = titleName_First + fileName;
57        bottom.appendChild(h4);
58
59        const br = document.createElement("br");
60        bottom.appendChild(br);
61
62        const h5 = document.createElement("h5");
63        h5.title = `《${fileName}》的上传时间：${lastModified}`;
64        h5.textContent = lastModified;
65        bottom.appendChild(h5);
66
67        const a1 = document.createElement("a");
68        if (a_is_fun !== undefined) {
69            a1.onclick = () => a_is_fun(imageJson);
70        } else {
71            a1.href = url;
72            a1.download = fileName;
73        }
74        a1.target = "_blank";
75        const span1 = document.createElement("span");
76        span1.title = "查看/下载资源：" + formatBytes(imageJson.size);
77        span1.innerText = '';
78        a1.appendChild(span1);
79
80        const a2 = document.createElement("a");
81        a2.href = "#";
82        a2.className = "remove";
83        a2.onclick = function () {
84            if (removeCallback !== undefined) {
85                if (removeCallback(imageJson)) {
86                    e.removeChild(div);
87                }
88            }
89        };
90        const span2 = document.createElement("span");
91        span2.title = "删除当前的资源";
92        span2.innerText = 'î½¢';
93        a2.appendChild(span2);
94
95
96        const a3 = document.createElement("a");
97        a3.href = "#";
98        a3.className = "reName";
99        a3.onclick = function () {
100            if (reNameCallback !== undefined) {
101                if (reNameCallback(imageJson)) {
102                    fileName = imageJson.newName;
103                    h4.textContent = "[新名字]" + fileName;
104                    h4.style.color = '#00ff6e'
105                }
106            }
107        };
108        const span3 = document.createElement("span");
109        span3.title = "对当前资源进行重命名";
110        span3.innerText = '';
111        a3.appendChild(span3);
112
113

114        if (isMobileDevice()) {
115            a1.style.fontSize = '35px';
116            a2.style.fontSize = '35px';
117            a3.style.fontSize = '35px';
118        }
119
120        bottom.appendChild(a1);
121
122        bottom.appendChild(a2);
123
124        bottom.appendChild(a3);
125    }
126
127    /**
128     * 将一个对象添加到页面中
129     * @param e 用于存储元素的控件
130     * @param imageJson {
131     * {  "fileName": string,  "url": string,  "lastModified": number,  "size": number}
132     * } 需要被添加的文件元数据对象
133     * @param removeCallback {function} 用于删除元素的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
134     * @param reNameCallback {function} 用于重命名元素的回调函数 (json: {fileName: string, newName: string, url: string, lastModified: number, size: number}) => void
135     * @param className 子元素空间额外的类名 默认是空字符串
136     * @param clickCallback 点击元素的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
137     */
138    static addDirDiv(e, imageJson, removeCallback = undefined, reNameCallback = undefined, className = "", clickCallback = undefined) {
139        // 计算出时间
140        const lastModified = getDate(imageJson.lastModified);
141        // 计算出 名称
142        const fileName = imageJson.fileName;
143        const div = document.createElement("div");
144        div.className = "imageDiv" + ' ' + className;
145        // 计算出url
146        const url = 'image/folder_icon.png';
147        const img = document.createElement("img");
148        img.src = url;
149        img.alt = fileName;
150        div.appendChild(img);
151        const bottom = document.createElement("div");
152        bottom.className = "bottom profile-button";
153        this.initBottomE(fileName, bottom, lastModified, url, imageJson, removeCallback, e, div, reNameCallback, clickCallback, " ");
154        div.appendChild(bottom);
155        e.appendChild(div);
156    }
157
158    /**
159     * 将一个对象添加到页面中
160     * @param e 用于存储元素的控件
161     * @param imageJson {
162     * {  "fileName": string,  "url": string,  "lastModified": number,  "size": number}
163     * } 需要被添加的文件元数据对象
164     * @param removeCallback {function} 用于删除元素的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
165     * @param reNameCallback {function} 用于重命名元素的回调函数 (json: {fileName: string, newName: string, url: string, lastModified: number, size: number}) => void
166     * @param className 子元素空间额外的类名 默认是空字符串
167     */
168    static addImageDiv(e, imageJson, removeCallback = undefined, reNameCallback = undefined, className = "") {
169
170        // 计算出时间
171        const lastModified = getDate(imageJson.lastModified);
172        // 计算出url
173        const url = imageJson.url;
174        // 计算出 名称
175        const fileName = imageJson.fileName;
176        const div = document.createElement("div");
177        div.className = "imageDiv" + ' ' + className;
178
179        const img = document.createElement("img");
180        img.src = url;
181        img.alt = fileName;
182        div.appendChild(img);
183        const bottom = document.createElement("div");
184        bottom.className = "bottom profile-button";
185        this.initBottomE(fileName, bottom, lastModified, url, imageJson, removeCallback, e, div, reNameCallback, undefined, undefined);
186        div.appendChild(bottom);
187        e.appendChild(div);
188    }
189
190    /**
191     * 将一个对象添加到页面中
192     * @param e 用于存储元素的控件
193     * @param objJson {
194     * {  "fileName": string,  "url": string,  "lastModified": number,  "size": number}
195     * } 需要被添加的文件元数据对象
196     * @param removeCallback {function} 用于删除元素的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
197     * @param reNameCallback {function} 用于重命名元素的回调函数 (json: {fileName: string, newName: string, url: string, lastModified: number, size: number}) => void
198     * @param className 子元素空间额外的类名 默认是空字符串
199     */
200    static addOtherDiv(e, objJson, removeCallback = undefined, reNameCallback = undefined, className = "") {
201        const lastModified = getDate(objJson.lastModified);

202        const fileName = objJson.fileName;
203        const url = objJson.url;
204
205        const div = document.createElement("div");
206        div.className = "imageDiv container otherDiv " + className;
207
208        const h2 = document.createElement("h2");
209        h2.textContent = "《" + fileName + "》";
210        h2.style.color = '#aaaaaa'
211        div.appendChild(h2);
212
213        const bottom = document.createElement("div");
214        bottom.className = "bottom profile-button";
215        this.initBottomE(fileName, bottom, lastModified, url, objJson, removeCallback, e, div, reNameCallback, undefined, undefined);
216        div.appendChild(bottom);
217
218        e.appendChild(div);
219    }
220
221    /**
222     * 将一个对象添加到页面中 会根据文件名字自动的添加
223     * @param e 用于存储元素的控件
224     * @param objJson {
225     * {  "fileName": string,  "url": string,  "lastModified": number,  "size": number}
226     * } 需要被添加的文件元数据对象
227     *  @param removeCallback {function} 用于删除元素的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
228     *  @param reNameCallback {function} 用于重命名元素的回调函数 (json: {fileName: string, newName: string, url: string, lastModified: number, size: number}) => void
229     *  @param className 子元素空间额外的类名 默认是空字符串
230     *  @param dirClickFun 点击目录的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
231     */
232    static addObj(e, objJson, removeCallback = undefined, reNameCallback = undefined, className = "", dirClickFun = undefined) {
233        const fileName = objJson.fileName !== undefined ? objJson.fileName : "";
234        // 查看是否为 目录
235        if (objJson.isDir) {
236            // 是目录 就直接调用目录的追加函数
237            this.addDirDiv(e, objJson, removeCallback, reNameCallback, className, dirClickFun)
238            return;
239        }
240        const number = fileName.lastIndexOf('.');
241        switch ((number >= 0 ? fileName.substring(number) : fileName).toLowerCase()) {
242            case ".jpg":
243            case ".jpeg":
244            case ".svg":
245            case ".png":
246            case ".gif":
247                this.addImageDiv(e, objJson, removeCallback, reNameCallback, className);
248                break;
249            case ".mp4":
250            case ".avi":
251            case ".mov":
252            case ".rmvb":
253            case ".rm":
254            case ".flv":
255                this.addVideoDiv(e, objJson, removeCallback, reNameCallback, className);
256                break;
257            default:
258                this.addOtherDiv(e, objJson, removeCallback, reNameCallback, className);
259        }
260    }
261
262    /**
263     * 将一个对象添加到页面中 会根据文件名字自动的添加
264     * @param e 用于存储元素的控件
265     * @param objJsons {
266     * [{  "fileName": string,  "url": string,  "lastModified": number,  "size": number}]
267     * } 需要被添加的文件元数据对象 组成的 列表
268     * @param removeCallback {function} 用于删除元素的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
269     * @param reNameCallback {function} 用于重命名元素的回调函数 (json: {fileName: string, newName: string, url: string, lastModified: number, size: number}) => void
270     * @param filter {function} 用来进行过滤添加的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => boolean
271     * @param dirClickFun 点击目录的回调函数 (json: {fileName: string, url: string, lastModified: number, size: number}) => void
272     */
273    static addObjs(e, objJsons, removeCallback = undefined, reNameCallback = undefined, filter = undefined, dirClickFun = undefined) {
274        if (objJsons === undefined || objJsons.length === 0) {
275            this.addObj(e, {
276                fileName: "您可以直接将文件粘贴在这里实现上传.svg",
277                url: "image/notFind.svg",
278                lastModified: new Date().getTime(),
279                size: 2048
280            }, undefined, undefined, "vmImageDiv")
281            return;
282        }
283        let count = 0;
284        for (let i = 0; i < objJsons.length; i++) {
285            const objJson = objJsons[i];
286            if (!filter || filter(objJson)) {
287                ++count;
288                this.addObj(e, objJson, removeCallback, reNameCallback, "", dirClickFun);
289            }
290        }
291        if (count === 0) {
292            this.addObj(e, {
293                fileName: "您可以直接将文件粘贴在这里实现上传.svg",
294                url: "image/notFind.svg",
295                lastModified: new Date().getTime(),
296                size: 2048
297            }, undefined, undefined, "vmImageDiv")
298        }
299    }
300}