mirror of https://github.com/nextcloud/bookmarks
Make bookmarklet work
This commit is contained in:
Marcel Klehr
parent
20af32a944
commit
521665a44d
|
|
@ -57,8 +57,7 @@ class WebViewController extends Controller {
|
|||
* @NoCSRFRequired
|
||||
*/
|
||||
public function index() {
|
||||
$bookmarkleturl = $this->urlgenerator->getAbsoluteURL('index.php/apps/bookmarks/bookmarklet');
|
||||
$params = array('user' => $this->userId, 'bookmarkleturl' => $bookmarkleturl);
|
||||
$params = array('user' => $this->userId);
|
||||
|
||||
$policy = new ContentSecurityPolicy();
|
||||
$policy->addAllowedFrameDomain("'self'");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
#bookmarklet_form {
|
||||
padding: .2cm;
|
||||
}
|
||||
#bookmarklet_form #add_form_loading {
|
||||
margin: .5cm;
|
||||
float: right;
|
||||
visibility: hidden;
|
||||
}
|
||||
#bookmarklet_form .addBm {
|
||||
position: relative;
|
||||
}
|
||||
#bookmarklet_form h1 {
|
||||
clear: both;
|
||||
margin: .5cm 0;
|
||||
font-size: .8cm;
|
||||
}
|
||||
#bookmarklet_form .bookmark-exists {
|
||||
font-weight: bold;
|
||||
border: 1px #ebebeb solid;
|
||||
border-radius: 5px;
|
||||
margin: .5cm 0;
|
||||
padding: .2cm;
|
||||
}
|
||||
#bookmarklet_form input,
|
||||
#bookmarklet_form textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -493,6 +493,17 @@ button span,
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#app-navigation .settings h3 {
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.settings .button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.settings .import-form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import Backbone from 'backbone';
|
||||
import Tags from '../models/Tags';
|
||||
import BookmarkletView from '../views/Bookmarklet';
|
||||
|
||||
const Marionette = Backbone.Marionette;
|
||||
|
||||
export default Marionette.Application.extend({
|
||||
region: '#bookmarklet_form',
|
||||
onBeforeStart: function() {
|
||||
var that = this;
|
||||
this.tags = new Tags;
|
||||
this.tags.fetch({
|
||||
data: {count: true},
|
||||
});
|
||||
},
|
||||
onStart: function() {
|
||||
this.showView(new BookmarkletView({app: this}));
|
||||
},
|
||||
});
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
import Backbone from 'backbone';
|
||||
import Bookmarks from './models/Bookmarks';
|
||||
import Tag from './models/Tag';
|
||||
import Tags from './models/Tags';
|
||||
import Router from './Router';
|
||||
import AppView from './views/App';
|
||||
import Bookmarks from '../models/Bookmarks';
|
||||
import Tag from '../models/Tag';
|
||||
import Tags from '../models/Tags';
|
||||
import Router from './MainRouter';
|
||||
import AppView from '../views/App';
|
||||
|
||||
const Marionette = Backbone.Marionette;
|
||||
|
||||
export default Marionette.Application.extend({
|
||||
region: '#content',
|
||||
page: 1,
|
||||
onBeforeStart: function() {
|
||||
var that = this;
|
||||
this.bookmarks = new Bookmarks;
|
||||
|
|
@ -1,73 +1,13 @@
|
|||
var ajaxCallCount = 0;
|
||||
import _ from 'underscore';
|
||||
import Backbone from 'backbone';
|
||||
import Marionette from 'backbone.marionette';
|
||||
import select2 from 'select2';
|
||||
import App from './apps/Bookmarklet';
|
||||
import fixBackboneSync from './utils/FixBackboneSync';
|
||||
|
||||
function increaseAjaxCallCount() {
|
||||
ajaxCallCount++;
|
||||
if (ajaxCallCount - 1 === 0) {
|
||||
updateLoadingAnimation();
|
||||
}
|
||||
}
|
||||
// init
|
||||
|
||||
function decreaseAjaxCallCount() {
|
||||
if (ajaxCallCount > 0) {
|
||||
ajaxCallCount--;
|
||||
updateLoadingAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
function updateLoadingAnimation() {
|
||||
if (ajaxCallCount === 0) {
|
||||
$('#add_form_loading').css('visibility', 'hidden');
|
||||
} else {
|
||||
$('#add_form_loading').css('visibility', 'visible');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.submit').click(function () {
|
||||
increaseAjaxCallCount();
|
||||
|
||||
var endpoint = 'bookmark';
|
||||
var method = 'POST';
|
||||
var id = '';
|
||||
if($('#bookmarkID').length > 0) {
|
||||
endpoint += '/'+ $('#bookmarkID').val();
|
||||
method = 'PUT';
|
||||
id = '&record_id=' + $('#bookmarkID').val();
|
||||
}
|
||||
|
||||
var tags = '';
|
||||
$('.tagit-choice .tagit-label').each(function() {
|
||||
tags += '&item[tags][]='+$(this).text();
|
||||
});
|
||||
var dataString = 'url=' + $('input#url').val() + '&description=' +
|
||||
$('textarea#description').val() + '&title=' + $('input#title').val() + tags + id;
|
||||
$.ajax({
|
||||
type: method,
|
||||
url: endpoint,
|
||||
data: dataString,
|
||||
complete: function () {
|
||||
decreaseAjaxCallCount();
|
||||
},
|
||||
success: function (data) {
|
||||
if (data.status === 'success') {
|
||||
OC.dialogs.message('Bookmark added.', 'Success', undefined, [], undefined, true);
|
||||
_.delay(function() {
|
||||
window.close();
|
||||
}, 1e3);
|
||||
} else {
|
||||
OC.dialogs.alert(t('bookmarks', 'Some Error happened.'),
|
||||
t('bookmarks', 'Error'), null, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
$.get('tag', function (data) {
|
||||
$('.tags').tagit({
|
||||
allowSpaces: true,
|
||||
availableTags: data,
|
||||
placeholderText: t('bookmark', 'Tags')
|
||||
});
|
||||
});
|
||||
var app = new App();
|
||||
$(function() {
|
||||
app.start();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import _ from 'underscore';
|
||||
import Backbone from 'backbone';
|
||||
import Marionette from 'backbone.marionette';
|
||||
import select2 from 'select2';
|
||||
import Tag from './models/Tag';
|
||||
import Tags from './models/Tags';
|
||||
import App from './apps/Main';
|
||||
import fixBackboneSync from './utils/FixBackboneSync';
|
||||
|
||||
// init
|
||||
|
||||
var app = new App();
|
||||
$(function() {
|
||||
app.start();
|
||||
});
|
||||
|
|
@ -2,7 +2,11 @@
|
|||
<button class="settings-button"><%- t('bookmarks', 'Settings') %></button>
|
||||
</div>
|
||||
<div id="app-settings-content">
|
||||
<form class="import-form" action="bookmark/import" method="post" target="upload_iframe" enctype="multipart/form-data" encoding="multipart/form-data">
|
||||
<h3><%- t('bookmarks', 'Bookmarklet') %></h3>
|
||||
<p><%- t('bookmarks', 'Drag this to your browser bookmarks and click it, when you want to bookmark a webpage quickly:') %></p>
|
||||
<a class="button bookmarklet" href=""><%- t('bookmarks', 'Add to {instanceName} ', {instanceName: oc_defaults.name}) %></a>
|
||||
<h3><%- t('bookmarks', 'Import & Export') %></h3>
|
||||
<form class="import-form" action="bookmark/import" method="post" target="upload_iframe" enctype="multipart/form-data" encoding="multipart/form-data">
|
||||
<input type="file" class="import" name="bm_import" size="5" />
|
||||
<input type="hidden" name="requesttoken" value="<%- oc_requesttoken %>" />
|
||||
<button class="import-facade"><span class="icon-upload"></span> <%- t('bookmarks', 'Import') %></button>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import _ from 'underscore';
|
||||
import Backbone from 'backbone';
|
||||
import Marionette from 'backbone.marionette';
|
||||
import select2 from 'select2';
|
||||
import Tag from './models/Tag';
|
||||
import Tags from './models/Tags';
|
||||
import App from './Application';
|
||||
|
||||
var _sync = Backbone.sync;
|
||||
Backbone.sync = function(method, model, options) {
|
||||
|
|
@ -18,10 +12,3 @@ Backbone.sync = function(method, model, options) {
|
|||
}
|
||||
_sync(method, model, _.extend({}, options, overrideOptions));
|
||||
};
|
||||
|
||||
// init
|
||||
|
||||
var app = new App();
|
||||
$(function() {
|
||||
app.start();
|
||||
});
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import _ from 'underscore';
|
||||
import Backbone from 'backbone';
|
||||
import Bookmark from '../models/Bookmark';
|
||||
import Tags from '../models/Tags';
|
||||
import TagsSelectionView from './TagsSelection';
|
||||
|
||||
const Marionette = Backbone.Marionette;
|
||||
const Radio = Backbone.Radio;
|
||||
|
||||
export default Marionette.View.extend({
|
||||
template: false,
|
||||
el: '#bookmarklet_form',
|
||||
regions: {
|
||||
'tags': {
|
||||
el: '#tags',
|
||||
replaceElement: true
|
||||
},
|
||||
},
|
||||
events: {
|
||||
'click .submit': 'submit'
|
||||
},
|
||||
initialize: function(options) {
|
||||
this.app = options.app;
|
||||
|
||||
$(window.document).click(function(e) {
|
||||
Radio.channel('documentClicked').trigger('click', e);
|
||||
});
|
||||
|
||||
this.app.tags.once('reset sync add remove', () => {
|
||||
this.selected = new Tags(
|
||||
this.$('#tags li')
|
||||
.map((e) => $(e).text())
|
||||
.map((tagName) => this.app.tags.findWhere({name: tagName}))
|
||||
);
|
||||
this.showChildView('tags', new TagsSelectionView({app: this.app, selected: this.selected}));
|
||||
});
|
||||
},
|
||||
submit: function(e) {
|
||||
e.preventDefault();
|
||||
this.$('#add_form_loading').css('visibility', 'visible');
|
||||
var bm = new Bookmark({
|
||||
title: this.$('.title').val(),
|
||||
url: this.$('.url_input').val(),
|
||||
description: this.$('.desc').val(),
|
||||
tags: this.selected.pluck('name')
|
||||
});
|
||||
bm.once('sync', () => setTimeout(() => window.close(), 1e3));
|
||||
bm.save({
|
||||
wait: true,
|
||||
error: () => OC.dialogs.alert(t('bookmarks', 'An error occurred while trying to save the bookmark.'),
|
||||
t('bookmarks', 'Error'), null, true)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -11,6 +11,7 @@ export default Marionette.View.extend({
|
|||
template: _.template(templateString),
|
||||
ui: {
|
||||
'content': '#app-settings-content',
|
||||
'bookmarklet': '.bookmarklet',
|
||||
'import': '.import',
|
||||
'form': '.import-form',
|
||||
'iframe': '.upload',
|
||||
|
|
@ -18,15 +19,24 @@ export default Marionette.View.extend({
|
|||
},
|
||||
events: {
|
||||
'click .settings-button': 'open',
|
||||
'click @ui.bookmarklet': 'bookmarkletClick',
|
||||
'click .import-facade': 'importTrigger',
|
||||
'change @ui.import': 'importSubmit',
|
||||
'load @ui.iframe': 'importResult',
|
||||
'click .export': 'exportTrigger'
|
||||
},
|
||||
onRender: function() {
|
||||
const bookmarkletUrl = window.location.origin + oc_webroot + '/index.php/apps/bookmarks/bookmarklet';
|
||||
const bookmarkletSrc = `javascript:(function(){var a=window,b=document,c=encodeURIComponent,e=c(document.title),d=a.open('${bookmarkletUrl}?output=popup&url='+c(b.location)+'&title='+e,'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=400px,width=550px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300);})();`;
|
||||
this.getUI('bookmarklet').prop('href', bookmarkletSrc);
|
||||
},
|
||||
open: function(e) {
|
||||
e.preventDefault();
|
||||
this.getUI('content').slideToggle();
|
||||
},
|
||||
bookmarkletClick: function(e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
importTrigger: function(e) {
|
||||
e.preventDefault();
|
||||
this.getUI('import').click();
|
||||
|
|
|
|||
|
|
@ -1,64 +1,54 @@
|
|||
<?php
|
||||
OCP\Util::addscript('bookmarks', '3rdparty/tag-it');
|
||||
OCP\Util::addscript('bookmarks', 'bookmarklet');
|
||||
OCP\Util::addStyle('bookmarks', 'bookmarks');
|
||||
OCP\Util::addStyle('bookmarks', '3rdparty/jquery.tagit');
|
||||
OCP\Util::addscript('bookmarks', 'dist/bookmarklet.bundle');
|
||||
OCP\Util::addStyle('bookmarks', 'bookmarklet');
|
||||
style('bookmarks', 'select2');
|
||||
|
||||
$bookmarkExists = $_['bookmarkExists'];
|
||||
?>
|
||||
<div id="bookmarklet_form">
|
||||
<form class="addBm" action="">
|
||||
<script type="text/javascript" src="tag"></script>
|
||||
<div id="add_form_loading" style=""><span class="icon-loading"></span></div>
|
||||
<h1><?php p($l->t('Add a bookmark')); ?></h1>
|
||||
|
||||
<h1 style="display: block; float: left"><?php p($l->t('Add a bookmark')); ?></h1>
|
||||
<span style="display: inline; float: right"><div id="add_form_loading" style="margin: 3px;"><img src="<?php print_unescaped(image_path("bookmarks", "loading.gif")); ?>"> </div></span>
|
||||
|
||||
<div style="color: red; clear: both; visibility: <?php
|
||||
if ($bookmarkExists === false) {
|
||||
print_unescaped('hidden');
|
||||
}
|
||||
?>">
|
||||
<strong>
|
||||
<?php p($l->t('This URL is already bookmarked! Overwrite?')); ?>
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<fieldset class="bm_desc">
|
||||
<ul>
|
||||
<li>
|
||||
<?php if($bookmarkExists !== false) { ?>
|
||||
<div class="bookmark-exists" style="display: <?php
|
||||
if ($bookmarkExists === false) {
|
||||
print_unescaped('none');
|
||||
}
|
||||
?>">
|
||||
<?php p($l->t('This URL is already bookmarked! Overwrite?')); ?>
|
||||
</div>
|
||||
<ul class="addBm">
|
||||
<li>
|
||||
<?php if($bookmarkExists !== false) { ?>
|
||||
<input id="bookmarkID" type="hidden" class="hidden" value="<?php p($bookmarkExists); ?>" />
|
||||
<?php } ?>
|
||||
<input id="title" type="text" name="title" class="title" value="<?php p($_['title']); ?>"
|
||||
placeholder="<?php p($l->t('The title of the page')); ?>" />
|
||||
</li>
|
||||
<?php } ?>
|
||||
<input id="title" type="text" name="title" class="title" value="<?php p($_['title']); ?>"
|
||||
placeholder="<?php p($l->t('The title of the page')); ?>" />
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input id="url" type="text" name="url" class="url_input" value="<?php p($_['url']); ?>"
|
||||
placeholder="<?php p($l->t('The address of the page')); ?>" />
|
||||
</li>
|
||||
<li>
|
||||
<input id="url" type="text" name="url" class="url_input" value="<?php p($_['url']); ?>"
|
||||
placeholder="<?php p($l->t('The address of the page')); ?>" />
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<ul id="tags" class="tags" >
|
||||
<?php foreach ($_['tags'] as $tag): ?>
|
||||
<li><?php p($tag); ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul id="tags" class="tags" >
|
||||
<?php foreach ($_['tags'] as $tag): ?>
|
||||
<li><?php p($tag); ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<textarea id="description" name="description" class="desc"
|
||||
placeholder="<?php p($l->t('Description of the page')); ?>"><?php p($_['description']); ?></textarea>
|
||||
</li>
|
||||
<li>
|
||||
<textarea id="description" name="description" class="desc"
|
||||
placeholder="<?php p($l->t('Description of the page')); ?>"><?php p($_['description']); ?></textarea>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="submit" class="submit" value="<?php p($l->t("Save")); ?>" />
|
||||
<input type="hidden" class="record_id" value="" name="record_id" />
|
||||
<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</fieldset>
|
||||
<li>
|
||||
<input type="submit" class="submit" value="<?php p($l->t("Save")); ?>" />
|
||||
<input type="hidden" class="record_id" value="" name="record_id" />
|
||||
<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,6 @@
|
|||
<?php
|
||||
script('bookmarks', 'dist/bundle');
|
||||
script('bookmarks', 'dist/main.bundle');
|
||||
style('bookmarks', 'bookmarks');
|
||||
|
||||
style('bookmarks', 'select2');
|
||||
/**
|
||||
* Copyright (c) 2011 Marvin Thomas Rabe <mrabe@marvinrabe.de>
|
||||
* Copyright (c) 2011 Arthur Schiwon <blizzz@arthur-schiwon.de>
|
||||
* This file is licensed under the Affero General Public License version 3 or
|
||||
* later.
|
||||
* See the COPYING-README file.
|
||||
*/
|
||||
$bookmarkleturl = $_['bookmarkleturl'];
|
||||
$bookmarkletscript = bookmarklet($bookmarkleturl);
|
||||
|
||||
function bookmarklet($bookmarkleturl) {
|
||||
$l = \OC::$server->getL10N('bookmarks');
|
||||
$defaults = \OC::$server->getThemingDefaults();
|
||||
$blet = "javascript:(function(){var a=window,b=document,c=encodeURIComponent,e=c(document.title),d=a.open('";
|
||||
$blet .= $bookmarkleturl;
|
||||
$blet .= "?output=popup&url='+c(b.location)+'&title='+e,'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=400px,width=550px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300);})();";
|
||||
$help_msg = $l->t('Drag this to your browser bookmarks and click it, when you want to bookmark a webpage quickly:');
|
||||
$output = '<div id="bookmarklet_hint" class="bkm_hint">' . $help_msg . '</div><a class="button bookmarklet" href="' . $blet . '">' . $l->t('Add to ' . \OCP\Util::sanitizeHTML($defaults->getName())) . '</a>';
|
||||
return $output;
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
var path = require('path')
|
||||
module.exports = {
|
||||
entry: './js/index.js',
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'js/dist')
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: [ {
|
||||
loader: 'html-loader',
|
||||
options: {
|
||||
minimize: true,
|
||||
exportAsEs6Default: true
|
||||
}
|
||||
}],
|
||||
}
|
||||
]
|
||||
}
|
||||
entry: {
|
||||
main: './js/main.js',
|
||||
bookmarklet: './js/bookmarklet.js'
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, 'js/dist')
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: [ {
|
||||
loader: 'html-loader',
|
||||
options: {
|
||||
minimize: true,
|
||||
exportAsEs6Default: true
|
||||
}
|
||||
}],
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue