WordPress.org

Plugin Directory

Changeset 1754164


Ignore:
Timestamp:
10/28/17 00:02:27 (3 months ago)
Author:
Magenta Cuda
Message:

version 1.2.3.7

Location:
nggtags-for-wp-media-library/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • nggtags-for-wp-media-library/trunk/nggml-search.js

    r1743295 r1754164  
    2121   
    2222    var galleryShowingMetaOverlay;   // the gallery currently showing the meta overlay  
     23    var template; 
    2324 
     25    function showMetaOverlay( id, element ) { 
     26        var meta           = nggml.images[ id ];                                                                    // get the corresponding meta object using the id 
     27        if ( typeof meta === 'undefined' ) { 
     28            return; 
     29        } 
     30        var $overlay          = jQuery( 'div#nggml-meta-overlay' );                                                 // this will display the meta overlay 
     31        var $container        = jQuery( element ).closest( 'div.nggml-galleries-container' ); 
     32        meta.is_fullsize_view = $container.hasClass( 'nggml-galleries-container-full-view' ); 
     33        meta.is_titles_view   = $container.hasClass( 'nggml-gallery-titles' ); 
     34        meta.is_large_view    = $container.hasClass( 'nggml-gallery-large' ); 
     35        meta.is_miro_view     = $container.hasClass( 'nggml-gallery-miro' ); 
     36        meta.img_width        = Math.round( meta.is_titles_view ?  
     37                                                $overlay.width() - 10 : 4 * $overlay.width() / 10 );                // set the image dimensions in the meta object 
     38        meta.img_size         = meta._wp_attachment_metadata.width + ' x ' + meta._wp_attachment_metadata.height; 
     39        //var html        = $overlay.find( 'script#nggml-meta-template' ).text();                                   // the text of the script is the template 
     40        //html            = html.replace( /\{\{(\w+)\}\}/g, function( m0, m1 ) {                                    // instantiate the template using the meta object 
     41        //    return meta.hasOwnProperty( m1 ) ? meta[m1] : 'null'; 
     42        //}); 
     43        if ( typeof template === 'undefined' ) { 
     44            template = _.template( $overlay.find( 'script#nggml-meta-template' ).html(), null, {                    // the text of the script is the template 
     45                evaluate:    /<#([\s\S]+?)#>/g, 
     46                interpolate: /\{\{\{([\s\S]+?)\}\}\}/g, 
     47                escape:      /\{\{([^\}]+?)\}\}(?!\})/g 
     48            } ); 
     49        } 
     50        var html = template( meta );                                                                                // instantiate the template using the meta object 
     51        $overlay.find( 'div.nggml-meta-content' ).html( html );                                                     // replace the HTML of the overlay with the instantiated template 
     52        return $overlay; 
     53    } 
     54 
     55    var touchOnly  = /Android|Silk|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 
    2456    var altGallery = { 
    2557        gallery: function() {        // the gallery constructor 
     
    2860            this.metaLocked = false; 
    2961        }, 
    30         touchOnly:          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), 
    31         topMargin:          60, 
    32         bottomMargin:       40, 
     62        touchOnly:          touchOnly, 
    3363        loading:            'data:image/png;base64,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', 
    3464        transitionInterval: 1.5, 
    3565        transition:         '', 
    36         hScrollbarHeight:   20,   // TODO: calculate this for each browser 
     66        hScrollbarHeight:   touchOnly ? 0 : 20,     // TODO: calculate these for each browser 
    3767        vScrollbarWidth:    20, 
    38         scrollContainerToTop: function( item ) {   // scroll the gallery container of item to the top of the browser viewport adjusting for top margin and admin bar if present 
    39             var top          = jQuery( item ).parents( 'div.nggml-alt-gallery-container' ).offset().top - altGallery.topMargin; 
     68        scrollContainerToTop: function( item ) {    // scroll the gallery container of item to the top of the browser viewport adjusting for top margin and admin bar if present 
     69            var $body        = jQuery( 'body' ); 
    4070            var $divAdminBar = jQuery( 'div#wpadminbar' ); 
     71            var $container   = jQuery( item ).parents( 'div.nggml-galleries-container' ); 
     72            var $navbar      = $container.find( 'div.nggml-alt-gallery-controls ul.nggml-navbar' ); 
     73            var $gallery     = $container.find( 'div.nggml-alt-gallery-container' ); 
     74            var $view        = $navbar.is( ':visible' ) ? $container: $gallery; 
     75            var top          = $view.offset().top - ( jQuery( window ).height() - $view.height() ) / 2; 
    4176            if ( $divAdminBar.length ) { 
    4277                top -= $divAdminBar.outerHeight( true ); 
    4378            } 
    44             var $body = jQuery( 'body' ); 
    4579            $body.scrollTop( top ); 
    4680            if ( $body.scrollTop() !== top ) { 
     
    380414                } 
    381415                $divGallery.append( $divAltGallery ); 
    382                 var altGalleryHeight      = $divAltGallery.height();                                           // height of the non full view alt gallery window - this is constant 
    383                 var altGalleryOuterHeight = $divAltGallery.outerHeight();                                      // height of the non full view alt gallery window - this is constant 
    384416                var $galleriesContainer   = $divAltGallery.closest( 'div.nggml-galleries-container' ); 
    385417                var $divLarge             = $divAltGallery.find( 'div.nggml-alt-gallery-large' ); 
     
    426458                        return;                                                // nothing to do since slide show already running 
    427459                    } 
    428                     var isFullView          = $galleriesContainer.hasClass( 'nggml-galleries-container-full-view' ); 
    429                     var windowHeight        = isFullView ? '93vh' : altGalleryHeight; 
    430                     var windowOuterHeight   = isFullView ? '93.1vh' : altGalleryOuterHeight 
    431                     self1.expandOp          = false; 
    432                     var selected            = this.value; 
     460                    var isFullView        = $galleriesContainer.hasClass( 'nggml-galleries-container-full-view' ); 
     461                    $divAltGallery.height( Math.floor( ( isFullView ? 93 : 85 ) * jQuery( window ).height() / 100 ) ); 
     462                    var windowHeight      = $divAltGallery.height(); 
     463                    var windowOuterHeight = $divAltGallery.outerHeight(); 
     464                    var iconsDiv          = $divAltGallery.find( 'div.nggml-alt-gallery-icons' ); 
     465                    var titlesDiv         = $divAltGallery.find( 'div.nggml-alt-gallery-titles' ); 
     466                    var $imgDiv           = iconsDiv.find( window.nggml.preserveIconAspectRatio ? 'div.nggml-alt-gallery-outer' : 'div.nggml-alt-gallery' ); 
     467                    self1.expandOp        = false; 
     468                    var selected          = this.value; 
    433469                    if ( selected !== 'search' ) { 
    434470                        // tag container and body with a classname that indicates the view type 
     
    449485                            var $divJustified = jQuery( divJustified ); 
    450486                            $divJustified.justifiedGallery({ rowHeight: nggmlMiroRowHeight, lastRow: 'nojustify', margins: 5 }).on( 'jg.complete', function() { 
     487                                $divJustified.find( 'a div.caption span.dashicons-info' ).click(function( e ) { 
     488                                    var $overlay = showMetaOverlay( jQuery(this).closest( 'a' )[0].id.substr( 11 ), this ); 
     489                                    $galleriesContainer.append( $overlay ); 
     490                                    $overlay.css( 'left', '10vw' ).show(); 
     491                                    e.stopImmediatePropagation(); 
     492                                    e.stopPropagation(); 
     493                                    e.preventDefault(); 
     494                                }); 
    451495                                $divJustified.find( 'a div.caption span.dashicons-editor-expand' ).click(function( e ) { 
    452496                                    altGallery.showFullImageInPopup( nggml.images[ jQuery( this ).closest( 'a' )[0].id.substr( 11 ) ] ); 
     
    483527                        break; 
    484528                    case 'titles': 
    485                         $divAltGallery.find( 'div.nggml-alt-gallery-icons' ).innerHeight( '100%' ); 
    486                         $divAltGallery.find( 'div.nggml-alt-gallery-titles' ).innerHeight( '100%' ); 
     529                        if ( window.matchMedia( '(orientation:landscape)' ).matches ) { 
     530                            iconsDiv.css( 'height', '100%' );                                                               // landscape mode 
     531                            titlesDiv.css( 'height', '100%' ); 
     532                        } else { 
     533                            var rows        = 3;                                                                            // portrait mode 
     534                            var width       = Math.ceil( $imgDiv.length / rows ) * $imgDiv.outerWidth() + 24;               // width required to exactly contain the rows of icons 
     535                            var bottomWidth = $divAltGallery.width(); 
     536                            if ( width < bottomWidth ) {                                                                    // the width must be at least as the window width 
     537                                width = bottomWidth; 
     538                            } 
     539                            iconsDiv.height( rows * $imgDiv.outerHeight() + altGallery.hScrollbarHeight ).width( width );   // height of the rows of icons 
     540                            titlesDiv.height( windowHeight - iconsDiv.outerHeight() - 10 ); 
     541                        } 
    487542                        $divGallery.innerHeight( windowOuterHeight ).find( '.gallery-item' ).css( 'opacity', '0.0' ); 
    488543                        break; 
    489544                    case 'large': 
    490545                        // the logic for large is complicated because the configuration changes depending on the size of the window and the aspect ratio 
    491                         var iconsDiv  = $divAltGallery.find( 'div.nggml-alt-gallery-icons' ); 
    492                         var titlesDiv = $divAltGallery.find( 'div.nggml-alt-gallery-titles' ); 
    493546                        var rows      = 1; 
    494                         if ( window.matchMedia( 'screen and (max-aspect-ratio: 7/3)' ).matches ) {                          // landscape mode 
    495                             rows = 2; 
    496                         } 
    497                         if ( window.matchMedia( 'screen and (max-aspect-ratio: 4/5)' ).matches ) {                          // portrait mode 
    498                             rows = 3; 
    499                         } 
    500                         var $imgDiv = iconsDiv.find( window.nggml.preserveIconAspectRatio ? 'div.nggml-alt-gallery-outer' : 'div.nggml-alt-gallery' ); 
     547                        var landscape = window.matchMedia( '(orientation:landscape)' ).matches; 
     548                        if ( landscape ) { 
     549                            rows = 2;                                                                                       // landscape mode 
     550                            if ( rows * $imgDiv.outerHeight() > 4 * windowHeight / 10 ) { 
     551                                rows = 1; 
     552                            } 
     553                        } else { 
     554                            rows = 1;                                                                                       // portrait mode 
     555                        } 
    501556                        if ( isFullView ) {                                                                                 // full view has icons on left side 
    502557                            var iconsDivWidth  = 2 * $imgDiv.outerWidth() + altGallery.vScrollbarWidth;                     // show 2 columns of icons 
     
    512567                            } 
    513568                            iconsDiv.height( rows * $imgDiv.outerHeight() + altGallery.hScrollbarHeight ).width( width );   // height of the rows of icons 
    514                             var topHeight = windowHeight - iconsDiv.outerHeight();                                          // height of the large image pane 
    515                             $divLarge.height( topHeight ); 
     569                            if ( landscape ) { 
     570                                var topHeight = windowHeight - iconsDiv.outerHeight();                                      // height of the large image pane 
     571                                $divLarge.height( topHeight ); 
     572                                titlesDiv.height( topHeight - 10 ); 
     573                            } else { 
     574                                $divLarge.height( 3 * bottomWidth / 4 ); 
     575                                titlesDiv.height( windowHeight - $divLarge.outerHeight() - iconsDiv.outerHeight() - 10 - 2 ); 
     576                            } 
    516577                            $divLarge.find( 'div.nggml-span' ).show();                                                      // show initial hint message 
    517578                            var dim = Math.floor( Math.min( $divLarge.width(), $divLarge.height() ) ) - 10; 
    518579                            $imgs.prop({ src: '', width: dim, height: dim }).css({ width: dim + 'px', height: dim + 'px' }); 
    519                             titlesDiv.height( topHeight - 10 ); 
    520580                        } 
    521581                        $imgs.css( 'transition', '' ); 
     
    805865                    jQuery( 'body, html' ).addClass( 'nggml-galleries-container-full-view' ); 
    806866                } 
     867                jQuery( window ).resize( function() { 
     868                    $select.change(); 
     869                }); 
    807870                $select.change(); 
    808             };   // altGallery.doGallery = function( initialView, expanded ) {      // create the gallery controls; call with this as a div.gallery HTML element 
     871            };   // altGallery.doGallery = function( initialView, expanded ) {               // create the gallery controls; call with this as a div.gallery HTML element 
    809872            $divGalleries.each(function() { 
    810873                altGallery.doGallery.call( this ); 
     
    818881                var $container=jQuery(this.parentNode.parentNode); 
    819882                if($container.hasClass("nggml-alt-gallery-large")){$container.removeClass("nggml-show-meta");} 
    820                 if ( galleryShowingMetaOverlay.slideShow ) {    // overlay is from the slideshow so click on the slide show info button to properly close it 
    821                     var $button = jQuery( galleryShowingMetaOverlay.divAltGallery ).find( 'div.nggml-alt-gallery-large div.nggml-slide-controls button.nggml-info-button' ); 
    822                     if ( ! $button.length ) { 
    823                         $button = jQuery( fixed ).find( 'div.nggml-alt-gallery-large div.nggml-slide-controls button.nggml-info-button' ); 
    824                     } 
    825                     $button.click(); 
    826                 } else {                                        // overlay from icon or titles meta button so remove the highlighting on them 
    827                     jQuery( galleryShowingMetaOverlay.divAltGallery ).find( 'div.nggml-alt-gallery-meta,span.nggml-alt-gallery-meta' ).removeClass( 'nggml-red' ); 
    828                 }   
    829                 galleryShowingMetaOverlay.metaLocked = false;   // no meta overlay is showing 
     883                if ( galleryShowingMetaOverlay ) { 
     884                    if( galleryShowingMetaOverlay.slideShow ) {                              // overlay is from the slideshow so click on the slide show info button to properly close it 
     885                        var $button = jQuery( galleryShowingMetaOverlay.divAltGallery ).find( 'div.nggml-alt-gallery-large div.nggml-slide-controls button.nggml-info-button' ); 
     886                        if ( ! $button.length ) { 
     887                            $button = jQuery( fixed ).find( 'div.nggml-alt-gallery-large div.nggml-slide-controls button.nggml-info-button' ); 
     888                        } 
     889                        $button.click(); 
     890                    } else {                                                                 // overlay from icon or titles meta button so remove the highlighting on them 
     891                        jQuery( galleryShowingMetaOverlay.divAltGallery ).find( 'div.nggml-alt-gallery-meta,span.nggml-alt-gallery-meta' ).removeClass( 'nggml-red' ); 
     892                    } 
     893                    galleryShowingMetaOverlay.metaLocked = false;                            // no meta overlay is showing 
     894                } 
    830895                e.stopImmediatePropagation(); 
    831896                e.stopPropagation(); 
     
    865930            }); 
    866931        }   // init: function() { 
    867      };  // altGallery={ 
     932    };  // altGallery={ 
    868933 
    869934    switch(nggmlTransition){ 
     
    895960        's step-end'; 
    896961         
    897     altGallery.gallery.prototype.image=function(src,href,text,id,image){ 
    898         this.src=src; 
    899         this.href=href; 
    900         this.text=text; 
    901         this.id=id; 
    902         this.image=image; 
    903         this.width=nggmlAltGalleryImageWidth; 
     962    var imgBorderWidth        = 2; 
     963    var imgFocusedBorderWidth = 7; 
     964    var windowWidth           = Math.min( jQuery( window ).width(), jQuery( window ).height() ); 
     965    if ( windowWidth < 4 * ( nggmlAltGalleryImageWidth  + 2 * imgBorderWidth + 2 * imgFocusedBorderWidth ) ) { 
     966        // adjust icon width so at least 4 icons will be shown 
     967        nggmlAltGalleryImageWidth = Math.floor( windowWidth / 4 ) - ( 2 * imgBorderWidth + 2 * imgFocusedBorderWidth ); 
     968    } 
     969         
     970    altGallery.gallery.prototype.image = function( src, href, text, id, image ) { 
     971        this.src   = src; 
     972        this.href  = href; 
     973        this.text  = text; 
     974        this.id    = id; 
     975        this.image = image; 
     976        this.width = nggmlAltGalleryImageWidth; 
    904977    }; 
    905978 
     
    10571130            jQuery( spanLarge ).hide(); 
    10581131        } 
    1059         var template; 
    1060         function showMetaOverlay( id, element ) { 
    1061             var meta           = nggml.images[ id ];                                                                    // get the corresponding meta object using the id 
    1062             if ( typeof meta === 'undefined' ) { 
     1132        function imgHoverOn() { 
     1133            if ( self.metaLocked ) { 
    10631134                return; 
    10641135            } 
    1065             var $overlay          = jQuery( 'div#nggml-meta-overlay' );                                                 // this will display the meta overlay 
    1066             var $container        = jQuery( element ).closest( 'div.nggml-galleries-container' ); 
    1067             meta.is_fullsize_view = $container.hasClass( 'nggml-galleries-container-full-view' ); 
    1068             meta.is_titles_view   = $container.hasClass( 'nggml-gallery-titles' ); 
    1069             meta.is_large_view    = $container.hasClass( 'nggml-gallery-large' ); 
    1070             meta.img_width        = Math.round( meta.is_titles_view ?  
    1071                                                     $overlay.width() - 10 : 4 * $overlay.width() / 10 );                // set the image dimensions in the meta object 
    1072             meta.img_size         = meta._wp_attachment_metadata.width + ' x ' + meta._wp_attachment_metadata.height; 
    1073             //var html        = $overlay.find( 'script#nggml-meta-template' ).text();                                   // the text of the script is the template 
    1074             //html            = html.replace( /\{\{(\w+)\}\}/g, function( m0, m1 ) {                                    // instantiate the template using the meta object 
    1075             //    return meta.hasOwnProperty( m1 ) ? meta[m1] : 'null'; 
    1076             //}); 
    1077             if ( typeof template === 'undefined' ) { 
    1078                 template = _.template( $overlay.find( 'script#nggml-meta-template' ).html(), null, {                    // the text of the script is the template 
    1079                     evaluate:    /<#([\s\S]+?)#>/g, 
    1080                     interpolate: /\{\{\{([\s\S]+?)\}\}\}/g, 
    1081                     escape:      /\{\{([^\}]+?)\}\}(?!\})/g 
    1082                 } ); 
    1083             } 
    1084             var html = template( meta );                                                                                // instantiate the template using the meta object 
    1085             $overlay.find( 'div.nggml-meta-content' ).html( html );                                                     // replace the HTML of the overlay with the instantiated template 
    1086             return $overlay; 
    1087         } 
    1088         function imgHoverOn() { 
    1089             if(self.metaLocked){return;} 
    1090             var $img=jQuery(this); 
    1091             var $galleriesContainer=$img.closest("div.nggml-galleries-container"); 
    1092             $galleriesContainer.find("div.nggml-alt-gallery-titles li.nggml-alt-gallery").css({backgroundColor:colorUnfocused}); 
    1093             $galleriesContainer.find("div.nggml-alt-gallery-icons div.nggml-alt-gallery").css({backgroundColor:colorUnfocused,borderColor:colorUnfocused}); 
    1094             var id=this.id.substr(10); 
    1095             var hasLarge=$galleriesContainer.hasClass("nggml-gallery-large"); 
    1096             if(hasLarge){handleMouseEnterForLargeSlideShow($img,id);} 
    1097             this.parentNode.style.borderColor=colorFocused; 
    1098             this.parentNode.style.backgroundColor=colorFocused; 
    1099             self.images[id].li.style.backgroundColor=colorFocused; 
    1100             id-=3; 
     1136            var $img                = jQuery( this ); 
     1137            var $galleriesContainer = $img.closest( 'div.nggml-galleries-container' ); 
     1138            $galleriesContainer.find( 'div.nggml-alt-gallery-titles li.nggml-alt-gallery' ).css( { backgroundColor: colorUnfocused } ); 
     1139            $galleriesContainer.find( 'div.nggml-alt-gallery-icons div.nggml-alt-gallery' ).css( { backgroundColor: colorUnfocused, borderColor: colorUnfocused } ); 
     1140            var id       = this.id.substr( 10 ); 
     1141            var hasLarge = $galleriesContainer.hasClass( 'nggml-gallery-large' ); 
     1142            if ( hasLarge ) { 
     1143                handleMouseEnterForLargeSlideShow( $img, id ); 
     1144            } 
     1145            this.parentNode.style.borderColor        = colorFocused; 
     1146            this.parentNode.style.backgroundColor    = colorFocused; 
     1147            self.images[id].li.style.backgroundColor = colorFocused; 
     1148            id -= 2; 
    11011149            jQuery( divTitles ).scrollTop( id > 0 ? jQuery( self.images[ id ].li ).position().top + jQuery( divTitles ).scrollTop() : 0 ); 
    1102             altGallery.scrollContainerToTop(this); 
     1150            altGallery.scrollContainerToTop( this ); 
    11031151            if ( hasLarge ) { 
    11041152                flipLarge( $img.parent() ); 
     
    11421190        } 
    11431191        var isTitlesView; 
    1144         var isGoogleChrome; 
     1192        var isGoogleChromeAndScrollBarNeeded; 
    11451193        var $divIcons; 
    11461194        function metaHoverOn() { 
     
    11641212                var left      = $parent.position().left > divide ? thisLeft - $overlay.outerWidth() : thisLeft + $parent.outerWidth(); 
    11651213                $overlay.css( 'left', left ).show(); 
    1166                 if ( isGoogleChrome = navigator.userAgent.toLowerCase().indexOf( 'chrome' ) !== -1 ) { 
     1214                if ( isGoogleChromeAndScrollBarNeeded = navigator.userAgent.toLowerCase().indexOf( 'chrome' ) !== -1 && 
     1215                    $divIcons[0].scrollHeight > $divIcons[0].clientHeight ) { 
    11671216                    $divIcons.css( { 'overflow-y': 'hidden', 'padding-right': '17px' } ); 
    11681217                } 
     
    11821231                } 
    11831232            } 
    1184             if ( isTitlesView && isGoogleChrome ) { 
     1233            if ( isTitlesView && isGoogleChromeAndScrollBarNeeded ) { 
    11851234                $divIcons.css( { 'overflow-y': 'auto', 'padding-right': '0' } ); 
    11861235            } 
    1187             isTitlesView = isGoogleChrome = $divIcons = undefined; 
     1236            isTitlesView = isGoogleChromeAndScrollBarNeeded = $divIcons = undefined; 
    11881237            // console.log("metaHoverOff()",performance.now()-t0); 
    11891238        }   // function metaHoverOff() { 
     
    12401289        function liHoverOn() { 
    12411290            // var t0=performance.now(); 
    1242             if(self.metaLocked){return;} 
    1243             var $li=jQuery(this); 
    1244             var $galleriesContainer=$li.closest("div.nggml-galleries-container"); 
    1245             $galleriesContainer.find("div.nggml-alt-gallery-titles li.nggml-alt-gallery").css({backgroundColor:colorUnfocused}); 
    1246             $galleriesContainer.find("div.nggml-alt-gallery-icons div.nggml-alt-gallery").css({backgroundColor:colorUnfocused,borderColor:colorUnfocused}); 
    1247             var id=this.id.substr(9); 
    1248             var hasLarge=$galleriesContainer.hasClass("nggml-gallery-large"); 
    1249             if(hasLarge){handleMouseEnterForLargeSlideShow($li,id);} 
    1250             var img=self.images[id].img; 
    1251             var imgParent=img.parentNode; 
    1252             var hasTitles=$galleriesContainer.hasClass("nggml-gallery-titles"); 
    1253             var isExpanded=$galleriesContainer.hasClass("nggml-galleries-container-full-view"); 
    1254             this.style.backgroundColor=colorFocused; 
    1255             var imgParentStyle=imgParent.style; 
    1256             imgParentStyle.backgroundColor=imgParentStyle.borderColor=colorFocused; 
    1257             if(hasTitles||(isExpanded&&hasLarge)){ 
    1258                 id-=4; 
     1291            if ( self.metaLocked ) { 
     1292                return; 
     1293            } 
     1294            var $li                        = jQuery( this ); 
     1295            var $galleriesContainer        = $li.closest( "div.nggml-galleries-container" ); 
     1296            $galleriesContainer.find( "div.nggml-alt-gallery-titles li.nggml-alt-gallery" ).css( { backgroundColor: colorUnfocused } ); 
     1297            $galleriesContainer.find( "div.nggml-alt-gallery-icons div.nggml-alt-gallery" ).css( { backgroundColor: colorUnfocused, borderColor: colorUnfocused } ); 
     1298            var id                         = this.id.substr( 9 ); 
     1299            var hasLarge                   = $galleriesContainer.hasClass( "nggml-gallery-large" ); 
     1300            if ( hasLarge ) { 
     1301                handleMouseEnterForLargeSlideShow( $li, id ); 
     1302            } 
     1303            var img                        = self.images[id].img; 
     1304            var imgParent                  = img.parentNode; 
     1305            var hasTitles                  = $galleriesContainer.hasClass( "nggml-gallery-titles" ); 
     1306            var isExpanded                 = $galleriesContainer.hasClass( "nggml-galleries-container-full-view" ); 
     1307            this.style.backgroundColor     = colorFocused; 
     1308            var imgParentStyle             = imgParent.style; 
     1309            imgParentStyle.backgroundColor = imgParentStyle.borderColor=colorFocused; 
     1310            // make the matching icon visible in its scrollview  
     1311            if ( hasTitles || ( isExpanded && hasLarge ) ) { 
     1312                // In the titles view the icons are scrolled vertically 
     1313                id -= 4; 
    12591314                jQuery( divIcons ).scrollTop( id > 0 ? 
    1260                     jQuery( window.nggml.preserveIconAspectRatio ? self.images[ id ].img.parentNode.parentNode : 
    1261                     self.images[ id ].img.parentNode ).position().top + jQuery( divIcons ).scrollTop() : 0 ); 
    1262             }else if(hasLarge){ 
    1263                 var leftAdjacent=jQuery(window.nggml.preserveIconAspectRatio?self.images[id>=3?id-3:0].img.parentNode.parentNode:self.images[id>=3?id-3:0].img.parentNode); 
     1315                    jQuery( window.nggml.preserveIconAspectRatio ? self.images[ id ].img.parentNode.parentNode : self.images[ id ].img.parentNode ).position().top + 
     1316                        jQuery( divIcons ).scrollTop() : 
     1317                    0 ); 
     1318            } else if ( hasLarge ) { 
     1319                // In the large view the icons are scrolled horizontally 
     1320                var offset       = window.matchMedia( 'screen and (max-aspect-ratio: 4/5)' ).matches ? 1 : 2; 
     1321                var leftAdjacent = jQuery( window.nggml.preserveIconAspectRatio ? self.images[ id>=offset ? id-offset : 0 ].img.parentNode.parentNode : 
     1322                                                                                  self.images[ id>=offset ? id-offset : 0 ].img.parentNode ); 
    12641323                // console.log('leftAdjacent[0].firstChild.src=',leftAdjacent[0].firstChild.src); 
    12651324                // console.log('leftAdjacent.position().left=',leftAdjacent.position().left); 
    12661325                // console.log('leftAdjacent[0].offsetLeft=',leftAdjacent[0].offsetLeft); 
    1267                 leftAdjacent.parent().scrollLeft(leftAdjacent[0].offsetLeft); 
    1268             } 
    1269             altGallery.scrollContainerToTop(this); 
     1326                leftAdjacent.parent().scrollLeft( leftAdjacent[0].offsetLeft ); 
     1327            } 
     1328            // Also center the gallery container in browser viewport 
     1329            altGallery.scrollContainerToTop( this ); 
    12701330            if ( hasLarge ) { 
     1331                // show the matching image in the large view 
    12711332                flipLarge( jQuery( img.parentNode ) ); 
    12721333            } 
     
    16901751            span.className    = 'dashicons dashicons-editor-expand'; 
    16911752            caption.appendChild( span ); 
     1753            if ( ! altGallery.touchOnly ) { 
     1754                span              = document.createElement( 'span' );            // icon for image meta info overlay 
     1755                span.className    = 'dashicons dashicons-info'; 
     1756                caption.appendChild( span ); 
     1757            } 
    16921758            a.appendChild( caption ); 
    16931759            div.appendChild( a ); 
  • nggtags-for-wp-media-library/trunk/nggml_search.css

    r1731344 r1754164  
    189189div.nggml-alt-gallery-titles{ 
    190190    display:block; 
    191     flex:0 0 25%; 
     191    flex:0 0 33%; 
    192192    order:2; 
    193193    /* 
     
    263263 
    264264div.nggml-galleries-container.nggml-gallery-titles div.nggml-alt-gallery-icons{ 
    265     flex:0 0 74%; 
     265    flex:0 0 66%; 
    266266    order:1; 
    267267    flex-direction:row; 
     
    317317div.nggml-galleries-container.nggml-gallery-large div.nggml-alt-gallery-large{ 
    318318    display:block; 
    319     flex:0 0 74%; 
     319    flex:0 0 66%; 
    320320    order:1; 
    321321    align-content:flex-start; 
     
    384384    opacity:0.3; 
    385385    display:none; 
     386} 
     387 
     388@media(orientation:portrait){ 
     389    div.nggml-alt-gallery-large div.nggml-slide-controls{ 
     390        height:3.0em; 
     391    } 
    386392} 
    387393 
     
    661667} 
    662668 
     669div.nggml-gallery-miro div#nggml-meta-overlay span#nggml-meta-overlay-usage{ 
     670    display:none; 
     671} 
     672 
    663673@media(min-width:1200px){ 
    664674    div#nggml-meta-overlay,body.nggml-gallery-titles div#nggml-meta-overlay{ 
     
    687697    } 
    688698 
     699    body.nggml-gallery-miro div#nggml-meta-overlay{ 
     700        position:fixed; 
     701        width:80vw; 
     702        height:84vh; 
     703        left:10vw; 
     704        top:8vh; 
     705    } 
    689706    body.nggml-galleries-container-full-view.nggml-gallery-large div#nggml-meta-overlay{ 
    690707    } 
     
    856873} 
    857874 
    858 @media (max-width:991px){ 
     875@media(max-width:991px){ 
    859876    div.nggml-alt-gallery-controls ul.nggml-navbar{ 
    860877        display:none; 
     
    906923div.nggml-galleries-container.nggml-gallery-miro div.nggml-alt-gallery-controls ul.nggml-navbar li.nggml-icons.nggml-toggle-captions{ 
    907924    display:inline-block; 
     925} 
     926 
     927div.nggml-galleries-container.nggml-gallery-miro div.nggml-justified-gallery-container a div.caption span.dashicons-info{ 
     928    float:right; 
     929} 
     930 
     931div.nggml-galleries-container.nggml-gallery-miro div.nggml-justified-gallery-container a div.caption span.dashicons-info:hover{ 
     932    cursor:pointer; 
     933    color:cyan; 
    908934} 
    909935 
     
    973999} 
    9741000 
     1001@media(max-aspect-ratio: 4/5){ 
     1002    div.nggml-alt-gallery-container{ 
     1003        flex-direction:row; 
     1004        flex-wrap:wrap; 
     1005    } 
     1006 
     1007    div.nggml-galleries-container.nggml-gallery-large div.nggml-alt-gallery-large{ 
     1008        flex:0 0 100%; 
     1009        order:2; 
     1010    } 
     1011 
     1012    div.nggml-galleries-container.nggml-gallery-large div.nggml-alt-gallery-titles{ 
     1013        flex:0 0 100%; 
     1014        order:1; 
     1015        border-bottom:2px solid black; 
     1016    } 
     1017 
     1018    div.nggml-galleries-container.nggml-gallery-large div.nggml-alt-gallery-icons{ 
     1019        flex:0 0 100%; 
     1020        order:3; 
     1021    } 
     1022 
     1023    div.nggml-galleries-container.nggml-gallery-titles div.nggml-alt-gallery-container{ 
     1024        flex-direction:row; 
     1025        flex-wrap:wrap; 
     1026    } 
     1027 
     1028    div.nggml-galleries-container.nggml-gallery-titles div.nggml-alt-gallery-large{ 
     1029        display: none; 
     1030        flex:0 0 100%; 
     1031        order:3; 
     1032    } 
     1033 
     1034    div.nggml-galleries-container.nggml-gallery-titles div.nggml-alt-gallery-titles{ 
     1035        flex:0 0 100%; 
     1036        order:1; 
     1037        border-bottom:2px solid black; 
     1038    } 
     1039 
     1040    div.nggml-galleries-container.nggml-gallery-titles div.nggml-alt-gallery-icons{ 
     1041        flex:0 0 100%; 
     1042        order:2; 
     1043    } 
     1044} 
     1045 
    9751046body.nggml-galleries-container-full-view,html.nggml-galleries-container-full-view{ 
    9761047    overflow-y:hidden; 
  • nggtags-for-wp-media-library/trunk/nggtags-for-wp-media-library-loader.php

    r1743295 r1754164  
    66 * Description:   Some features for using taxonomy tags with WordPress Media Library. 
    77 * Documentation: http://nggtagsforwpml.wordpress.com/ 
    8  * Version:       1.2.3.6.3 
     8 * Version:       1.2.3.7 
    99 * Author:        Black 68 Charger, Magenta Cuda   
    1010 * Author URI:    http://tml.magentacuda.com/ 
  • nggtags-for-wp-media-library/trunk/nggtags-meta-overlay-template.php

    r1743295 r1754164  
    1313?> 
    1414<div id="nggml-meta-overlay"> 
    15     Click the <div class="nggml-alt-gallery-meta" style="display:inline-block;"></div> icon to lock. Turn the wheel to scroll. 
     15    <span id="nggml-meta-overlay-usage">Click the <div class="nggml-alt-gallery-meta" style="display:inline-block;"></div> icon to lock. Turn the wheel to scroll.</span> 
    1616    <button class="nggml-meta-overlay-close-button" style="float:right;">X</button> 
    1717    <div class="nggml-meta-content"> 
     
    2727    <!-- "attachment_link", "taxonomy", "_wp_attached_file", "_wp_attachment_metadata", "_edit_lock",                      --> 
    2828    <!-- "_wp_attachment_image_alt", "_edit_last", "img_width", "img_size", "is_titles_view", "is_large_view",             --> 
    29     <!-- "is_fullsize_view"                                                                                                --> 
     29    <!-- "is_miro_view", "is_fullsize_view"                                                                                --> 
    3030    <script type="text/html" id="nggml-meta-template"> 
    3131<h3 style="text-align:center;margin:0.5em;">{{post_title}}</h3> 
     
    3333<img class="nggml-meta-overlay-img" src="{{attachment_url}}" width="{{img_width}}" srcset="{{srcset}}" sizes="{{img_width}}px" style="margin-bottom:20px;"> 
    3434<# } #> 
    35 <# if ( is_large_view && is_fullsize_view ) { #> 
     35<# if ( ( is_large_view && is_fullsize_view ) || is_miro_view ) { #> 
    3636<div id="nggml-meta-overlay-left-col" style="box-sizing:content-box;width:{{img_width}}px;height:100%;padding:0px 10px 0 10px;border:0;margin:0;float:left;"> 
    3737    <# if ( typeof _wp_attachment_image_alt === 'string' && _wp_attachment_image_alt ) { #> 
     
    5151<div id="nggml-meta-overlay-right-col" style="box-sizing:border-box;width:calc(100% - {{img_width+24+10}}px);border:0;padding:0 0 0 10px;margin:0;float:left;"> 
    5252<# } #> 
    53 <# if ( ! is_large_view || ! is_fullsize_view ) { #> 
     53<# if ( ( ! is_large_view || ! is_fullsize_view ) && ! is_miro_view ) { #> 
    5454    <# if ( typeof post_excerpt === 'string' && post_excerpt ) { #> 
    5555    <h6 style="text-transform:none;text-align:center;margin:0.5em;">{{post_excerpt}}</h6> 
     
    7373    </script> 
    7474</div> 
    75 <# if ( is_large_view && is_fullsize_view ) { #> 
     75<# if ( ( is_large_view && is_fullsize_view ) || is_miro_view ) { #> 
    7676</div> 
    7777<# } #> 
  • nggtags-for-wp-media-library/trunk/readme.txt

    r1743295 r1754164  
    44Requires at least: 4.6 
    55Tested up to: 4.8 
    6 Stable tag: 1.2.3.6.3 
     6Stable tag: 1.2.3.7 
    77License: GPLv2 or later 
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html 
     
    4949 
    5050== Changelog == 
     51= 1.2.3.7 = 
     52* added meta info overlay to miro view 
     53* redesigned layout of titles view and large view in portrait mode 
     54* fix layout problems with mobile phones 
    5155= 1.2.3.6.3 = 
    5256* workaround for bug in Google Chrome where scrollbar shows in overlay 
     
    192196 
    193197== Upgrade Notice == 
     198= 1.2.3.7 = 
     199* added meta info overlay to miro view 
     200* redesigned layout of titles view and large view in portrait mode 
     201* fix layout problems with mobile phones 
    194202= 1.2.3.6.3 = 
    195203* workaround for bug in Google Chrome where scrollbar shows in overlay 
Note: See TracChangeset for help on using the changeset viewer.