JavaScriptのメモ帳アプリ編集について

締切済

質問者：DreamyLife_615
質問日時：2014/05/15 19:39
回答数：3件

Monacaでメモ帳を作りました
このコードだと追加ボタンを押してテキストエリアが現れテキストを書き込み保存してTopPageにリスト化できるようになっています。またそのリストを押すとメモが閲覧できます
ですが理想としては閲覧ページのヘッダー部分に「編集」というボタンをつけて押すとメモが編集できるようにしたいです
どうすればできるのでしょうか？
いろいろ調べたのですが応用できなくて......。

index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="plugins/plugin-loader.js"></script>
<link rel="stylesheet" href="plugins/plugin-loader.css">
<script src="js/memo.js"></script>
<script src="js/app.js"></script>
<script>
monaca.viewport({width: 320});
</script>
</head>
<body>

<div data-role="page" id="TopPage">
<header data-role="header" data-position="fixed">
<h1>TextMemo</h1>
<a href="#AddPage" data-icon="plus" class="ui-btn-right">追加</a>
</header>
<section data-role="content">
<ul id="TopListView" data-role="listview"
data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">
</ul>
</section>
</div>


<div data-role="page" id="AddPage">
<header data-role="header" data-position="fixed">
<a data-role="button" data-rel="back" data-icon="back">Back</a>
<h1>Add Memo</h1>
</header>
<section data-role="content">
<label for="Memo">Memo:</label>
<textarea id="Memo"></textarea>
<a data-role="button" data-icon="check" id="SaveBtn">Save</a>
</section>
</div>


<div data-role="page" id="ShowPage">
<header data-role="header" data-position="fixed">
<a data-role="button" data-rel="back" data-icon="back">Back</a>
<h1></h1>
</header>
<section data-role="content">
<p></p>
</section>
</div>
</body>
</html>

app.js

function onSaveBtn() {
var text = $("#Memo").val();
if (text != '') {
// Save to local storage
addMemo(text);
// Clear form
$("#Memo").val("");
// Initialize top page
initTopPage();
}
$.mobile.changePage("#TopPage", { reverse: true });
}

function initTopPage() {
$("#TopListView").empty();

var list = getMemoList();
for (var i in list) {
var memo = list[i];
var d = new Date(memo.time);
var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();

$li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
$li.data("id", memo.id);
$li.find("h3").text(date);
$li.find("p").text(memo.text);
$("#TopListView").prepend($li);
}
if (list.length == 0) {
$li = $("<li>NO MEMO</li>");
$("#TopListView").prepend($li);
}
$("#TopListView").listview("refresh"); // Call refresh after manipulating list
}

function onShowLink() {
var $li = $(this).parent();
var memoTitle = $li.find("h3").text();
var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");

$("#ShowPage h1").text(memoTitle);
$("#ShowPage p").html(memoHtml);
$.mobile.changePage("#ShowPage");
}

function onDeleteLink() {
if (!confirm("本当に削除しますか?")) {
return;
}
var $li = $(this).parent();
var id = $li.data("id");
deleteMemo(id);

initTopPage();

$.mobile.changePage("#TopPage", { reverse: true });
}

function onReady() {
initTopPage();
$("#SaveBtn").click(onSaveBtn);
$("#TopListView a.show").live("click", onShowLink);
$("#TopListView a.delete").live("click", onDeleteLink);

monaca.splashScreen.hide();
}

$(onReady); // on DOMContentLoaded

memo.js
///// Return list of memo
function getMemoList() {
var list = localStorage.getItem("memo_list");
if (list == null) {
return new Array();
} else {
return JSON.parse(list);
}
}

///// Save memo
function saveMemoList(list) {
try {
localStorage.setItem("memo_list", JSON.stringify(list));
} catch (e) {
alert('Error saving to storage.');
throw e;
}
}

///// Add memo
function addMemo(text) {
var list = getMemoList();
var time = new Date().getTime();
list.push({ id: time, time: time, text: text });
saveMemoList(list);
}

///// Delete specified memo
function deleteMemo(id) {
var list = getMemoList();
for (var i in list) {
if (list[i].id == id) {
list.splice(i, 1);
break; // Quit for loop when found
}
}
saveMemoList(list);
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： Ogre7077
回答日時：2014/05/19 11:59

No.2 の回答に追記です

> 閲覧から編集を押すとWindowsのメモ帳みたいに書き込んだ内容も表示され...

関数 onShowLink は、閲覧ページに内容を表示する処理ですが、
編集ページにも表示させる様に処理を追加しましょう
これで閲覧から編集にページが移っても内容はそのまま表示されます

$("#UpdateId").val(id);
$("#UpdateText").val(text);

id/text の中身ですが、推測するにこのような感じでしょうか

var id = $li.data("id");
var text = $li.find("p").text();

- 2
- 件

通報する

No.2

回答者： Ogre7077
回答日時：2014/05/16 12:03

改造点を簡単に

閲覧ページにリンク追加
<a href="#UpdatePage">編集</a>

編集ページを新設
<div data-role="page" id="UpdatePage">
<input type=hidden id="UpdateId">
<textarea id="UpdateText"></textarea>
<a id="UpdateBtn">Update</a>
</div>

関数 onShowLink に処理追加
$("#UpdateId").val(id);
$("#UpdateText").val(text);

関数 onUpdateBtn を新設
function onUpdateBtn() {
var id = $("#UpdateId").val();
var text = $("#UpdateText").val();
deleteMemo(id);
addMemo(text); // TODO updateMemo(id,text) に置き換える
initTopPage();
$.mobile.changePage("#TopPage", { reverse: true });
}

関数 onReady に処理追加
$("#UpdateBtn").click(onUpdateBtn);

この回答への補足

詳しくありがとうございます！！
組み入れたのですが動きませんでした、、、。

どこに組み入れればよいのでしょうか？

補足日時：2014/05/16 12:52

通報する

- 0
- 件

通報する

この回答へのお礼

indexとappに入れたら動きました！！
ですが理想としては新しいテキストエリアではなく書いた内容も表示してそこから編集できるようにしたいです
例えるなら
閲覧から編集を押すとWindowsのメモ帳みたいに書き込んだ内容も表示され誤字脱字を訂正できるような感じです

通報する

お礼日時：2014/05/16 15:54

No.1

回答者： babu_baboo
回答日時：2014/05/16 04:32

おはようございます。

まったく参考にならないでしょうけれど、こんぱくとにじぶんなりにかいてみました。
さくじょする機能がないことに、いまきづきました。が投稿します

<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>
body > section {
　display : none;
}

#ViewPage > div {
　border: 2px green dotted;
　margin-top : 1em;
　padding : 1ex;
}

#LIST li {
　text-overflow: ellipsis;
}
</style>

<body>

<section id="TopPage">
　<header>
　　<h1>TextMemo</h1>
　</header>
　<ol id="List">
　</ol>
</section>

<section id="EditPage">
　<header>
　　<h1>Edit Memo</h1>
　　<a href="#TopPage">Top</a>
　　<a href="#Save">Save</a>
　　<a href="#ViewPage">View</a>
　</header>

　<p>
　　Memo:
　<p>
　　<textarea cols="60" rows="10" id="Text"></textarea>
</section>

<section id="ViewPage">
　<header>
　　<h1>View Memo</h1>
　　<a href="#TopPage">Top</a>
　　<a href="#Save">Save</a>
　　<a href="#EditPage">Edit</a>
　</header>
　<div id="Content"></div>
</section>

<script>
function disp (s) { s.style.display = this == s ? 'block': 'none' }
function remove (e) { while (e.hasChildNodes ()) e.removeChild (e.firstChild) }

function createLI (t, h) {
　var d = document;
　var a = d.createElement ('a');
　var li = d.createElement ('li');
　
　a.href = h;
　return li.appendChild (a).appendChild (d.createTextNode (t)), li;
}

function hashCheck (h) {
　var p, n;
　
　if (p = /^(#ViewPage)-(\d+)$/.exec (h))
　　h = p[1], NO = Number (p[2]);
　
　switch (h) {
　case '' :
　case '#TopPage' :
　　remove (LIST);
　　for (var i = 0, I = DATA.length; i < I; i++)
　　　LIST.appendChild (createLI (DATA[i].substring (0, 20), '#ViewPage-' + i));
　　LIST.appendChild (createLI ('[New]', '#NewPage'));
　　SECTION.forEach (disp, TOP);
　　break;
　
　case '#NewPage' :
　　NO = DATA.length;
　case '#EditPage' :
　　TEXT.value = DATA[NO] || '';
　　SECTION.forEach (disp, EDIT);
　　break;

　case '#ViewPage' :
　　CONTENT.innerHTML = DATA[NO];
　　SECTION.forEach (disp, VIEW);
　　break;

　case '#Save' :
　　DATA[NO] = TEXT.value;
　　localStorage.setItem ('TextData',JSON.stringify (DATA));
　　alert ('Save OK!');
　　break;
　　
　default :
　　return false;
　}
　
　return true;
}

function listener (event) {
　var e = event.target;
　if ('href' in e)
　　if (hashCheck (e.getAttribute ('href')))
　　　event.preventDefault();
}

var DATA = JSON.parse (localStorage.getItem ('TextData')) || [];
var LIST = document.querySelector ('#List');
var TEXT = document.querySelector ('#Text');
var CONTENT = document.querySelector ('#Content');
var TOP = document.querySelector ('#TopPage');
var EDIT = document.querySelector ('#EditPage');
var VIEW = document.querySelector ('#ViewPage');
var SECTION = [ TOP, EDIT, VIEW ];
var NO;

hashCheck (location.hash);
document.addEventListener ('click', listener, false);
</script>

</body>
</html>

この回答への補足

ご回答ありがとうございます！
現在Monacaでこのアプリを作っていましてやはりスマホで手軽に閲覧、編集ができるということは必須だと思います
私のコードの場合だとどこにどういった命令を入れると編集できますか？
使っていただくとお分かりになると思いますが編集するときはメモを追加するときにテキストを書く画面にしたいです

補足日時：2014/05/16 07:13

通報する