WordPress.org
Get WordPress

Plugin Directory

Changeset 1089493


Ignore:
Timestamp:
02/13/2015 11:08:21 PM (11 years ago)
Author:
ramsaylanier
Message:

Updates user interface

Location:
verbatim/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • verbatim/trunk/css/verbatim.css

    r1042882 r1089493  
    44
    55.verbatim-button-container{
    6     position: absolute;
    7     width: 90px;
    8     height: 40px;
    9     background-color: rgb(83, 83, 83);
    10     top: -50px;
    11     z-index: 1000;
     6    position: fixed;
     7    width: 100%;
     8    background-color: $dark-blue;
     9    bottom: 0px;
     10    padding: 5px;
     11    z-index: 10000000;
     12    text-align: center;
     13    transition: all 300ms ease-out;
     14    -webkit-transition: all 300ms ease-out;
     15    -moz-transition: all 300ms ease-out;
     16    transform: translateY(100px);
     17    -webkit-transform: translateY(100px);
     18    -moz-transform: translateY(100px);
    1219}
    1320
    14 .verbatim-button-container::after{
    15     content: '';
    16     position: absolute;
    17     width: 8px;
    18     height: 8px;
    19     background-color: rgb(83, 83, 83);
    20     left: 50%;
    21     margin-left: -4px;
    22     bottom: -4px;
    23     transform: rotate(45deg);
    24 }
     21.verbatim-button-container.on-page{
     22    transform: translateY(0px);
     23    -webkit-transform: translateY(0px);
     24    -moz-transform: translateY(0px);
     25}
    2526
    2627.verbatim-icon{
    27     width: 50%;
    2828    height: 100%;
    2929    padding: 5px;
    … …  
    3535}
    3636
    37 .verbatim-icon:first-of-type{
    38     border-right: 1px solid white;
     37.verbatim-wrapper{
     38    max-width: 400px;
     39    position: relative;
     40    margin: 0 auto;
    3941}
    4042
    4143.verbatim-text-area{
    42     position: absolute;
    43     background-color: rgb(83, 83, 83);
    44     border: none;
    45     border-right: 10px solid rgb(83, 83, 83);
     44    position: relative;
     45    background-color: $dark-blue;
     46    border: 2px solid white;
    4647    color: white;
    47     top: -40px;
    48     width: 140px;
    49     height: 35px;
    50     left: 50%;
    51     margin-left:-75px;
    52     padding: 10px;
     48    max-width: 140px;
     49    height: 40px;
     50    padding: 10px
    5351}
     52
     53.verbatim-info{
     54    color: white;
     55    font-size: .8rem;
     56    margin: 0;
     57}
     58
     59.verbatim-twitter-link{
     60    height: 40px;
     61    display: inline-block;
     62    margin-left: 1rem;
     63}

  • verbatim/trunk/js/verbatim.js

    r1086671 r1089493  
    1 !function($){
    2     var verbatimLogo ='<svg version="1.1" id="verbatimLogo" class="verbatim-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><path fill="#FFFFFF" d="M9,10.1c-4,0.8-6.9,3.1-7.3,6.2c-0.2,1.8,0,3.7,1.1,5.2c1.5,2,3.2,3.1,6.2,2.8c1.5-0.1,1.7-1.4,1.1-1.6c-0.5-0.2-3.1-1.7-2.8-6c0.1-1.7,0.4-3.8,2.6-4.8C10.8,11.3,10,9.9,9,10.1z"/><path fill="#FFFFFF" d="M39.7,11.1c-1.5,9-6.9,16.3-10.8,23.2c-0.1,0.1-0.3,0.1-0.3-0.1c0.7-6.5,1.8-18,1.8-19.3s0.2-5.8-7.1-5.8s-11,3.2-11.8,7.3c-0.4,1.8,0.1,3.7,1.3,5.2c1.6,1.9,4.1,2.9,7.1,2.5c1.5-0.2,2-0.9,2-1.6c0-0.6-0.5-1.3-1.8-1.5c-0.5,0-2-0.2-2.1-3.1c0-1.3,0.3-2.2,1-2.9c0.7-0.7,1.4-1.2,2.9-1.1c1.5,0.1,1.7,1.4,1.7,2.1c0,0.6-1.3,21.6-0.3,26.2c0,0.1,0.1,0.1,0.1,0.1h7.8c0,0,0.1,0,0.1-0.1c3.6-5.1,15.2-25.4,16.7-31c0-0.1,0-0.2-0.1-0.2h-7.9C39.7,11,39.7,11.1,39.7,11.1z"/></svg>'
     1!function($){   
    32    var twitterLogo ='<svg version="1.1" id="twitterLogo" class="verbatim-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> <path fill="#FFFFFF" d="M45,13.2c-1.4,0.6-2.9,1-4.5,1.2c1.6-1,2.8-2.5,3.4-4.3C42.4,11,40.8,11.7,39,12c-1.4-1.5-3.4-2.5-5.7-2.5c-4.3,0-7.8,3.5-7.8,7.8c0,0.6,0.1,1.2,0.2,1.8c-6.5-0.3-12.2-3.4-16-8.1c-0.7,1.1-1.1,2.5-1.1,3.9c0,2.7,1.4,5.1,3.5,6.5c-1.3,0-2.5-0.4-3.5-1c0,0,0,0.1,0,0.1c0,3.8,2.7,6.9,6.2,7.6c-0.7,0.2-1.3,0.3-2.1,0.3c-0.5,0-1,0-1.5-0.1c1,3.1,3.9,5.3,7.3,5.4c-2.7,2.1-6,3.3-9.7,3.3c-0.6,0-1.2,0-1.9-0.1c3.4,2.2,7.5,3.5,11.9,3.5c14.3,0,22.1-11.9,22.1-22.1c0-0.3,0-0.7,0-1C42.6,16.2,43.9,14.8,45,13.2z"/></svg>';
    4     var downY, upY;
    53
    64    $.fn.verbatim = function(options){
    … …  
    119        var settings = wordpressOptions;
    1210        var selectedText = '';
    13         var withTwitter = false,
    14             twitterScriptAdded = false;
     11        var twitterScriptAdded = false;
    1512        var longURL, textURL;
    1613        var isImage = false;
    … …  
    115112
    116113            //reset
    117             $('.' + settings.buttonClass).remove();
    118             $('.verbatim-text-area').remove();
    119             $('.' + settings.selectedClass).contents().unwrap();
    120 
    121             //if target is an image
    122             if (settings.allowImages && $(target).is('img') && !$(target).hasClass(settings.selectedClass)){
    123 
     114            $('.' + settings.buttonClass).removeClass('on-page');
     115            setTimeout(function(){
     116                $('.' + settings.buttonClass).remove();
     117            }, 300);
     118           
     119            if (!$(target).hasClass(settings.selectedClass)){
    124120                var buttonContainer = document.createElement("div");
    125121                buttonContainer.setAttribute("class", settings.buttonClass);
    126                 buttonContainer.innerHTML = verbatimLogo + twitterLogo;
    127 
    128                 //get images position inside of it's parent element
    129                 var targetPos= $(target).position();
    130 
    131                 //append buttons to DOM before image target
    132                 $(target).before(buttonContainer);
    133 
    134                 //set button container to image targets top left corner;
    135                 $(buttonContainer).css({
    136                     "top": targetPos.top,
    137                     "left": targetPos.left
    138                 })
    139 
    140                 selectedText = "image: " + $(target).attr('src');
    141             }
    142 
    143             //if target is a text node
    144             else if (!$(target).hasClass(settings.selectedClass)){
    145                 var buttonContainer = document.createElement("div");
    146                 buttonContainer.setAttribute("class", settings.buttonClass);
    147                 buttonContainer.innerHTML = verbatimLogo + twitterLogo;
     122                buttonContainer.innerHTML = '<p class="verbatim-info">Share this selection:</p>'
     123
     124                //if target is an image
     125                if (settings.allowImages && $(target).is('img') && !$(target).hasClass(settings.selectedClass)){
     126                        console.log('hi');
     127                        selectedText = "image: " + $(target).attr('src');
     128                        appendButton();
     129                } else {
    148130               
    149                 var sel = getSelected();
    150                 console.log(sel);
    151 
    152                 if(!sel.isCollapsed){
    153 
    154                     document.body.spellcheck = false;
    155 
    156                     if (isFirefox){
    157                         document.body.contentEditable = "true";
    158 
    159                         document.execCommand("HiliteColor", false, settings.highlightColor);
    160                         var anchorNode = sel.focusNode.parentNode;
    161                         appendButton();
    162 
    163                         document.body.contentEditable = "false";
    164 
    165                     } else {
    166                         document.designMode = "on";
    167                         document.execCommand("hiliteColor", false, settings.highlightColor);
    168                         var anchorNode = sel.anchorNode.parentNode;
    169                         appendButton();
    170 
    171                         document.designMode = "off";
    172                     }
    173                    
    174                     selectedText = sel.toString();
    175                 }
     131                    var sel = getSelected();
     132
     133                    if(!sel.isCollapsed){
     134                        selectedText = sel.toString();
     135                        appendButton();
     136                    }
     137                }
    176138            }
    177139
    178140            function appendButton(){
    179141                var target;
    180                 $(anchorNode).append(buttonContainer);
    181                 $('span[style*="'+settings.highlightColor+'"]').addClass(settings.selectedClass);
    182 
    183                 if ((upY - downY) > 15)
    184                     target = 0
    185                 else
    186                     target = ($(anchorNode).outerWidth() / 2) - $('.' + settings.buttonClass).width() / 2;
    187        
    188                 $('.' + settings.buttonClass).css({
    189                     "left": target
    190                 })
     142                setTimeout(function(){
     143                    $('body').append(buttonContainer);
     144                    copyURL();
     145                }, 310);
     146
     147                setTimeout(function(){
     148                    $(buttonContainer).addClass('on-page');
     149                }, 320);
    191150            }
    192151        }
    193152
    194153        var copyURL = function(){
    195             $('.verbatim-text-area').remove();
     154            // $('.verbatim-text-area').remove();
    196155
    197156            textURL = selectedText;
    … …  
    209168                        if (response.status_code == 200){
    210169                            longURL = response.data.url;
    211                             generateLink();
     170                        } else {
     171                            longURL = window.location.origin + window.location.pathname + '#' + encodeURIComponent(textURL);
    212172                        }
     173
     174                        generateLink();
    213175                    }
    214176                );
    … …  
    220182
    221183        var generateLink = function(){
    222             if (withTwitter){
    223                 if (textURL.length > 112){
    224                     textURL = textURL.substring(0, 112) + '...';
     184            //build textarea to contain shortlink
     185            var textArea = document.createElement("textarea");
     186
     187            textArea.setAttribute("class", "verbatim-text-area");
     188            textArea.setAttribute("wrap", "off");
     189
     190            $('.' + settings.buttonClass).append(textArea);
     191
     192            $('.verbatim-text-area').text(longURL);
     193
     194
     195            //build twitter link
     196            if (textURL.length > 112){
     197                textURL = textURL.substring(0, 112) + '...';
     198            }
     199
     200            textURL = "\"" + textURL + "\"";
     201            var twitterLink = document.createElement('a');
     202            twitterLink.setAttribute("class", 'verbatim-twitter-link');
     203            twitterLink.href='https://twitter.com/intent/tweet?url=' + encodeURIComponent(longURL) + '&text=' + encodeURIComponent(textURL);
     204            $('.' + settings.buttonClass).append(twitterLink);
     205            $(twitterLink).append(twitterLogo);
     206        }
     207
     208        if(! isIE()){
     209
     210            $(settings.searchContainer).on('mouseup', function(event){
     211
     212                if ($(event.target).hasClass('verbatim-text-area')){
     213                    $(event.target).select();
     214                    return false;
     215                } else {
     216                    insertCopyButton(event.target);
    225217                }
    226 
    227                 textURL = "\"" + textURL + "\"";
    228                 var twitterLink = document.createElement('a');
    229                 twitterLink.href='https://twitter.com/intent/tweet?url=' + encodeURIComponent(longURL) + '&text=' + encodeURIComponent(textURL);
    230                 document.body.appendChild(twitterLink);
    231                 twitterLink.click();
    232             } else {
    233                 var textArea = document.createElement("textArea");
    234 
    235                 textArea.setAttribute("class", "verbatim-text-area");
    236                 textArea.setAttribute("wrap", "off");
    237 
    238                 $('.' + settings.buttonClass).append(textArea);
    239 
    240                 $('.verbatim-text-area').val(longURL);
    241                 textArea.select();
    242             }
    243         }
    244 
    245         if(! isIE()){
    246 
    247             $(settings.searchContainer).on('mousedown', function(event){   
    248                 downY = event.offsetY;
    249             });
    250 
    251             $(settings.searchContainer).on('mouseup', function(event){
    252                 upY = event.offsetY;
    253 
    254                 if ($(event.target).is('#verbatimLogo')){
    255                     withTwitter = false;
    256                     copyURL();
    257                 } else if ($(event.target).is('#twitterLogo')){
    258                     withTwitter = true;
    259                     copyURL();
    260                 } else if ($(event.target).hasClass('verbatim-text-area')){
    261                     return false;
    262                 } else
    263                     insertCopyButton(event.target);
    264 
    265218            });
    266219

  • verbatim/trunk/readme.txt

    r1085729 r1089493  
    4242= 1.3 =
    4343* Several bug fixes
     44= 1.4 =
     45* Updated user interface

  • verbatim/trunk/verbatim.php

    r1085729 r1089493  
    44 * Plugin URI: http://verbat.im
    55 * Description: Allows deep linking directly to post content
    6  * Version: 1.3
     6 * Version: 1.4
    77 * Author: Ramsay Lanier and Maxim Leyzerovich of nclud Labs
    88 * Author URI: http://nclud.com
    … …  
    1212define( 'VRBTM_URL',     plugin_dir_url( __FILE__ )  );
    1313define( 'VRBTM_PATH',    plugin_dir_path( __FILE__ ) );
    14 define( 'VRBTM_VERSION', '1.3'                     );
     14define( 'VRBTM_VERSION', '1.4'                     );
    1515
    1616if (!is_admin()){
Note: See TracChangeset for help on using the changeset viewer.