mirror of
https://github.com/owncloud/bookmarks.git
synced 2024-12-01 05:24:11 +01:00
First step^of removing the popup. Adding js templating and inline editing of bookmark
This commit is contained in:
Brice Maron
parent
adc705234f
commit
18372c5220
@ -38,7 +38,6 @@ if(isset($_POST['url'])) {
|
||||
}
|
||||
else {
|
||||
$bm = OC_Bookmarks_Bookmarks::addBookmark($_POST['url'], $_POST['title'], $tags, $_POST['desc'], $pub);
|
||||
continue;
|
||||
}
|
||||
OCP\JSON::success(array('id'=>$bm));
|
||||
exit();
|
||||
|
||||
@ -50,6 +50,9 @@
|
||||
|
||||
}
|
||||
|
||||
#add_url {
|
||||
width: 25em;
|
||||
}
|
||||
.bookmarks_addBml {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -170,7 +173,7 @@
|
||||
|
||||
.addBm ul.tagit { background:white; }
|
||||
|
||||
.addBm input.ui-autocomplete-input, #tag_filter input.ui-autocomplete-input{
|
||||
.addBm input.ui-autocomplete-input, #tag_filter input.ui-autocomplete-input, .bookmark_form_tags input.ui-autocomplete-input{
|
||||
box-shadow:none;
|
||||
|
||||
}
|
||||
@ -288,7 +291,7 @@ li:hover em { display : none; }
|
||||
overflow:hidden;
|
||||
display:block;
|
||||
}
|
||||
.bookmark_date {
|
||||
.bookmark_date, .bookmark_submit {
|
||||
font-size:small;
|
||||
position: absolute;
|
||||
right: 6em;
|
||||
@ -296,6 +299,7 @@ li:hover em { display : none; }
|
||||
/* margin-top:2.5em; */
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
/*
|
||||
.bm_view_img .bookmark_single:hover .bookmark_url{
|
||||
display:block;
|
||||
@ -308,7 +312,15 @@ li:hover em { display : none; }
|
||||
.bookmark_single:hover .bookmark_url a[href]{ color:gray; }
|
||||
|
||||
.bookmark_url { display: none; }
|
||||
.bookmark_form_title input, .bookmark_form_url input, .bookmark_form_desc textarea {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bookmark_single_form .tagit{
|
||||
width: 80%;
|
||||
box-shadow: 0 1px 1px #FFFFFF, 0 1px 0 #BBBBBB inset;
|
||||
margin: 3px;
|
||||
}
|
||||
.bm_view_img .bookmark_actions {
|
||||
bottom: 0.7em;
|
||||
display: block;
|
||||
|
||||
@ -35,6 +35,7 @@ OCP\Util::addscript('bookmarks','addBm');
|
||||
|
||||
|
||||
OCP\Util::addscript('bookmarks','tag-it');
|
||||
OCP\Util::addscript('bookmarks','js_tpl');
|
||||
OCP\Util::addStyle('bookmarks', 'jquery.tagit');
|
||||
$qtags = OC_Bookmarks_Bookmarks::findTags();
|
||||
|
||||
|
||||
@ -38,7 +38,8 @@
|
||||
// Init Tagging thing
|
||||
base.$el.find('.tags').tagit({
|
||||
allowSpaces: true,
|
||||
availableTags: fullTags
|
||||
availableTags: fullTags,
|
||||
placeholderText: t('bookmark', 'Tags')
|
||||
});
|
||||
|
||||
if(base.options['record']) { //Fill the form if it's an edit
|
||||
@ -54,9 +55,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
base.$el.find('.tagit-new input').attr('placeholder',t('bookmark', 'Tags'));
|
||||
|
||||
};
|
||||
|
||||
base.init();
|
||||
|
||||
@ -228,9 +228,46 @@ function delBookmark(event) {
|
||||
function editBookmark(event) {
|
||||
var record = $(this).parent().parent();
|
||||
bookmark = record.data('record');
|
||||
createEditDialog(bookmark);
|
||||
console.log(bookmark);
|
||||
//createEditDialog(bookmark);
|
||||
html = tmpl("item_form_tmpl", bookmark);
|
||||
|
||||
record.after(html);
|
||||
record.hide();
|
||||
rec_form = record.next().find('form');
|
||||
console.log(rec_form);
|
||||
rec_form.find('.bookmark_form_tags ul').tagit({
|
||||
allowSpaces: true,
|
||||
availableTags: fullTags,
|
||||
placeholderText: t('bookmark', 'Tags')
|
||||
});
|
||||
rec_form.bind('submit',submitBookmark);
|
||||
rec_form.find('.reset').bind('click',cancelBookmark);
|
||||
}
|
||||
|
||||
function cancelBookmark(event) {
|
||||
event.preventDefault();
|
||||
rec_form = $(this).closest('form').parent();
|
||||
rec_form.prev().show();
|
||||
rec_form.remove();
|
||||
}
|
||||
function submitBookmark(event) {
|
||||
event.preventDefault();
|
||||
form_values = $(this).serialize();
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: $(this).attr('action'),
|
||||
data: form_values,
|
||||
success: function(data){
|
||||
if(data.status == 'success'){
|
||||
//@TODO : do better reaction than reloading the page
|
||||
filterTagsChanged();
|
||||
} else { // On failure
|
||||
//@TODO : show error message?
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateBookmarksList(bookmark) {
|
||||
var tags = bookmark.tags;
|
||||
var taglist = '';
|
||||
|
||||
36
js/js_tpl.js
Normal file
36
js/js_tpl.js
Normal file
@ -0,0 +1,36 @@
|
||||
|
||||
// Simple JavaScript Templating
|
||||
// John Resig - http://ejohn.org/ - MIT Licensed
|
||||
(function(){
|
||||
var cache = {};
|
||||
|
||||
this.tmpl = function tmpl(str, data){
|
||||
// Figure out if we're getting a template, or if we need to
|
||||
// load the template - and be sure to cache the result.
|
||||
var fn = !/\W/.test(str) ?
|
||||
cache[str] = cache[str] ||
|
||||
tmpl(document.getElementById(str).innerHTML) :
|
||||
|
||||
// Generate a reusable function that will serve as a template
|
||||
// generator (and which will be cached).
|
||||
new Function("obj",
|
||||
"var p=[],print=function(){p.push.apply(p,arguments);};" +
|
||||
|
||||
// Introduce the data as local variables using with(){}
|
||||
"with(obj){p.push('" +
|
||||
|
||||
// Convert the template into pure JavaScript
|
||||
str
|
||||
.replace(/[\r\t\n]/g, " ")
|
||||
.split("<%").join("\t")
|
||||
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
|
||||
.replace(/\t=(.*?)%>/g, "',$1,'")
|
||||
.split("\t").join("');")
|
||||
.split("%>").join("p.push('")
|
||||
.split("\r").join("\\'")
|
||||
+ "');}return p.join('');");
|
||||
|
||||
// Provide some basic currying to the user
|
||||
return data ? fn( data ) : fn;
|
||||
};
|
||||
})();
|
||||
@ -52,6 +52,46 @@
|
||||
var shot_provider = '<?php echo OCP\Config::getUserValue(OCP\USER::getUser(), 'bookmarks', 'shot_provider', 'http://screenshots.bookmarkly.com/thumb?url={url}');?>';
|
||||
//http://api.thumbalizr.com/?width={width}&url={url}
|
||||
</script>
|
||||
<div id="edit_dialog" style="display:none;">
|
||||
|
||||
<script type="text/html" id="edit_dialog_tmpl">
|
||||
<?php include 'addBm.php';?>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/html" id="item_tmpl">
|
||||
<div class="bookmark_single" data-id="<%= id %>">
|
||||
<p class="bookmark_actions">
|
||||
<span class="bookmark_edit">
|
||||
<img class="svg" src="<?php echo OCP\image_path("", "actions/rename.svg");?>" title="Edit">
|
||||
</span>
|
||||
<span class="bookmark_delete">
|
||||
<img class="svg" src="<?php echo OCP\image_path("", "actions/delete.svg");?>" title="Delete">
|
||||
</span>
|
||||
</p>
|
||||
<p class="bookmark_title">
|
||||
<a href="<%= encodeEntities(url) %>" target="_blank" class="bookmark_link"><%= encodeEntities(title) %></a>
|
||||
</p>
|
||||
<p class="bookmark_url"><a href="<%= encodeEntities(url) %>" target="_blank" class="bookmark_link"><%= encodeEntities(url) %></a></p>
|
||||
<p class="bookmark_date"><%= formatDate(added_date) %></p>
|
||||
<p class="bookmark_desc"><%= encodeEntities(description)%> </p>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="item_form_tmpl">
|
||||
<div class="bookmark_single_form" data-id="<%= id %>">
|
||||
<form method="post" action="<?php echo OCP\Util::linkTo('bookmarks', 'ajax/editBookmark.php');?>" >
|
||||
<input type="hidden" name="record_id" value="<%= id %>" />
|
||||
<p class="bookmark_form_title">
|
||||
<input type="text" name="title" placeholder="<?php echo $l->t('The title of the page');?>" value="<%= title %>"/>
|
||||
</p>
|
||||
<p class="bookmark_form_url"><input type="text" name="url" placeholder=""<?php echo $l->t('The address of the page');?>" value="<%= encodeEntities(url)%>"/></p>
|
||||
<div class="bookmark_form_tags"><ul>
|
||||
<% for ( var i = 0; i < tags.length; i++ ) { %>
|
||||
<li><%=tags[i]%></li>
|
||||
<% } %>
|
||||
</ul></div>
|
||||
<p class="bookmark_form_desc"><textarea name="desc" placeholder="<?php echo $l->t('Description of the page');?>"><%= description%></textarea> </p>
|
||||
<p class="bookmark_form_submit"><button class="reset" ><?php echo $l->t('Cancel');?></button><input type="submit" value="<?php echo $l->t('Save');?>"></p>
|
||||
</form>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user