<link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/messages.css" media="all">
<link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/print.css" media="print">
<script src="{{ poche_url }}/themes/{{theme}}/js/jquery-2.0.3.min.js"></script>
+ <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/autoClose.js"></script>
<script src="{{ poche_url }}/themes/{{theme}}/js/jquery.cookie.js"></script>
<script src="{{ poche_url }}/themes/{{theme}}/js/init.js"></script>
<script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/closeMessage.js"></script>
<li><a href="./?view=fav" {% if view == 'fav' %}class="current"{% endif %}>{% trans "favorites" %}</a></li>
<li><a href="./?view=archive" {% if view == 'archive' %}class="current"{% endif %}>{% trans "archive" %}</a></li>
<li><a href="./?view=tags" {% if view == 'tags' %}class="current"{% endif %}>{% trans "tags" %}</a></li>
- <li><a href="javascript: void(null);" id="bagit">{% trans "save a link" %}</a></li>
+ <li style="position: relative;"><a href="javascript: void(null);" id="bagit">{% trans "save a link" %}</a>
+ {% include '_pocheit-form.twig' %}
+ </li>
<li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
<li><a class="icon icon-power" href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>
</ul>
- {% include '_pocheit-form.twig' %}
<div id="bagit-form" class="messages info">
-
- <form method="get" action="index.php">
- <h2>{% trans "Save a link" %}</h2>
+ <form method="get" action="index.php" target="_blank">
+ <h2><a href="javascript: void(null);" id="bagit-form-close">X</a>
+ {% trans "Save a link" %}</h2>
+ <input type="hidden" name="autoclose" value="1" />
<input required placeholder="example.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
<input type="submit" value="{% trans "save link!" %}" />
</form>
display: none;
}
+/* ==========================================================================
+ 2.1 = "save a link" popup div related styles
+ ========================================================================== */
+
#bagit-form {
- background: rgba(0,0,0,0.8);
- position: fixed;
+ background: rgba(0,0,0,0.5);
+ position: absolute;
top: 0;
left: 10em;
z-index: 20;
height: 100%;
width: 100%;
margin: 0;
+ margin-top: -30%;
padding: 2em;
display: none;
+ border-left: 1px #EEE solid;
}
#bagit-form form {
background: #FFF;
position: absolute;
- top: 50%;
- left: 50%;
+ top: 0;
+ left: 0;
z-index: 20;
border: 10px solid #000;
- width: 600px;
- height: 300px;
- margin: -150px 0 0 -300px;
+ width: 400px;
+ height: 200px;
+ /* margin: -150px 0 0 -300px; */
padding: 2em;
}
+a#bagit-form-close {
+ background: #000;
+ color: #FFF;
+ padding: 0.2em 0.5em;
+ text-decoration: none;
+ display: inline-block;
+ float: right;
+ font-size: 0.6em;
+}
+a#bagit-form-close:hover {
+ background: #999;
+ color: #000;
+}
+
+.active-current {
+ background-color: #999;
+}
+
+.active-current:after {
+ content: "";
+ width: 0;
+ height: 0;
+ position: absolute;
+ border-style: solid;
+ border-width: 10px;
+ border-color: transparent #EEE transparent transparent;
+ right: 0;
+ top: 50%;
+ margin-top: -10px;
+}
+
+.opacity03 {
+ opacity: 0.3;
+}
+
+.add-to-wallabag-link-after {
+ background-color: #000;
+ color: #fff;
+ padding: 0 3px 2px 3px;
+}
/* ==========================================================================
3 = Pictos
#display-mode {
display: none;
}
+
+ #bagit-form {
+ left: 0;
+ }
}
}
/* ==========================================================================
- bag it link
- ========================================================================== */
+ bag it link and close button
+ ========================================================================== */
- $bagit.click(function(){
+ function toggleSaveLinkForm(url) {
+ $bagit.toggleClass("active-current");
$bagitForm.toggle();
+ $('#content').toggleClass("opacity03");
+ if (url !== 'undefined' && url) {
+ $('#plainurl').val(url);
+ }
+ $('#plainurl').focus();
+ }
+
+ $bagit.click(function(){
+ toggleSaveLinkForm();
+ });
+
+ $("#bagit-form-close").click(function(){
+ toggleSaveLinkForm();
+ });
+
+ $('#bagit-form form').submit(function(){
+ toggleSaveLinkForm();
+ return true;
});
/* ==========================================================================
- Keyboard gestion
- ========================================================================== */
+ Keyboard gestion
+ ========================================================================== */
$(window).keydown(function(e){
- if ( e.target.tagName.toLowerCase() !== 'input' ) {
- switch (e.keyCode) {
- // s letter
- case 83:
- $bagitForm.toggle();
- return false;
- break;
- case 27:
- $bagitForm.hide();
- break;
- }
+ if ( ( e.target.tagName.toLowerCase() !== 'input' && e.keyCode == 83 ) || e.keyCode == 27 ) {
+ toggleSaveLinkForm();
+ return false;
}
- })
+ });
+
+ /* ==========================================================================
+ Process all links inside an article
+ ========================================================================== */
+
+ $("article a[href^='http']").after(function() {
+ return " <a href=\"" + $(this).attr('href') + "\" class=\"add-to-wallabag-link-after\" alt=\"add to wallabag\" title=\"add to wallabag\">w</a> ";
+ });
+
+ $(".add-to-wallabag-link-after").click(function(event){
+ event.preventDefault();
+ toggleSaveLinkForm($(this).attr('href'));
+ return false;
+ });
+
+
});