WordPress.org

Plugin Directory

Changeset 623664


Ignore:
Timestamp:
11/11/12 11:45:11 (17 months ago)
Author:
eskapism
Message:

new hover system seems to work

Location:
cms-tree-page-view/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • cms-tree-page-view/trunk/functions.php

    r623490 r623664  
    418418            <div style="clear: both;"></div> 
    419419 
     420            <!-- template forpopup with actions --> 
    420421            <div class="cms_tpv_page_actions"> 
    421                 <p> 
    422                     <a href="#" title='<?php _e("Edit page", "cms-tree-page-view")?>' class='cms_tpv_action_edit'><?php _e("Edit", "cms-tree-page-view")?></a> |  
     422 
     423                <!-- cms_tpv_page_actions_page_id --> 
     424                <h4 class="cms_tpv_page_actions_headline"></h4> 
     425 
     426                <p class="cms_tpv_action_edit_and_view"> 
     427                    <a href="#" title='<?php _e("Edit page", "cms-tree-page-view")?>' class='cms_tpv_action_edit'><?php _e("Edit", "cms-tree-page-view")?></a> 
    423428                    <a href="#" title='<?php _e("View page", "cms-tree-page-view")?>' class='cms_tpv_action_view'><?php _e("View", "cms-tree-page-view")?></a> 
    424429                </p> 
     
    429434                    // if post type is hierarchical we can add pages inside 
    430435                    if (cms_tpv_is_post_type_hierarchical($post_type_object)) { 
    431                         ?> | <a href="#" title='<?php _e("Add new page inside", "cms-tree-page-view")?>' class='cms_tpv_action_add_page_inside'><?php _e("Inside", "cms-tree-page-view")?></a><?php 
     436                        ?><a href="#" title='<?php _e("Add new page inside", "cms-tree-page-view")?>' class='cms_tpv_action_add_page_inside'><?php _e("Inside", "cms-tree-page-view")?></a><?php 
    432437                    } 
    433438                    // if post status = draft then we can not add pages inside because wordpress currently can not keep its parent if we edit the page 
     
    755760                    "modified_author": "<?php echo $post_author ?>", 
    756761                    "columns": <?php echo $str_columns ?>, 
    757                     "user_can_edit_page": "<?php echo (int) $user_can_edit_page ?>" 
     762                    "user_can_edit_page": "<?php echo (int) $user_can_edit_page ?>", 
     763                    "post_title": "<?php echo $title ?>" 
    758764                } 
    759765                <?php 
  • cms-tree-page-view/trunk/readme.txt

    r623490 r623664  
    5353* Greek 
    5454* Danish 
     55* Lithuanian 
     56* Estonian 
    5557 
    5658#### Making the tree available for your vistors 
     
    364366 
    365367 
    366 == Still on WordPress 2? == 
    367 If you are using WordPress 2.x you can try this old version instead: 
    368 http://downloads.wordpress.org/plugin/cms-tree-page-view.0.4.9.zip 
    369  
  • cms-tree-page-view/trunk/scripts/cms_tree_page_view.js

    r623490 r623664  
    44jQuery(function($) { 
    55     
     6    // Globals, don't "var" them! :) 
    67    cms_tpv_tree = $("div.cms_tpv_container"); 
    78    div_actions = $("div.cms_tpv_page_actions"); 
     
    9798        }); 
    9899         
    99         /** 
    100          * When tree is loaded: start hoverindenting stuff 
    101          */ 
    102         function cms_tpv_tree_loaded(event, data) { 
    103             //console.log(event); 
    104             //console.log(data); 
    105             var $target = $(event.target); 
    106             var $lis = $target.find("li a"); 
    107             var $hoverIntentWrap = $target.find("div.cmstpv-hoverIntent-wrap"); 
    108  
    109             $hoverIntentWrap.hoverIntent({     
    110                 over: cms_tpv_mouseover, 
    111                 out: cms_tpv_mouseout, 
    112                 timeout: 500 
    113             }); 
    114  
    115             function cms_tpv_mouseover() { 
    116                 var $this = $(this); 
    117                 var $li = $this.closest("li"); 
    118                 //$this.css("background-color", "yellow"); 
    119                 console.log("mouseover"); 
    120                 cms_tpv_mouseover_li($li.get(0)); 
    121             } 
    122  
    123             function cms_tpv_mouseout() { 
    124                 var $this = $(this); 
    125                 var $li = $this.closest("li"); 
    126                 //$this.css("background-color", "transparent"); 
    127                 console.log("mouseout"); 
    128                 cms_tpv_mouseout_li($li.get(0)); 
    129             } 
    130  
    131         } 
    132  
    133100        $elm.bind("loaded.jstree", cms_tpv_tree_loaded); 
    134          
    135101        $elm.jstree(treeOptionsTmp); 
    136102 
     
    138104 
    139105}); // end ondomready 
     106 
     107 
     108/** 
     109 * When tree is loaded: start hoverindenting stuff 
     110 * @todo: this is fireded several times, why not only once 
     111 */ 
     112function cms_tpv_tree_loaded(event, data) { 
     113 
     114    // console.log("loaded"); 
     115 
     116    var $target = jQuery(event.target); 
     117    var $lis = $target.find("li a"); 
     118    var $hoverIntentWrap = $target.find("div.cmstpv-hoverIntent-wrap"); 
     119 
     120    // Bind hoverIntent 
     121    $hoverIntentWrap.hoverIntent({     
     122        over: cms_tpv_mouseover, 
     123        out: cms_tpv_mouseout, 
     124        timeout: 500, // default 0, 500 is good 
     125        sensitivity: 4 // default 7 
     126    }); 
     127 
     128    function cms_tpv_mouseover(e) { 
     129        var $this = jQuery(this); 
     130        var $li = $this.closest("li"); 
     131        cms_tpv_mouseover_li(e, $li.get(0)); 
     132    } 
     133 
     134    function cms_tpv_mouseout(e) { 
     135        var $this = jQuery(this); 
     136        var $li = $this.closest("li"); 
     137        cms_tpv_mouseout_li(e, $li.get(0)); 
     138    } 
     139 
     140} 
    140141 
    141142 
     
    143144// elm must be within .cms_tpv_wrapper to work 
    144145function cms_tpv_get_post_type(elm) { 
    145     return jQuery(elm).closest(".cms_tpv_wrapper").find("[name=cms_tpv_meta_post_type]").val(); 
     146    return jQuery(elm).closest("div.cms_tpv_wrapper").find("[name=cms_tpv_meta_post_type]").val(); 
    146147} 
    147148// get selected lang 
    148149function cms_tpv_get_wpml_selected_lang(elm) { 
    149     return jQuery(elm).closest(".cms_tpv_wrapper").find("[name=cms_tpv_meta_wpml_language]").val(); 
     150    return jQuery(elm).closest("div.cms_tpv_wrapper").find("[name=cms_tpv_meta_wpml_language]").val(); 
    150151} 
    151152 
    152153function cms_tpv_get_page_actions_div(elm) { 
    153     return jQuery(elm).closest(".cms_tpv_wrapper").find(".cms_tpv_page_actions"); 
     154    return jQuery(elm).closest("div.cms_tpv_wrapper").find("div.cms_tpv_page_actions"); 
    154155} 
    155156function cms_tpv_get_wrapper(elm) { 
    156     var $wrapper = jQuery(elm).closest(".cms_tpv_wrapper"); 
     157    var $wrapper = jQuery(elm).closest("div.cms_tpv_wrapper"); 
    157158    return $wrapper; 
    158159} 
     
    261262 
    262263// fired when mouse is over li 
    263 function cms_tpv_mouseover_li(li) { 
    264  
    265     //console.log("show actions div"); 
    266     $li = jQuery(li); 
     264function cms_tpv_mouseover_li(e, li) { 
     265 
     266    var $li = jQuery(li); 
    267267 
    268268    var div_actions_for_post_type = cms_tpv_get_page_actions_div(li); 
     269    var $cms_tpv_container = $li.closest("div.cms_tpv_container"); 
    269270 
    270271    if (cms_tpv_is_dragging() == false) { 
     
    277278        } else { 
    278279 
     280            // Remove classes on all elements 
     281            $cms_tpv_container.find("li.has-visible-actions").removeClass("has-visible-actions"); 
     282            $cms_tpv_container.find("a.hover").removeClass("hover"); 
     283 
     284            // Add classes to only our new 
     285            $li.addClass("has-visible-actions"); 
     286            $cms_tpv_container.addClass("has-visible-actions"); 
    279287            $li.find("a:first").addClass("hover"); 
    280288             
     
    295303             
    296304            div_actions_for_post_type.find(".cms_tpv_page_actions_columns").html( unescape($li.data("columns")) ); 
     305 
     306            // add post title as headline 
     307            div_actions_for_post_type.find(".cms_tpv_page_actions_headline").html( $li.data("post_title") ); 
    297308             
    298309            // position and show action div 
     
    306317            $overIntentWrap.append(div_actions_for_post_type); 
    307318             
    308             left_pos = width+28; 
    309             top_pos = -8; 
    310             div_actions_for_post_type.css("left", left_pos); 
    311             div_actions_for_post_type.css("top", top_pos); 
     319            var new_offset = div_actions_for_post_type.offset(); 
     320            var new_offset_left = e.pageX + 35; 
     321            // check that new left offset is not to close to the left of the a 
     322            // i.e. the mouse be x px more than the a for the experience to be optimal IMHO 
     323            var diff = e.pageX - $a.offset().left; 
     324            if (diff < 25) new_offset_left = new_offset_left + 25; 
     325 
     326            new_offset.left = new_offset_left; 
     327            new_offset.top = $a.offset().top - 30; 
     328            div_actions_for_post_type.offset(new_offset); 
    312329             
    313330            // check if user is allowed to edit page 
     
    329346} 
    330347 
     348// When mouse leaves the whole cms tree page view-area/div 
     349jQuery(document).on("mouseleave", "div.cms_tpv_container", function(e) { 
     350    // hide actions div after moving mouse out of a page and not moving it on again for...a while 
     351     
     352    //var div_actions_for_post_type = cms_tpv_get_page_actions_div(li); 
     353    //var $cms_tpv_container = $li.closest("div.cms_tpv_container"); 
     354    // console.log("mouse outside container"); 
     355    var $container = jQuery(this); 
     356    jQuery.data(this, "cmstpv_do_hide_after_timeout", true); 
     357    var t = this; 
     358 
     359    setTimeout(function() { 
     360        //(function() { 
     361             
     362            // check if container has data value that still tells us to hide 
     363            // this value is reseted when we enter the div again 
     364            //$cms_tpv_container 
     365            //console.log("timeout passed; hide?"); 
     366            //console.log( jQuery.data(t, "cmstpv_do_hide_after_timeout") ); 
     367            if (jQuery.data(t, "cmstpv_do_hide_after_timeout")) { 
     368                $container.find("li.has-visible-actions").removeClass("has-visible-actions"); 
     369                $container.find("a.hover").removeClass("hover"); 
     370                $container.find("div.cms_tpv_page_actions").removeClass("cms_tpv_page_actions_visible"); 
     371            } 
     372 
     373        //})(); 
     374    }, 1000); 
     375 
     376}); 
     377 
     378// When mouse enter the whole cms tree page view-area/div 
     379jQuery(document).on("mouseenter", "div.cms_tpv_container", function(e) { 
     380 
     381    // console.log("mouse inside container, reset hide data"); 
     382    var $container = jQuery(this); 
     383    jQuery.data(this, "cmstpv_do_hide_after_timeout", false); 
     384 
     385}); 
     386 
     387 
    331388// fired when mouse leaves li 
    332 function cms_tpv_mouseout_li(li) { 
     389function cms_tpv_mouseout_li(e, li) { 
     390 
     391    var $li = jQuery(li); 
     392    var $cms_tpv_container = $li.closest("div.cms_tpv_container"); 
     393 
    333394    /* 
    334     when / how to hide? 
     395    var div_actions_for_post_type = cms_tpv_get_page_actions_div(li); 
     396    var $cms_tpv_container = $li.closest("div.cms_tpv_container"); 
     397    var is_visible = div_actions_for_post_type.is(":visible"); 
    335398    */ 
    336     $li = jQuery(li); 
     399 
     400    // Remove classes if we are not viewing any 
     401    // This function can get called also when a new li has been hoverIndent:ed 
     402    /* 
    337403    $li.find("a:first").removeClass("hover"); 
     404    $li.removeClass("has-visible-actions"); 
     405    if (!is_visible) { 
     406        $cms_tpv_container.removeClass("has-visible-actions"); 
     407    } 
     408    */ 
    338409    //div_actions.hide(); 
    339410} 
     
    577648         
    578649    } 
     650 
     651    // Hide actions if open 
     652    var $cms_tpv_container = $wrapper.find("div.cms_tpv_container"); 
     653    $cms_tpv_container.find("li.has-visible-actions").removeClass("has-visible-actions"); 
     654    $cms_tpv_container.find("a.hover").removeClass("hover"); 
     655    $cms_tpv_container.find("div.cms_tpv_page_actions").removeClass("cms_tpv_page_actions_visible"); 
     656    jQuery("div.cms_tpv_page_actions_visible").removeClass("cms_tpv_page_actions_visible"); 
    579657     
    580658    var treeOptionsTmp = jQuery.extend(true, {}, treeOptions); 
    581659    treeOptionsTmp.json_data.ajax.url = ajaxurl + CMS_TPV_AJAXURL + view + "&post_type=" + cms_tpv_get_post_type(elm) + "&lang=" + cms_tpv_get_wpml_selected_lang(elm); 
     660 
     661    $wrapper.find(".cms_tpv_container").bind("loaded.jstree", cms_tpv_tree_loaded); 
    582662    $wrapper.find(".cms_tpv_container").jstree(treeOptionsTmp); 
    583 } 
     663 
     664    /* 
     665    __calback loaded jquery.jstree.js:238 
     666    __calback reopen jquery.jstree.js:238 
     667    __calback reload_nodes 
     668    */ 
     669 
     670} 
  • cms-tree-page-view/trunk/styles/styles.css

    r623490 r623664  
    55} 
    66*/ 
     7 
     8@import url("http://s0.wordpress.com/i/noticons/noticons.css"); 
    79 
    810 
     
    5254    clear: both; 
    5355} 
    54  
    55 /* 
    56 span.cms_tpv_action_edit, 
    57 li span.cms_tpv_action_view, 
    58 li span.cms_tpv_action_add_page_after, 
    59 li span.cms_tpv_action_add_page_inside 
    60 { 
    61     display: none; 
    62     text-decoration: underline; 
    63     border: 0; 
    64     -moz-border-radius: 0; 
    65     -webkit-border-radius: 0; 
    66     border-radius: 0; 
    67     padding: 0 0 0 .5ex; 
    68  
    69 } 
    70 li span.cms_tpv_action_add_page { 
    71     display: none; 
    72     border: 0; 
    73     padding: 0 0 0 .5em; 
    74     color: #666; 
    75 } 
    76 */ 
    7756 
    7857.cms-tree-view-search 
     
    249228 
    250229.cms_tpv_page_actions { 
    251     transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; 
     230    /*transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out;*/ 
    252231    width: auto; 
    253     min-width: 125px; 
     232    min-width: 175px; 
     233    width: 175px; 
    254234    height: auto; 
    255235    background-color: white; 
     
    258238    white-space: normal; 
    259239    z-index: 100; 
    260     padding: 7px; 
    261     /*display: none;*/ 
     240    padding: 10px 10px 0 10px; 
    262241    visibility: hidden; 
    263     -moz-box-shadow:    2px 2px 8px #ddd; 
    264     -webkit-box-shadow: 2px 2px 8px #ddd; 
    265     box-shadow:         2px 2px 8px #ddd; 
    266     border: 1px solid #bbb; 
     242    /* 
     243    jetpack style: 
     244    -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
     245    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
     246    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/ 
     247    /* admin bar style */ 
     248    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 
     249    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 
     250    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 
     251    border: 1px solid #DFDFDF; 
    267252    opacity: 0; 
     253} 
     254 
     255.cms_tpv_page_actions:before { 
     256    color: white; 
     257    position: absolute; 
     258    left: -16px; 
     259    top: 32px; 
     260    content: '\25C0'; /* left arrow */ 
     261    display: inline-block; 
     262    -webkit-font-smoothing: antialiased; 
     263    font: normal 16px/1 'Noticons'; 
     264    vertical-align: top; 
     265    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2), -1px 0px 0 #DFDFDF; 
     266    overflow: hidden; 
    268267} 
    269268 
     
    274273} 
    275274 
     275 
     276/* 
     277div.cms_tpv_container.has-visible-actions li { 
     278    opacity: .5 
     279} 
     280 
     281div.cms_tpv_container.has-visible-actions li.has-visible-actions { 
     282    opacity: 1; 
     283} 
     284*/ 
     285li.has-visible-actions > div.cmstpv-hoverIntent-wrap:first-of-type > a:first-of-type { 
     286    /*font-weight: bold;*/ 
     287    background-color: lightyellow; 
     288} 
     289 
    276290.cms_tpv_page_actions p { 
    277     margin: 0 0 .5em 0; 
     291    margin: .5em 0 .5em 0; 
     292    line-height: 1.2; 
     293} 
     294p.cms_tpv_action_add_and_edit_page, 
     295p.cms_tpv_action_edit_and_view 
     296 { 
     297    margin-top: 0em; 
    278298} 
    279299.cms_tpv_wrapper .cms_tpv_page_actions a { 
     
    281301    background: transparent; 
    282302    text-decoration: underline; 
    283     padding: 0; 
    284303    color: #21759B; 
     304    font-weight: normal; 
     305    padding: 0 .5em 0 0; 
     306    margin-right: .2em; 
     307    border-right: 1px solid #aaa; 
     308} 
     309.cms_tpv_wrapper .cms_tpv_page_actions a:last-child { 
     310    border: none; 
    285311} 
    286312 
     
    288314 { 
    289315    color: #d54e21; 
     316    background-color: transparent; 
    290317} 
    291318 
     
    306333.cms_tpv_page_actions dl { 
    307334    margin-top: 1em; 
     335    margin-bottom: 1em; 
    308336    color: #333; 
    309337    font-size: 11px; 
     338    line-height: 1.2; 
    310339} 
    311340.cms_tpv_page_actions dl dd { 
     
    314343.cms_tpv_page_actions dl dt { 
    315344    color: #999; 
     345    margin: .5em 0 0 0; 
    316346} 
    317347 
    318348.cms_tpv_page_actions_arrow { 
     349    display: none; 
     350    /* 
    319351    width: 8px; 
    320352    height: 15px; 
     
    322354    position: absolute; 
    323355    display: block; 
    324     top: 7px; 
    325356    left: -8px; 
     357    left: 0px; 
     358    */ 
    326359} 
    327360 
     
    344377    -ms-filter: "alpha(opacity=60)"; /* IE 8 */ 
    345378} 
     379 
     380h4.cms_tpv_page_actions_headline { 
     381    margin: 0 0 0 0; 
     382} 
     383 
    346384 
    347385.bonny-plugins-inner-sidebar { 
Note: See TracChangeset for help on using the changeset viewer.