feature #505 - it is now possible to add link from bagged article (TODO: redev it to ajax action). Some enhancements to "save a link" popup div

themes/baggy/_head.twig

@@ -8,6 +8,7 @@
         <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>

themes/baggy/_menu.twig

@@ -4,9 +4,10 @@
                 <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' %}

themes/baggy/_pocheit-form.twig

@@ -1,7 +1,8 @@
 <div id="bagit-form" class="messages info">
-
+    <form method="get" action="index.php" target="_blank">
-    <form method="get" action="index.php">
+        <h2><a href="javascript: void(null);" id="bagit-form-close">X</a>
-        <h2>{% trans "Save a link" %}</h2>
+        {% 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>

themes/baggy/css/main.css

@@ -534,32 +534,78 @@ footer a {
   display: none;
 }
 
+/* ==========================================================================
+  2.1 = "save a link" popup div related styles
+  ========================================================================== */
+
 #bagit-form {
-  background: rgba(0,0,0,0.8);
+  background: rgba(0,0,0,0.5);
-  position: fixed;
+  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%;
+  top: 0;
-  left: 50%;
+  left: 0;
   z-index: 20;
   border: 10px solid #000;
-  width: 600px;
+  width: 400px;
-  height: 300px;
+  height: 200px;
-  margin: -150px 0 0 -300px;
+  /* 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
@@ -920,4 +966,8 @@ blockquote {
   #display-mode {
     display: none;
   }
+
+  #bagit-form {
+    left: 0;
+  }
 }

themes/baggy/js/init.js

@@ -48,11 +48,30 @@ $.fn.ready(function() {
   }
 
   /* ==========================================================================
-     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;
   });
 
   /* ==========================================================================
@@ -60,19 +79,27 @@ $.fn.ready(function() {
     ========================================================================== */
 
   $(window).keydown(function(e){
-    if ( e.target.tagName.toLowerCase() !== 'input' ) {
+    if ( ( e.target.tagName.toLowerCase() !== 'input' && e.keyCode == 83 ) || e.keyCode == 27 ) {
-      switch (e.keyCode) {
+      toggleSaveLinkForm();
-        // s letter
-        case 83:
-          $bagitForm.toggle();
       return false;
-        break;
-        case 27:
-          $bagitForm.hide();
-        break;
     }
-    }
+  });
-  })
+
+  /* ==========================================================================
+  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;
+  });
+
+
 
 
 });