wallabag a link in wallabag now in default theme, issue #505

themes/baggy/_head.twig

@@ -11,4 +11,5 @@
         <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/saveLink.js"></script>
         <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/closeMessage.js"></script>

themes/baggy/js/init.js

@@ -1,10 +1,7 @@
 $.fn.ready(function() {
 
   var $listmode = $('#listmode'),
-      $listentries = $("#list-entries"),
+      $listentries = $("#list-entries");
-      $bagit = $('#bagit'),
-      $bagitForm = $('#bagit-form');
-      $bagitFormForm = $('#bagit-form-form');
 
   /* ==========================================================================
      Menu
@@ -48,79 +45,4 @@ $.fn.ready(function() {
     $listmode.addClass("tablemode");
   }
 
-  /* ==========================================================================
-    bag it link and close button
-    ========================================================================== */
-
-  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();
-  });
-
-
-  //send "bag it link" form request via ajax
-  $bagitFormForm.submit( function(event) {
-    $bagitFormForm.css("cursor", "wait");
-    $("#add-link-result").empty();
-
-    $.ajax({
-        type: $bagitFormForm.attr('method'),
-        url: $bagitFormForm.attr('action'),
-        data: $bagitFormForm.serialize(),
-        success: function(data) {
-          $('#add-link-result').html("Done!");
-          $('#plainurl').val('');
-          $('#plainurl').blur('');
-          $bagitFormForm.css("cursor", "auto");
-          //setTimeout( function() { toggleSaveLinkForm(); }, 1000); //close form after 1000 delay
-        },
-        error: function(data) {
-          $('#add-link-result').html("Failed!");
-          $bagitFormForm.css("cursor", "auto");
-        }
-    });
-
-    event.preventDefault();
-  });
-
-  /* ==========================================================================
-    Keyboard gestion
-    ========================================================================== */
-
-  $(window).keydown(function(e){
-    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){
-    toggleSaveLinkForm($(this).attr('href'));
-    event.preventDefault();
-  });
-
-
-
-
 });

themes/default/_head.twig

@@ -10,3 +10,4 @@
         <script src="{{ poche_url }}/themes/default/js/jquery-2.0.3.min.js"></script>
         <script src="{{ poche_url }}/themes/default/js/autoClose.js"></script>
         <script src="{{ poche_url }}/themes/default/js/closeMessage.js"></script>
+        <script src="{{ poche_url }}/themes/default/js/saveLink.js"></script>

themes/default/_menu.twig

@@ -3,7 +3,7 @@
                 <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="pocheit">{% trans "save a link" %}</a><span id="pocheit-arrow"></span></li>
+                <li><a href="javascript: void(null);" id="bagit">{% trans "save a link" %}</a><span id="bagit-arrow"></span></li>
                 <li><a href="javascript: void(null);" id="search">{% trans "search" %}</a><span id="search-arrow"></span></li>
                 <li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
                 <li><a href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>

themes/default/_pocheit-form.twig

@@ -1,22 +1,8 @@
-<div id="pocheit-form" class="messages info">
+<div id="bagit-form" class="messages info">
-    <center>
+    <a href="javascript: void(null);" id="bagit-form-close">&nbsp;</a>
-    <form method="get" action="index.php">
+    <form method="get" action="index.php" id="bagit-form-form">
       <input required placeholder="example.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
       <input type="submit" value="{% trans "save link!" %}" />
+      <div id="add-link-result"></div>
     </form>
-    </center>
 </div>
-<script type="text/javascript">
-    $(document).ready(function() {
-
-        $("#pocheit-form").hide();
-
-        $("#pocheit").click(function(){
-            $("#pocheit-form").toggle();
-            $("#pocheit").toggleClass("current");
-            $("#pocheit-arrow").toggleClass("arrow-down");
-        });
-
-
-    });
-</script>

themes/default/css/style.css

@@ -355,3 +355,50 @@ a.reading-time span {
   vertical-align: top;
 }
 
+
+/* ==========================================================================
+	"save a link" popup div related styles
+	========================================================================== */
+
+#bagit-form {
+  display: none;
+  padding-left: 30px;
+  width: 450px;
+
+}
+
+a#bagit-form-close {
+  color: #FFF;
+  display: inline-block;
+  float: right;
+  background: url("../img/messages/close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+  height: 16px;
+  margin: -14px -8px 0 0;
+  width: 16px;
+  text-decoration: none;
+}
+
+
+.add-to-wallabag-link-after {
+  background-color: #000;
+  color: #fff;
+  padding: 0 4px 1px 3px;
+  font-weight: bold;
+  font-size: 0.7em;
+  border-radius: 4px;
+}
+.add-to-wallabag-link-after:hover, .add-to-wallabag-link-after:active {
+  color: #fff;
+}
+.add-to-wallabag-link-after:visited {
+  color: #999;
+}
+
+#add-link-result {
+  display: inline;
+  padding-left: 10px;
+}
+
+.opacity03 {
+  /*opacity: 0.3;*/
+}

themes/default/js/saveLink.js

@@ -0,0 +1,101 @@
+$.fn.ready(function() {
+
+  var $bagit = $('#bagit'),
+      $bagitForm = $('#bagit-form'),
+      $bagitFormForm = $('#bagit-form-form');
+
+  /* ==========================================================================
+   bag it link and close button
+   ========================================================================== */
+
+  function toggleSaveLinkForm(url, event) {
+    $("#add-link-result").empty();
+
+    $bagit.toggleClass("active-current");
+
+    //only if bagiti link is not presented on page
+    if ( $bagit.length === 0 ) {
+      if ( event !== 'undefined' && event ) {
+        $bagitForm.css( {position:"absolute", top:event.pageY, left:event.pageX-200});
+      }
+      else {
+        $bagitForm.css( {position:"relative", top:"auto", left:"auto"});
+      }
+    }
+
+    $bagitForm.toggle();
+    $('#content').toggleClass("opacity03");
+    if (url !== 'undefined' && url) {
+      $('#plainurl').val(url);
+    }
+    $('#plainurl').focus();
+  }
+
+
+  $bagit.click(function(){
+    $bagit.toggleClass("current");
+    $("#bagit-arrow").toggleClass("arrow-down");
+    toggleSaveLinkForm();
+  });
+
+  $("#bagit-form-close").click(function(){
+    $bagit.removeClass("current");
+    $("#bagit-arrow").removeClass("arrow-down");
+    toggleSaveLinkForm();
+  });
+
+
+  //send "bag it link" form request via ajax
+  $bagitFormForm.submit( function(event) {
+    $("body").css("cursor", "wait");
+    $("#add-link-result").empty();
+
+    $.ajax({
+      type: $bagitFormForm.attr('method'),
+      url: $bagitFormForm.attr('action'),
+      data: $bagitFormForm.serialize(),
+      success: function(data) {
+        $('#add-link-result').html("Done!");
+        $('#plainurl').val('');
+        $('#plainurl').blur('');
+        $("body").css("cursor", "auto");
+        //setTimeout( function() { toggleSaveLinkForm(); }, 1000); //close form after 1000 delay
+      },
+      error: function(data) {
+        $('#add-link-result').html("Failed!");
+        $("body").css("cursor", "auto");
+      }
+    });
+
+    event.preventDefault();
+  });
+
+  /* ==========================================================================
+   Keyboard gestion
+   ========================================================================== */
+
+  $(window).keydown(function(e){
+    if ( ( e.target.tagName.toLowerCase() !== 'input' && e.keyCode == 83 ) || e.keyCode == 27 ) {
+      $bagit.removeClass("current");
+      $("#bagit-arrow").removeClass("arrow-down");
+      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){
+    toggleSaveLinkForm($(this).attr('href'), event);
+    event.preventDefault();
+  });
+
+});
+
+

themes/default/view.twig

@@ -1,6 +1,7 @@
 {% extends "layout.twig" %}
 {% block title %}{{ entry.title|raw }} ({{ entry.url | e | getDomain }}){% endblock %}
 {% block content %}
+        {% include '_pocheit-form.twig' %}
         <div id="article_toolbar">
             <ul>
                 <li><a href="./" title="{% trans "Return home" %}" class="tool back"><span>{% trans "Return home" %}</span></a></li>
@@ -55,3 +56,4 @@
         });
         </script>
 {% endblock %}
+