From d3059ae9b2c0a4944be86536409abdb1949356d8 Mon Sep 17 00:00:00 2001 From: Diego Rojas Date: Mon, 6 Feb 2017 21:06:16 -0200 Subject: [PATCH] =?UTF-8?q?adicionado=20icon=20picker=20no=20customizer=20?= =?UTF-8?q?das=20se=C3=A7=C3=B5es=20Fetures,=20Services=20e=20Social=20Ico?= =?UTF-8?q?ns?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/customizer.js | 117 ++++++++++++++++++++++++++++++++++++++++ inc/customizer.php | 36 ++++++++++--- inc/template-tags.php | 6 +-- 3 files changed, 149 insertions(+), 10 deletions(-) diff --git a/assets/js/customizer.js b/assets/js/customizer.js index f93b0fa..bf7136b 100755 --- a/assets/js/customizer.js +++ b/assets/js/customizer.js @@ -1292,3 +1292,120 @@ jQuery( window ).ready( function( $ ){ } ); + +/** + * Icon picker + */ +jQuery( document ).ready( function( $ ) { + + window.editing_icon = false; + var icon_picker = $( '
' ); + var options_font_type = '', icon_group = ''; + + $.each( C_Icon_Picker.fonts, function( key, font ) { + + font = $.extend( {}, { + url: '', + name: '', + prefix: '', + icons: '' + }, font ); + + $('') + .appendTo('head') + .attr({type : 'text/css', rel : 'stylesheet'}) + .attr('id', 'customizer-icon-' + key ) + .attr('href', font.url ); + + options_font_type += ''; + + var icons_array = font.icons.split('|'); + + icon_group += ''; + + } ); + icon_picker.find( '.c-icon-search input' ).attr( 'placeholder', C_Icon_Picker.search ); + icon_picker.find( '.c-icon-type' ).html( options_font_type ); + icon_picker.find( '.c-icon-list' ).append( icon_group ); + $( '.wp-full-overlay' ).append( icon_picker ); + + // Change icon type + $( 'body' ).on( 'change', 'select.c-icon-type', function(){ + var t = $( this ).val(); + icon_picker.find( '.ic-icons-group' ).hide(); + icon_picker.find( '.ic-icons-group[data-group-name="'+t+'"]' ).show(); + + } ); + icon_picker.find( 'select.c-icon-type' ).trigger( 'change' ); + + // When type to search + $( 'body' ).on( 'keyup', '.c-icon-search input', function(){ + var v = $( this ).val(); + if ( v == '' ) { + $( '.c-icon-list span' ).show(); + } else { + $( '.c-icon-list span' ).hide(); + try { + $( '.c-icon-list span[data-name*="'+v+'"]' ).show(); + } catch ( e ){ + + } + } + } ); + + // Edit icon + $( 'body' ).on( 'click', '.icon-wrapper', function( e ){ + e.preventDefault(); + var icon = $( this ); + window.editing_icon = icon; + icon_picker.addClass( 'ic-active' ); + $( 'body' ).find( '.icon-wrapper' ).removeClass('icon-editing'); + icon.addClass( 'icon-editing' ); + } ); + // Remove icon + $( 'body' ).on( 'click', '.item-icon .remove-icon', function( e ){ + e.preventDefault(); + var item = $( this ).closest( '.item-icon' ); + item.find( '.icon-wrapper input' ).val( '' ); + item.find( '.icon-wrapper input' ).trigger( 'change' ); + item.find( '.icon-wrapper i' ).attr( 'class', '' ); + $( 'body' ).find( '.icon-wrapper' ).removeClass('icon-editing'); + } ); + + // Selected icon + $( 'body' ).on( 'click', '.c-icon-list span', function( e ){ + e.preventDefault(); + var icon_name = $( this ).attr( 'data-name' ) || ''; + if ( window.editing_icon ) { + window.editing_icon.find( 'i' ).attr( 'class', '' ).addClass( $( this ).find( 'i' ).attr( 'class' ) ); + window.editing_icon.find( 'input' ).val( icon_name ).trigger( 'change' ); + } + icon_picker.removeClass( 'ic-active' ); + window.editing_icon = false; + $( 'body' ).find( '.icon-wrapper' ).removeClass('icon-editing'); + } ); + + $( document ).mouseup( function ( e ) { + if ( window.editing_icon ) { + if ( ! window.editing_icon.is( e.target ) // if the target of the click isn't the container... + && window.editing_icon.has( e.target ).length === 0 // ... nor a descendant of the container + && ( + !icon_picker.is( e.target ) + && icon_picker.has( e.target ).length === 0 + ) + ) { + icon_picker.removeClass('ic-active'); + // window.editing_icon = false; + } + } + }); + +} ); \ No newline at end of file diff --git a/inc/customizer.php b/inc/customizer.php index 23a04b0..45bbaf7 100755 --- a/inc/customizer.php +++ b/inc/customizer.php @@ -469,8 +469,7 @@ function onepress_customize_register( $wp_customize ) { ), 'icon' => array( 'title' => esc_html__('Icon', 'onepress'), - 'desc' => __('Paste your Font Awesome icon class name here.', 'onepress'), - 'type' =>'text', + 'type' =>'icon', ), 'link' => array( 'title' => esc_html__('URL', 'onepress'), @@ -1114,8 +1113,7 @@ function onepress_customize_register( $wp_customize ) { ), 'icon' => array( 'title' => esc_html__('Icon', 'onepress'), - 'desc' => __('Paste your Font Awesome icon class name here.', 'onepress'), - 'type' =>'text', + 'type' =>'icon', 'required' => array( 'icon_type', '=', 'icon' ), ), 'image' => array( @@ -1520,7 +1518,6 @@ function onepress_customize_register( $wp_customize ) { 'fields' => array( 'icon_type' => array( 'title' => esc_html__('Custom icon', 'onepress'), - 'desc' => __('Paste your Font Awesome icon class name here.', 'onepress'), 'type' =>'select', 'options' => array( 'icon' => esc_html__('Icon', 'onepress'), @@ -1529,8 +1526,7 @@ function onepress_customize_register( $wp_customize ) { ), 'icon' => array( 'title' => esc_html__('Icon', 'onepress'), - 'desc' => __('Paste your Font Awesome icon class name here.', 'onepress'), - 'type' =>'text', + 'type' =>'icon', 'required' => array( 'icon_type', '=', 'icon' ), ), 'image' => array( @@ -2367,3 +2363,29 @@ function opneress_customize_js_settings(){ 'action_url' => admin_url( 'themes.php?page=ft_onepress&tab=actions_required' ) ) ); } + +/** + * Customizer Icon picker + */ +function onepress_customize_controls_enqueue_scripts(){ + wp_localize_script( 'customize-controls', 'C_Icon_Picker', + apply_filters( 'c_icon_picker_js_setup', + array( + 'search' => esc_html__( 'Search', 'onepress' ), + 'fonts' => array( + 'font-awesome' => array( + // Name of icon + 'name' => esc_html__( 'Font Awesome', 'onepress' ), + // prefix class example for font-awesome fa-fa-{name} + 'prefix' => 'fa', + // font url + 'url' => esc_url( add_query_arg( array( 'ver'=> '4.7.0' ), get_template_directory_uri() .'/assets/css/font-awesome.min.css' ) ), + // Icon class name, separated by | + 'icons' => 'fa-glass|fa-music|fa-search|fa-envelope-o|fa-heart|fa-star|fa-star-o|fa-user|fa-film|fa-th-large|fa-th|fa-th-list|fa-check|fa-times|fa-search-plus|fa-search-minus|fa-power-off|fa-signal|fa-cog|fa-trash-o|fa-home|fa-file-o|fa-clock-o|fa-road|fa-download|fa-arrow-circle-o-down|fa-arrow-circle-o-up|fa-inbox|fa-play-circle-o|fa-repeat|fa-refresh|fa-list-alt|fa-lock|fa-flag|fa-headphones|fa-volume-off|fa-volume-down|fa-volume-up|fa-qrcode|fa-barcode|fa-tag|fa-tags|fa-book|fa-bookmark|fa-print|fa-camera|fa-font|fa-bold|fa-italic|fa-text-height|fa-text-width|fa-align-left|fa-align-center|fa-align-right|fa-align-justify|fa-list|fa-outdent|fa-indent|fa-video-camera|fa-picture-o|fa-pencil|fa-map-marker|fa-adjust|fa-tint|fa-pencil-square-o|fa-share-square-o|fa-check-square-o|fa-arrows|fa-step-backward|fa-fast-backward|fa-backward|fa-play|fa-pause|fa-stop|fa-forward|fa-fast-forward|fa-step-forward|fa-eject|fa-chevron-left|fa-chevron-right|fa-plus-circle|fa-minus-circle|fa-times-circle|fa-check-circle|fa-question-circle|fa-info-circle|fa-crosshairs|fa-times-circle-o|fa-check-circle-o|fa-ban|fa-arrow-left|fa-arrow-right|fa-arrow-up|fa-arrow-down|fa-share|fa-expand|fa-compress|fa-plus|fa-minus|fa-asterisk|fa-exclamation-circle|fa-gift|fa-leaf|fa-fire|fa-eye|fa-eye-slash|fa-exclamation-triangle|fa-plane|fa-calendar|fa-random|fa-comment|fa-magnet|fa-chevron-up|fa-chevron-down|fa-retweet|fa-shopping-cart|fa-folder|fa-folder-open|fa-arrows-v|fa-arrows-h|fa-bar-chart|fa-twitter-square|fa-facebook-square|fa-camera-retro|fa-key|fa-cogs|fa-comments|fa-thumbs-o-up|fa-thumbs-o-down|fa-star-half|fa-heart-o|fa-sign-out|fa-linkedin-square|fa-thumb-tack|fa-external-link|fa-sign-in|fa-trophy|fa-github-square|fa-upload|fa-lemon-o|fa-phone|fa-square-o|fa-bookmark-o|fa-phone-square|fa-twitter|fa-facebook|fa-github|fa-unlock|fa-credit-card|fa-rss|fa-hdd-o|fa-bullhorn|fa-bell|fa-certificate|fa-hand-o-right|fa-hand-o-left|fa-hand-o-up|fa-hand-o-down|fa-arrow-circle-left|fa-arrow-circle-right|fa-arrow-circle-up|fa-arrow-circle-down|fa-globe|fa-wrench|fa-tasks|fa-filter|fa-briefcase|fa-arrows-alt|fa-users|fa-link|fa-cloud|fa-flask|fa-scissors|fa-files-o|fa-paperclip|fa-floppy-o|fa-square|fa-bars|fa-list-ul|fa-list-ol|fa-strikethrough|fa-underline|fa-table|fa-magic|fa-truck|fa-pinterest|fa-pinterest-square|fa-google-plus-square|fa-google-plus|fa-money|fa-caret-down|fa-caret-up|fa-caret-left|fa-caret-right|fa-columns|fa-sort|fa-sort-desc|fa-sort-asc|fa-envelope|fa-linkedin|fa-undo|fa-gavel|fa-tachometer|fa-comment-o|fa-comments-o|fa-bolt|fa-sitemap|fa-umbrella|fa-clipboard|fa-lightbulb-o|fa-exchange|fa-cloud-download|fa-cloud-upload|fa-user-md|fa-stethoscope|fa-suitcase|fa-bell-o|fa-coffee|fa-cutlery|fa-file-text-o|fa-building-o|fa-hospital-o|fa-ambulance|fa-medkit|fa-fighter-jet|fa-beer|fa-h-square|fa-plus-square|fa-angle-double-left|fa-angle-double-right|fa-angle-double-up|fa-angle-double-down|fa-angle-left|fa-angle-right|fa-angle-up|fa-angle-down|fa-desktop|fa-laptop|fa-tablet|fa-mobile|fa-circle-o|fa-quote-left|fa-quote-right|fa-spinner|fa-circle|fa-reply|fa-github-alt|fa-folder-o|fa-folder-open-o|fa-smile-o|fa-frown-o|fa-meh-o|fa-gamepad|fa-keyboard-o|fa-flag-o|fa-flag-checkered|fa-terminal|fa-code|fa-reply-all|fa-star-half-o|fa-location-arrow|fa-crop|fa-code-fork|fa-chain-broken|fa-question|fa-info|fa-exclamation|fa-superscript|fa-subscript|fa-eraser|fa-puzzle-piece|fa-microphone|fa-microphone-slash|fa-shield|fa-calendar-o|fa-fire-extinguisher|fa-rocket|fa-maxcdn|fa-chevron-circle-left|fa-chevron-circle-right|fa-chevron-circle-up|fa-chevron-circle-down|fa-html5|fa-css3|fa-anchor|fa-unlock-alt|fa-bullseye|fa-ellipsis-h|fa-ellipsis-v|fa-rss-square|fa-play-circle|fa-ticket|fa-minus-square|fa-minus-square-o|fa-level-up|fa-level-down|fa-check-square|fa-pencil-square|fa-external-link-square|fa-share-square|fa-compass|fa-caret-square-o-down|fa-caret-square-o-up|fa-caret-square-o-right|fa-eur|fa-gbp|fa-usd|fa-inr|fa-jpy|fa-rub|fa-krw|fa-btc|fa-file|fa-file-text|fa-sort-alpha-asc|fa-sort-alpha-desc|fa-sort-amount-asc|fa-sort-amount-desc|fa-sort-numeric-asc|fa-sort-numeric-desc|fa-thumbs-up|fa-thumbs-down|fa-youtube-square|fa-youtube|fa-xing|fa-xing-square|fa-youtube-play|fa-dropbox|fa-stack-overflow|fa-instagram|fa-flickr|fa-adn|fa-bitbucket|fa-bitbucket-square|fa-tumblr|fa-tumblr-square|fa-long-arrow-down|fa-long-arrow-up|fa-long-arrow-left|fa-long-arrow-right|fa-apple|fa-windows|fa-android|fa-linux|fa-dribbble|fa-skype|fa-foursquare|fa-trello|fa-female|fa-male|fa-gratipay|fa-sun-o|fa-moon-o|fa-archive|fa-bug|fa-vk|fa-weibo|fa-renren|fa-pagelines|fa-stack-exchange|fa-arrow-circle-o-right|fa-arrow-circle-o-left|fa-caret-square-o-left|fa-dot-circle-o|fa-wheelchair|fa-vimeo-square|fa-try|fa-plus-square-o|fa-space-shuttle|fa-slack|fa-envelope-square|fa-wordpress|fa-openid|fa-university|fa-graduation-cap|fa-yahoo|fa-google|fa-reddit|fa-reddit-square|fa-stumbleupon-circle|fa-stumbleupon|fa-delicious|fa-digg|fa-pied-piper-pp|fa-pied-piper-alt|fa-drupal|fa-joomla|fa-language|fa-fax|fa-building|fa-child|fa-paw|fa-spoon|fa-cube|fa-cubes|fa-behance|fa-behance-square|fa-steam|fa-steam-square|fa-recycle|fa-car|fa-taxi|fa-tree|fa-spotify|fa-deviantart|fa-soundcloud|fa-database|fa-file-pdf-o|fa-file-word-o|fa-file-excel-o|fa-file-powerpoint-o|fa-file-image-o|fa-file-archive-o|fa-file-audio-o|fa-file-video-o|fa-file-code-o|fa-vine|fa-codepen|fa-jsfiddle|fa-life-ring|fa-circle-o-notch|fa-rebel|fa-empire|fa-git-square|fa-git|fa-hacker-news|fa-tencent-weibo|fa-qq|fa-weixin|fa-paper-plane|fa-paper-plane-o|fa-history|fa-circle-thin|fa-header|fa-paragraph|fa-sliders|fa-share-alt|fa-share-alt-square|fa-bomb|fa-futbol-o|fa-tty|fa-binoculars|fa-plug|fa-slideshare|fa-twitch|fa-yelp|fa-newspaper-o|fa-wifi|fa-calculator|fa-paypal|fa-google-wallet|fa-cc-visa|fa-cc-mastercard|fa-cc-discover|fa-cc-amex|fa-cc-paypal|fa-cc-stripe|fa-bell-slash|fa-bell-slash-o|fa-trash|fa-copyright|fa-at|fa-eyedropper|fa-paint-brush|fa-birthday-cake|fa-area-chart|fa-pie-chart|fa-line-chart|fa-lastfm|fa-lastfm-square|fa-toggle-off|fa-toggle-on|fa-bicycle|fa-bus|fa-ioxhost|fa-angellist|fa-cc|fa-ils|fa-meanpath|fa-buysellads|fa-connectdevelop|fa-dashcube|fa-forumbee|fa-leanpub|fa-sellsy|fa-shirtsinbulk|fa-simplybuilt|fa-skyatlas|fa-cart-plus|fa-cart-arrow-down|fa-diamond|fa-ship|fa-user-secret|fa-motorcycle|fa-street-view|fa-heartbeat|fa-venus|fa-mars|fa-mercury|fa-transgender|fa-transgender-alt|fa-venus-double|fa-mars-double|fa-venus-mars|fa-mars-stroke|fa-mars-stroke-v|fa-mars-stroke-h|fa-neuter|fa-genderless|fa-facebook-official|fa-pinterest-p|fa-whatsapp|fa-server|fa-user-plus|fa-user-times|fa-bed|fa-viacoin|fa-train|fa-subway|fa-medium|fa-y-combinator|fa-optin-monster|fa-opencart|fa-expeditedssl|fa-battery-full|fa-battery-three-quarters|fa-battery-half|fa-battery-quarter|fa-battery-empty|fa-mouse-pointer|fa-i-cursor|fa-object-group|fa-object-ungroup|fa-sticky-note|fa-sticky-note-o|fa-cc-jcb|fa-cc-diners-club|fa-clone|fa-balance-scale|fa-hourglass-o|fa-hourglass-start|fa-hourglass-half|fa-hourglass-end|fa-hourglass|fa-hand-rock-o|fa-hand-paper-o|fa-hand-scissors-o|fa-hand-lizard-o|fa-hand-spock-o|fa-hand-pointer-o|fa-hand-peace-o|fa-trademark|fa-registered|fa-creative-commons|fa-gg|fa-gg-circle|fa-tripadvisor|fa-odnoklassniki|fa-odnoklassniki-square|fa-get-pocket|fa-wikipedia-w|fa-safari|fa-chrome|fa-firefox|fa-opera|fa-internet-explorer|fa-television|fa-contao|fa-500px|fa-amazon|fa-calendar-plus-o|fa-calendar-minus-o|fa-calendar-times-o|fa-calendar-check-o|fa-industry|fa-map-pin|fa-map-signs|fa-map-o|fa-map|fa-commenting|fa-commenting-o|fa-houzz|fa-vimeo|fa-black-tie|fa-fonticons|fa-reddit-alien|fa-edge|fa-credit-card-alt|fa-codiepie|fa-modx|fa-fort-awesome|fa-usb|fa-product-hunt|fa-mixcloud|fa-scribd|fa-pause-circle|fa-pause-circle-o|fa-stop-circle|fa-stop-circle-o|fa-shopping-bag|fa-shopping-basket|fa-hashtag|fa-bluetooth|fa-bluetooth-b|fa-percent|fa-gitlab|fa-wpbeginner|fa-wpforms|fa-envira|fa-universal-access|fa-wheelchair-alt|fa-question-circle-o|fa-blind|fa-audio-description|fa-volume-control-phone|fa-braille|fa-assistive-listening-systems|fa-american-sign-language-interpreting|fa-deaf|fa-glide|fa-glide-g|fa-sign-language|fa-low-vision|fa-viadeo|fa-viadeo-square|fa-snapchat|fa-snapchat-ghost|fa-snapchat-square|fa-pied-piper|fa-first-order|fa-yoast|fa-themeisle|fa-google-plus-official|fa-font-awesome|fa-handshake-o|fa-envelope-open|fa-envelope-open-o|fa-linode|fa-address-book|fa-address-book-o|fa-address-card|fa-address-card-o|fa-user-circle|fa-user-circle-o|fa-user-o|fa-id-badge|fa-id-card|fa-id-card-o|fa-quora|fa-free-code-camp|fa-telegram|fa-thermometer-full|fa-thermometer-three-quarters|fa-thermometer-half|fa-thermometer-quarter|fa-thermometer-empty|fa-shower|fa-bath|fa-podcast|fa-window-maximize|fa-window-minimize|fa-window-restore|fa-window-close|fa-window-close-o|fa-bandcamp|fa-grav|fa-etsy|fa-imdb|fa-ravelry|fa-eercast|fa-microchip|fa-snowflake-o|fa-superpowers|fa-wpexplorer|fa-meetup' + ), + ) + ) + ) + ); +} +add_action( 'customize_controls_enqueue_scripts', 'onepress_customize_controls_enqueue_scripts' ); \ No newline at end of file diff --git a/inc/template-tags.php b/inc/template-tags.php index 1ae072a..73d213c 100755 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -673,13 +673,13 @@ function onepress_get_social_profiles() // If icon isset $icons = array(); $array[$k]['icon'] = trim($array[$k]['icon']); - if ($array[$k]['icon'] != '' && strpos($array[$k]['icon'], 'fa-') !== 0) { - $icons['fa-' . $array[$k]['icon']] = 'fa-' . $array[$k]['icon']; + if ($array[$k]['icon'] != '' && strpos($array[$k]['icon'], 'fa') !== 0) { + $icons[$array[$k]['icon']] = 'fa-' . $array[$k]['icon']; } else { $icons[$array[$k]['icon']] = $array[$k]['icon']; } $network = ($array[$k]['network']) ? sanitize_title($array[$k]['network']) : false; - if ($network) { + if ( $network && ! $array[$k]['icon'] ) { $icons['fa-' . $network] = 'fa-' . $network; }