Changeset 31534 for trunk/src/wp-admin/tools.php

Timestamp:

02/25/2015 01:49:26 AM (9 years ago)

Author:

azaozz

Message:

PressThis v2, first run. Props michael-arestad, stephdau, marcelomazza, DrewAPicture, iseulde, afercia, kraftbj, rachelbaker, AramZS, dd32. See #31373.

File:

• trunk/src/wp-admin/tools.php (modified) (1 diff)

trunk/src/wp-admin/tools.php

@@ -39 +39 @@
 <div class="tool-box">
     <h3 class="title"><?php _e('Press This') ?></h3>
-    <p><?php _e('Press This is a bookmarklet: a little app that runs in your browser and lets you grab bits of the web.');?></p>
+    <div class="postbox press-this-install">
+        <p><?php _e( 'Press This is a little app that lets you grab bits of the web and create new posts with ease.' );?></p>
+        <p><?php _e( 'Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.' ); ?></p>
+    </div>
 
-    <p><?php _e('Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.'); ?></p>
-    <p class="description"><?php _e('Drag-and-drop the following link to your bookmarks bar or right click it and add it to your favorites for a posting shortcut.') ?></p>
-    <p class="pressthis"><a onclick="return false;" oncontextmenu="if(window.navigator.userAgent.indexOf('WebKit')!=-1||window.navigator.userAgent.indexOf('MSIE')!=-1){jQuery('.pressthis-code').show().find('textarea').focus().select();return false;}" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e('Press This') ?></span></a></p>
-    <div class="pressthis-code" style="display:none;">
-    <p class="description"><?php _e('If your bookmarks toolbar is hidden: copy the code below, open your Bookmarks manager, create new bookmark, type Press This into the name field and paste the code into the URL field.') ?></p>
-    <p><textarea rows="5" cols="120" readonly="readonly"><?php echo htmlspecialchars( get_shortcut_link() ); ?></textarea></p>
+    <form>
+    <div class="postbox press-this-install">
+        <h3><?php _e( 'Install Press This' ); ?></h3>
+        <h4><?php _e( 'Bookmarklet' ); ?></h4>
+        <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you\'re on a page you want to share, simply "press" it.' ); ?></p>
+
+        <p class="pressthis">
+            <a class="" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ) ?></span></a>
+            <button type="button" class="button button-secondary js-show-pressthis-code-wrap" aria-expanded="false" aria-controls="pressthis-code-wrap">
+                <span class="dashicons dashicons-clipboard"></span>
+                <span class="screen-reader-text"><?php _e( 'Copy Press This Bookmarklet' ) ?></span>
+            </button>
+        </p>
+
+        <div class="hidden js-pressthis-code-wrap">
+            <p id="pressthis-code-desc">
+                <?php _e( 'If you can\'t drag it to your bookmarks, copy the following code and create new bookmark. Paste the code into the new bookmark\'s URL field.' ) ?>
+            </p>
+            <p>
+                <textarea class="js-pressthis-code" rows="5" cols="120" readonly="readonly" aria-labelledby="pressthis-code-desc"><?php echo htmlspecialchars( get_shortcut_link() ); ?></textarea>
+            </p>
+        </div>
+
+        <h4><?php _e( 'Direct link (best for mobile)' ); ?></h4>
+        <p><?php _e( 'Follow the link to open Press This. Then add it to your device\'s bookmarks or home screen.' ); ?></p>
+
+        <p>
+            <a class="button button-secondary" href="<?php echo htmlspecialchars( admin_url( 'press-this.php' ) ); ?>"><?php _e( 'Open Press This' ) ?></a>
+        </p>
+        <script>
+            jQuery( document ).ready( function( $ ) {
+                var $showPressThisWrap = $( '.js-show-pressthis-code-wrap' );
+                var $pressthisCode = $( '.js-pressthis-code' );
+
+                $showPressThisWrap.on( 'click', function( event ) {
+                    var $this = $( this );
+
+                    $this.parent().next( '.js-pressthis-code-wrap' ).slideToggle( 200 );
+                    $this.attr( 'aria-expanded', $this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+                });
+
+                // Select Press This code when focusing (tabbing) or clicking the textarea.
+                $pressthisCode.on( 'click focus', function() {
+                    var self = this;
+                    setTimeout( function() { self.select(); }, 50 );
+                });
+
+            });
+        </script>
     </div>
+    </form>
 </div>
 <?php