From: Andrzej Popowski Date: Tue, 8 Dec 2015 10:35:10 +0000 (+0100) Subject: [SampleApp] - Sample application for cordova-file X-Git-Tag: submit/tizen/20151221.111205^2~6^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=b8e26954c1bf84504a7224037cf5be1c0f66bac9;p=platform%2Fcore%2Fapi%2Fcordova-plugins.git [SampleApp] - Sample application for cordova-file Change-Id: I8a535c5c0ee7210a39b834275f21ff6b1eccfbbc Signed-off-by: Andrzej Popowski --- diff --git a/sample/index.html b/sample/index.html index ca4e730..c108f3a 100644 --- a/sample/index.html +++ b/sample/index.html @@ -41,7 +41,7 @@

Device Motion

Dialogs

Events

 -

File

 +

File

FileTransfer

Globalization

Media

 diff --git a/sample/plugins/file/index.html b/sample/plugins/file/index.html new file mode 100644 index 0000000..02e8097 --- /dev/null +++ b/sample/plugins/file/index.html @@ -0,0 +1,139 @@ + + + + + File Sample + + + + + + + +
+

File Sample

+
+ + +
+
+ + + + + + + + + +
+
+
+ + + +
+
+
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+ +
+ +
+ +
+
+
+ + +
+
+
+
+ Source file: +
+
+ +
+ +
+
+
+ + +
+
+
+
+ Source file: +
+
+ +
+ +
+
+
+ + +
+
+
+
+ File: +
+
+
+
+
+ +
+
+ +
+
Cordova API Samples
+
+ + diff --git a/sample/plugins/file/scripts/index.js b/sample/plugins/file/scripts/index.js new file mode 100644 index 0000000..f07a73c --- /dev/null +++ b/sample/plugins/file/scripts/index.js @@ -0,0 +1,408 @@ +/* + * Copyright (c) 2014-2015 Telerik AD + * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var currentScreen = 'file'; +var dirName = null; +var fileName = null; +var copyName = null; + +var opr = { + DIR_CREATED: 1, + DIR_DELETED: 2, + FILE_CREATED: 3, + FILE_DELETED: 4 +}; + +var onError = function(err) { + alert('Error: ' + err.message); +}; + + +var changeScreen = function (screen) { + // Change content + document.getElementById('content_' + currentScreen).style.display = 'none'; + document.getElementById('content_' + screen).style.display = 'block'; + + currentScreen = screen; + + // Change header + if (screen === 'create_dir') { + document.getElementById('header_el').innerHTML = '

File - create directory

'; + } else if (screen === 'write_file') { + document.getElementById('header_el').innerHTML = '

File - write to file

'; + } else if (screen === 'read_file') { + document.getElementById('header_el').innerHTML = '

File - read file

'; + } else if (screen === 'copy_file') { + document.getElementById('header_el').innerHTML = '

File - copy file

'; + } else if (screen === 'move_file') { + document.getElementById('header_el').innerHTML = '

File - move file

'; + } else if (screen === 'file') { + document.getElementById('header_el').innerHTML = '

File Sample

'; + } +}; + + +var updateButtons = function(oper) { + switch (oper) { + case opr.DIR_CREATED: + document.getElementById('createDir').disabled = true; + document.getElementById('removeDir').disabled = false; + document.getElementById('writeToFile').disabled = false; + document.getElementById('readFile').disabled = true; + document.getElementById('copyFile').disabled = true; + document.getElementById('moveFile').disabled = true; + document.getElementById('removeFile').disabled = true; + break; + + case opr.DIR_DELETED: + document.getElementById('createDir').disabled = false; + document.getElementById('removeDir').disabled = true; + document.getElementById('writeToFile').disabled = true; + document.getElementById('readFile').disabled = true; + document.getElementById('copyFile').disabled = true; + document.getElementById('moveFile').disabled = true; + document.getElementById('removeFile').disabled = true; + break; + + case opr.FILE_CREATED: + document.getElementById('writeToFile').disabled = true; + document.getElementById('readFile').disabled = false; + document.getElementById('copyFile').disabled = false; + document.getElementById('moveFile').disabled = false; + document.getElementById('removeFile').disabled = false; + break; + + case opr.FILE_DELETED: + document.getElementById('writeToFile').disabled = false; + document.getElementById('readFile').disabled = true; + document.getElementById('copyFile').disabled = true; + document.getElementById('moveFile').disabled = true; + document.getElementById('removeFile').disabled = true; + break; + } +}; + + +var setFileName = function(class_name, file_name) { + var elements = document.getElementsByClassName(class_name); + var i; + for (i = 0; i < elements.length; i++) { + elements[i].innerHTML = file_name; + } +}; + + +var App = function() { +} + + +App.prototype = { + run: function() { + var that = this; + document.getElementById('persistStor').addEventListener('click', that.persistStor); + document.getElementById('tmpStor').addEventListener('click', that.tmpStor); + document.getElementById('createDir').addEventListener('click', function() { + changeScreen('create_dir'); + }); + document.getElementById('writeToFile').addEventListener('click', function() { + changeScreen('write_file'); + }); + document.getElementById('do_write_file').addEventListener('click', that.writeFile); + document.getElementById('readFile').addEventListener('click', function() { + that.readFile(); + changeScreen('read_file'); + }); + document.getElementById('copyFile').addEventListener('click', function() { + changeScreen('copy_file'); + }); + document.getElementById('do_copy_file').addEventListener('click', that.copyFile); + document.getElementById('moveFile').addEventListener('click', function() { + changeScreen('move_file'); + }); + document.getElementById('do_move_file').addEventListener('click', that.moveFile); + document.getElementById('removeFile').addEventListener('click', that.removeFile); + document.getElementById('do_create_dir').addEventListener('click', that.createDir); + document.getElementById('removeDir').addEventListener('click', that.removeDir); + }, + persistStor: function() { + window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, + function(fileSystem) { + alert('Requesting persistent file system succeded'); + }, + function(error) { + error.message = "Requesting persistent file system failed."; + onError.call(that, error); + }); + }, + tmpStor: function() { + window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, + function(fileSystem) { + alert('Requesting temporary file system succeded'); + }, + function(error) { + error.message = "Requesting temporary file system failed."; + onError.call(that, error); + }); + }, + createDir: function() { + dirName = document.getElementById("dir_name").value; + + if (dirName === '' || /[^A-Za-z0-9_\.]/.test(dirName)) { + dirName = null; + onError({ message: 'Wrong directory name !' }); + return; + } + + resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dataDirEntry) { + dataDirEntry.getDirectory( + dirName, + { create: true, exclusive: false }, + function (dirEntry) { + alert('Directory ' + dirName + ' created'); + updateButtons(opr.DIR_CREATED); + document.getElementById('dirNameView').innerHTML = dirName; + document.getElementById('dirNameBlock').style.display = 'block'; + changeScreen('file'); + }, function (e) { + onError({ message: 'Cannot create directory (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot create directory (' + e.code + ')' }); + }); + }, + removeDir: function() { + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName, function (dirEntry) { + dirEntry.removeRecursively( + function () { + alert('Directory ' + dirName + ' deleted'); + updateButtons(opr.DIR_DELETED); + document.getElementById('dirNameView').innerHTML = ''; + setFileName('fileNameView', ''); + setFileName('copyNameView', ''); + document.getElementById('dirNameBlock').style.display = 'none'; + document.getElementById('fileNameBlock').style.display = 'none'; + document.getElementById('copyNameBlock').style.display = 'none'; + dirName = null; + fileName = null; + copyName = null; + changeScreen('file'); + }, function (e) { + onError({ message: 'Cannot create directory (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot delete directory (' + e.code + ')' }); + }); + }, + writeFile: function() { + fileName = document.getElementById("file_name").value; + + if (fileName === '' || /[^A-Za-z0-9_\.]/.test(fileName)) { + fileName = null; + onError({ message: 'Wrong file name !' }); + return; + } + + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName, function (dataDirEntry) { + dataDirEntry.getFile( + fileName, + { create: true, exclusive: false }, + function (fileEntry) { + fileEntry.createWriter( + function (writer) { + writer.onwrite = function () { + alert('File ' + fileName + ' created'); + updateButtons(opr.FILE_CREATED); + setFileName('fileNameView', fileName); + document.getElementById('fileNameBlock').style.display = 'block'; + changeScreen('file'); + }; + writer.onerror = function() { + onError({ message: 'Failed to write data to a file' }); + }; + writer.write(document.getElementById('file_content').value); + }, function (e) { + onError({ message: 'Cannot create a file (' + e.code + ')' }); + } + ); + }, function (e) { + onError({ message: 'Cannot create a file (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot create directory (' + e.code + ')' }); + }); + }, + copyFile: function() { + copyName = document.getElementById("copy_name").value; + + if (copyName === '' || /[^A-Za-z0-9_\.]/.test(copyName)) { + copyName = null; + onError({ message: 'Wrong target file name !' }); + return; + } + + if (copyName === fileName) { + copyName = null; + onError({ message: 'Target file name has to differ from source file name !' }); + return; + } + + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) { + fileEntry.getParent( + function(parentEntry) { + fileEntry.copyTo( + parentEntry, + copyName, + function() { + alert('File ' + fileName + ' copied into ' + copyName); + setFileName('copyNameView', copyName); + document.getElementById('copyNameBlock').style.display = 'block'; + changeScreen('file'); + }, function (e) { + onError({ message: 'Cannot copy a file (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot copy a file (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot copy a file (' + e.code + ')' }); + }); + }, + moveFile: function() { + var newFileName = document.getElementById("move_name").value; + + if (newFileName === '' || /[^A-Za-z0-9_\.]/.test(newFileName)) { + onError({ message: 'Wrong targer file name !' }); + return; + } + + if (newFileName === fileName) { + onError({ message: 'Target file name has to differ from source file name !' }); + return; + } + + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) { + fileEntry.getParent( + function(parentEntry) { + fileEntry.moveTo( + parentEntry, + newFileName, + function() { + alert('File ' + fileName + ' moved into ' + newFileName); + fileName = newFileName; + setFileName('fileNameView', fileName); + changeScreen('file'); + }, function (e) { + onError({ message: 'Cannot move a file (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot move a file (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot move a file (' + e.code + ')' }); + }); + }, + readFile: function() { + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) { + fileEntry.file( + function (file) { + var reader = new FileReader(); + reader.onloadend = function (evt) { + document.getElementById('file_content_view').innerHTML = evt.target.result; + if (copyName) { + document.getElementById('file_copy_read').style.display = 'block'; + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + copyName, function (fileEntry) { + fileEntry.file( + function (file) { + var reader = new FileReader(); + reader.onloadend = function (evt) { + document.getElementById('copy_content_view').innerHTML = evt.target.result; + }; + reader.readAsText(file); + }, function (e) { + onError({ message: 'Cannot read a file (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot read a file (' + e.code + ')' }); + }); + } + }; + reader.readAsText(file); + }, function (e) { + onError({ message: 'Cannot read a file (' + e.code + ')' }); + }); + }, function (e) { + onError({ message: 'Cannot read a file (' + e.code + ')' }); + }); + + }, + removeFile: function() { + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) { + fileEntry.remove( + function() { + updateButtons(opr.FILE_DELETED); + setFileName('fileNameView', ''); + document.getElementById('fileNameBlock').style.display = 'none'; + alert('File ' + fileName + ' deleted'); + fileName = null; + + if (copyName) { + resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + copyName, function (fileEntry) { + fileEntry.remove( + function() { + setFileName('copyNameView', ''); + document.getElementById('copyNameBlock').style.display = 'none'; + alert('Copy file ' + copyName + ' deleted'); + copyName = null; + }, function(e) { + onError({ message: 'Cannot delete a copy file (' + e.code + ')' }); + } + ); + }, function (e) { + onError({ message: 'Cannot delete a copy file (' + e.code + ')' }); + }); + } + }, function(e) { + onError({ message: 'Cannot delete a file (' + e.code + ')' }); + } + ); + }, function (e) { + onError({ message: 'Cannot delete a file (' + e.code + ')' }); + }); + } +}; + + +// onDeviceReady callback +function onDeviceReady() { + var app = new App(); + app.run(); + document.addEventListener('backbutton', function() { + if (currentScreen === 'file') { + window.history.back(); + } else { + changeScreen('file'); + } + }); +} + + +//Initialize function +var init = function () { + document.addEventListener('deviceready', onDeviceReady, false); +}; + +window.onload = init; diff --git a/sample/plugins/file/styles/main.css b/sample/plugins/file/styles/main.css new file mode 100644 index 0000000..6d2988e --- /dev/null +++ b/sample/plugins/file/styles/main.css @@ -0,0 +1,275 @@ +/* apply a natural box layout model to all elements */ +* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } + +html +{ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + height:100%; +} + +body +{ + font-family: sans-serif, Arial, Segoe UI; + font-size: 16px; + margin: 0; + padding: 0; + height:100%; + padding: 60px 0px 24px 0px; + overflow:hidden; +} + +/*width, height*/ +.clear {clear:both;} + +.ch10 {height:10%;} +.ch20 {height:20%;} +.ch30 {height:30%;} +.ch40 {height:40%;} +.ch50 {height:50%;} +.ch60 {height:60%;} +.ch70 {height:70%;} +.ch80 {height:80%;} +.ch90 {height:90%;} +.ch100 {height:100%;} + +.cw10 {width:10%;} +.cw20 {width:20%;} +.cw30 {width:30%;} +.cw40 {width:40%;} +.cw50 {width:50%;} +.cw60 {width:60%;} +.cw70 {width:70%;} +.cw80 {width:80%;} +.cw90 {width:90%;} +.cw100 {width:100%;} + +/*header*/ +.header +{ + position:absolute; + top: 0px; + left:0px; + width:100%; + height: 60px; + border:none; + background: #dedfe1; + background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6)); + background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%); + box-shadow: 0px 1px 0px 0px #fff; + -webkit-box-shadow: 0px 1px 0px 0px #fff; + -moz-box-shadow: 0px 1px 0px 0px #fff; + border-bottom: 1px solid #9ca1a5; + color: #639ecd; +} +.header > h1 +{ + font-size: 30px; + font-weight: normal; + border-bottom: 4px solid #639ecd; + display: inline-block; + margin: 0 0 0 12px; + position:absolute; + bottom:0; + text-shadow: 0 1px 0 #fff; +} + +/*content*/ +.content +{ + background:#f0f0f0; + min-height:100%; + height:100%; + overflow:hidden; +} + +#content_create_dir, +#content_write_file, +#content_read_file, +#content_copy_file, +#content_move_file { + display: none; +} + +.content > .input-area, +.content > .action-area, +.content > .info-area, +.content > .result-area { + width: 100%; + border-top: 1px solid #9ca1a5; + position:relative; +} +.content > .input-area, +.content > .action-area, +.content > .info-area { + border-top-color:#fff; +} +.content > .input-area.ch100, +.content > .action-areach100, +.content > .info-areach100, +.content > .result-area.ch100 { + border-top-color:transparent; +} + +.content > .input-area > .inputBox, +.content > .info-area > .inputBox { + background-color: #fff; + font-size:20px; + color: #0c0c0c; + width: 290px; + padding: 7px 10px; + border-radius: 3px; + border-width: 1px; + border-style: solid; + border-color: rgb(180, 180, 180); + border-bottom-color: rgb(255, 255, 255); + box-shadow: 0 -1px 0 #3C3C3C; + margin-left:12px; + margin-top:10px; +} +.content > .info-area, +.content > .input-area { + background-color:#e4e4e4; +} + +.content > .result-area > .results, +.content > .info-area > .info { + margin:10px; +} + +.content > .result-area > .results > .desc, +.content > .info-area > .info > .desc { + font-size:12px; + color:#a7a9ad; + margin-top:6px; + text-align:left; +} + +.content > .result-area > .results > .result-info > div:first-of-type { + color:#a7a9ad; + font-size:20px; + float:left; + text-align:right; + text-shadow: 0 1px 0 #fff; +} +.content > .result-area > .results > .result-info > div:first-of-type + div { + color:#414349; + font-size:20px; + margin-left:10px; + float:left; + text-shadow: 0 1px 0 #fff; +} + +.hidden { + display: none; +} + +#dirNameView, +.fileNameView, +.copyNameView, +#file_content_view, +#copy_content_view { + color: black; +} + +/*separator*/ +.content > .result-area > .separator +{ + height: 12px; + border: none; + background: -moz-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(227, 227, 227, 1)), color-stop(100%, rgba(240, 240, 240, 1))); + background: -webkit-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -o-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -ms-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: linear-gradient(to bottom, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + position: absolute; + top: 0px; + left: 0px; + right: 0px; + margin: 1px; +} + +/*footer*/ +.footer +{ + position:fixed; + bottom: 0px; + left:0px; + width:100%; + height: 24px; + background:#5f626a; + border-top:1px solid #42444a; + box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); + -webkit-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); +} + +.footer div +{ + position:absolute; + right:12px; + top:4px;; + color: #afb1b5; + font-size:14px; +} + +/*button*/ +.button +{ + border: 1px solid #8d9096; + border-radius: 3px; + color: #4d5d6b; + background-color: white; + margin-left:12px; + margin-top:12px; + width: 140px; + height: 32px; + display: inline; + float: left; +} + +.button:active +{ + border: 1px solid #639ecd; + background-image: none; + background-color: #639ecd; + color: #fff; + box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); + -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); + -moz-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); +} + +.button:disabled, +.button:disabled:hover, +.button:disabled:active +{ + background: rgba(49, 52, 55, 0.1); + color: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.5); +} +.button.dh { + height:60px; +} +.button.dw { + width:220px; +} + +/* landscape */ +@media screen and (orientation:landscape) { + .button.dh { + height:32px; + width:220px; + } +} + +/*specific*/ +.content > .result-area > .results > .desc, +.content > .info-area > .info > .desc { + font-size:16px; + color:#639ecd; + word-wrap:break-word; +}