The File Management toolbar for mobile hybrid development

Index.html

<!   DOCTYPE html><!--Licensed to the Apache software Foundation (ASF) under one or more contributor license agreements.  See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License");  You are not a use of this file except in compliance with the License. Obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 unless required by applicable law or AG Reed to in writing, software distributed under the License are distributed on a "as is" BASIS, without warranties OR Condi  tions of any KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -->
 Index.css 
 
/* * Licensed to the Apache software Foundation (ASF) under one * or more contributor license agreements.  See the NOTICE file * Distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * under the Apache License, Version 2.0 (The * "License");  You are not a use of this file except in compliance * with the License. Obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * unless required by applicable l AW or agreed to writing, * software distributed under the License are distributed on A * "As is" BASIS, without WARRANT  IES or CONDITIONS of any * KIND, either express OR implied. See the License for the * Specific language governing permissions and limitations * under the License. */* {-webkit-tap-highlight-color:rgba (0,0,0,0);/* Make transparent link selection, adjust last value opacity 0 to 1.    0 */}.head{Position:absolute;    left:0;    right:0;    top:0;    Height:2rem; Line-hEight:2rem;    Background-color:orange;    Padding-left:.3rem;    Color:white; Text-align:center;}.    content{Position:absolute;    Top:2rem;    bottom:0;    left:0;    right:0; Overflow:hidden;}.    Content. nav{Position:absolute;    top:0;    Height:1.5rem;    left:0;    right:0; Background: #efefef;}.    Content. list{Position:absolute;    Top:1.5rem;    left:0;    right:0;    Bottom:3rem;    Background: #adadad; Overflow:hidden;}.    opeator{Position:absolute;    bottom:0;    left:0;    right:0;    Height:3rem;    /* Container Use DISPLAY:FELX properties */Display:flex; Display:-webkit-flex;    /* */}a{-webkit-user-select:none; User-select:none;}    a.touchinside{Background:lightgray; Color:whitesmoke;}.    Opeator a{/* Use felx:1 to distribute content evenly */flex:1;    -webkit-box-flex:1;    /* Webfont as font processing, font center */text-align:center;    Text-decoration:none; Display:block;}.    Content ul{List-style:none;    padding:0; margin:0;}. Content ul li{Position:relative;    Height:4rem;    Line-height:2rem;    Padding-left:. 5rem;    border-bottom:1px solid Gray; Background:white;}. Content ul li.touchinside{background: #efefef;}.    Content ul Li. file-icon{position:absolute; Background:url ("..    /img/file.png ") No-repeat Center;    Background-size:1.2rem 1.2rem;    Width:1.2rem;    Height:1.2rem;    Left:1rem; Top:.3rem;}.    Content ul Li. file-name{position:absolute;    Line-height:2rem; Left:3.2rem;}. t{Display:none;} #upper {position:absolute;right:15px;top:5px;color:blue;}    #log {width:200px;    height:30px;    color:red; Float:right;}    /* Redefine icon position */.icon-trash-empty:before{Display:block;    padding-top:10px; /* This will make the font is not centered, the direct designation FontSize *//*width:1rem;*/Font-size:1.2rem;}.    icon-server:before{Display:block;    padding-top:10px; /* This will make the font is not centered, the direct designation FontSize * * * FONT-SIZE:1.2REM;}.    icon-html5:before{Display:block;    padding-top:10px; /* This will make the font not centered, directly specify the fontsize is good */   Font-size:1.2rem;}    #dialog-overlay{Display:none;    Position:absolute;    top:0;    left:0;    right:0;    bottom:0; Background:rgba (0,0,0,0.3);}    #title {font-size:1rem;    Height:1rem;    padding:. 3rem; Text-align:center;}    #dialogContent {text-align:center;    Background: #efefef;    Height:8rem;    Position:absolute;    left:0;    bottom:0; right:0;}    #input-content{Padding-top:2rem; Padding-bottom:1rem;}    #file-name-input{Width:16rem;    padding:. 3rem. 4rem; Font-size:1rem;}    a.btn{Background:lavender;    Border:solid 1px Grey;    border-radius:5px; padding:5px;}    a.btn.touchinside{Background:lightgray; Color:whitesmoke;}    #btn-content{Text-align:center; padding:. 3rem;}
　　
Index.js
/* * Licensed to the Apache software Foundation (ASF) under one * or more contributor license agreements.  See the NOTICE file * Distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * under the Apache License, Version 2.0 (The * "License");  You are not a use of this file except in compliance * with the License. Obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * unless required by applicable l AW or agreed to writing, * software distributed under the License are distributed on A * "As is" BASIS, without WARRANT  IES or CONDITIONS of any * KIND, either express OR implied. See the License for the * Specific language governing permissions and limitations * under the License.    */var app = {//Application Constructor initialize:function () {this.bindevents (); },//Bind Event Listeners////bind any events is required on startup. Common events are:// ' Load ', ' deviceready ', ' Offline ', and ' online '.    Bindevents:function () {document.addeventlistener (' Deviceready ', This.ondeviceready, false); },//Deviceready event Handler////The scope of ' this ' is the event.    In order to call the ' receivedevent '/function, we must explicitly call ' App.receivedevent (...); '        Ondeviceready:function () {//App.receivedevent (' Deviceready ');        $ (function () {mydeviceready ();    }); },//Update DOM on a Received Event receivedevent:function (id) {var parentelement = Document.getelementby        ID (ID);        var listeningelement = Parentelement.queryselector ('. listening ');        var receivedelement = Parentelement.queryselector ('. Received ');        Listeningelement.setattribute (' style ', ' display:none; ');        Receivedelement.setattribute (' style ', ' display:block; ');    Console.log (' Received Event: ' + ID); }};app.initialize (); var myscroll = Null;function Mydeviceready() {var size = $ (window). Width ()/18//Design font width $ (' html '). CSS (' font-size ', size);    Myscroll = new Iscroll ("#file-list"); Open Folder Window.resolvelocalfilesystemurl (cordova.file.externalRootDirectory, function (entry) {Filedealer.opene    Ntry (entry);    }, function () {alert (' fail ');    });    $ ('. Icon-html5 '). Bindtouch (function () {$ (' #dialog-overlay '). CSS (' Display ', ' block ');    });    $ ('. Icon-server '). Bindtouch (function () {}) $ ('. Icon-trash-empty '). Bindtouch (function () {});        $ (' #file-create '). Bindtouch (function () {//Val gets the value var fileName = $ (' #file-name-input '). Val ();        if (filename.length ==0 | | fileName = = undefined) {return;        } var curentry = $ (' #current-dir '). Data (' Curentry ');        Console.log (Curentry);        Console.log (Filedealer);    Filedealer.createfile (Curentry,filename);    });        $ (' #file-cancel '). Bindtouch (function () {//alert (' Cancel create '); $ (' #dialog-oveRlay '). CSS (' Display ', ' none '); });} function Filehander () {}/*--------------------Create folder-------------*/filehander.prototype.createfile = function (entry    , filename) {console.log (1);        Entry.getdirectory ('./' +filename,{create:true},function (direntry) {Console.log (' created successfully! ');        Filedealer.openentry (Direntry);    $ (' #dialog-overlay '). CSS (' Display ', ' none ');    },function () {alert (' Create failed! '); });} /*-------------------open folder---------------------*/filehander.prototype.openentry = function (entry) {//using clone mode,    The re-update page cannot be used, $ (' #file-list ul). HTML (");    $ (' #file-list ul li.item '). Remove ();    var Curren_dir = $ (' #current-dir ');    Curren_dir.text ("Current directory:" + entry.name) curren_dir.data ("Curentry", entry); $ (' #upper '). Bindtouch (function () {entry.getparent (entry) {Filedealer.openen            Try (entry);            }, function () {alert (' Get Parent Error ');        }            );    }    ); Entry.createReader (). readentries (function (entries) {sortentrise (entries);                for (var i = 0; i < entries.length; i++) {var entry = Entries[i];                Using clone mode, it is more convenient to var Jobjectli = $ ('. T '). Clone (). Removeclass (' t '). addclass (' item ');                Jobjectli.find ('. File-name '). Text (entry.name);                Jobjectli.data (' entry ', entry);                $ ('. List ul '). Append (Jobjectli);                    Jobjectli.bindtouch (function () {var lientry = $ (this). Data (' entry ');                    if (!lientry.isfile) {filedealer.openentry (lientry);            }                });        } Myscroll.refresh ();        }, function (Error) {alert (error); });} var filedealer = new Filehander ()//separates files and folders from function sortentrise (entries) {Entries.sort (function (A, b) {if (        A.isfile &&!b.isfile) {return 1; } else if (!a.isfile&& b.isfile) {return-1;        } else {return a.name < b.name; }})}/*------------Add Click event--------------*///extension to jquery custom Function $.fn.bindtouch = function (CB) {attachmyevent ($ (this), CB) ;};    function Attachmyevent (SR, CB) {//click Event response time is 300 milliseconds, so cancel click with manual//finger Press, if the finger moves, trigger cancel Sr.unbind ();    var point_one = {};    var point_two = {};        Sr.on (' Touchstart ', function (event) {var me = $ (this) me.data (' Touch ', true);        var touch = event.originalevent.targettouches[0];        point_one.x = Touch.pagex;        Point_one.y = Touch.pagey;    Me.addclass (' touchinside ');    });        Sr.on (' Touchend ', function () {var me = $ (this);        if (me.data (' touch ') = = True) {//change the This pointer of the callback function to be SR//Trigger callback function Cb.bind (this) ();    } me.removeclass (' Touchinside ') me.data (' Touch ', false);    });        Sr.on (' Touchmove ', function (event) {var me = $ (this); var touch = EvenT.originalevent.targettouches[0];        point_two.x = Touch.pagex;        POINT_TWO.Y = Touch.pagey; if (me.data (' Touch ')) {//Huawei mobile phone test, no sliding will also trigger touchmove, so add a measurement of the sliding distance, to determine whether to slide var Distane = getpointsdistance (            Point_one, Point_two);            Console.log (Distane);            $ (' #log '). Text (Distane);                if (Distane > 4) {me.data (' touch ', false);    Me.removeclass (' Touchinside ')}}//alert (2); });}    Calculates the distance between two points function getpointsdistance (P1, p2) {var xdistance = Math.Abs (p1.x-p2.x);    var ydistance = Math.Abs (P1.Y-P2.Y);    var distance = math.sqrt (xdistance * xdistance + ydistance * ydistance); return distance;}
　　
The File Management toolbar for mobile hybrid development