Skip to content

Commit

Permalink
adicionado icon picker no customizer das seções Fetures, Services e S…
Browse files Browse the repository at this point in the history 
…ocial Icons
  • Loading branch information
@diegorojas
diegorojas committed Feb 6, 2017
1 parent a3392b4 commit d3059ae
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 10 deletions.
117 changes: 117 additions & 0 deletions assets/js/customizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1292,3 +1292,120 @@ jQuery( window ).ready( function( $ ){


} );

/**
* Icon picker
*/
jQuery( document ).ready( function( $ ) {

window.editing_icon = false;
var icon_picker = $( '<div class="c-icon-picker"><div class="c-icon-type-wrap"><select class="c-icon-type"></select></div><div class="c-icon-search"><input class="" type="text"></div><div class="c-icon-list"></div></div>' );
var options_font_type = '', icon_group = '';

$.each( C_Icon_Picker.fonts, function( key, font ) {

font = $.extend( {}, {
url: '',
name: '',
prefix: '',
icons: ''
}, font );

$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('id', 'customizer-icon-' + key )
.attr('href', font.url );

options_font_type += '<option value="'+key+'">' +font.name+ '</option>';

var icons_array = font.icons.split('|');

icon_group += '<div class="ic-icons-group" style="display: none;" data-group-name="'+key+'">';
$.each( icons_array, function( index, icon ){
if ( font.prefix ) {
icon = font.prefix + ' ' + icon;
}
icon_group += '<span title="'+icon+'" data-name="'+icon+'"><i class="'+ icon +'"></i></span>';

} );
icon_group += '</div>';

} );
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;
}
}
});

} );
36 changes: 29 additions & 7 deletions inc/customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,8 +469,7 @@ function onepress_customize_register( $wp_customize ) {
),
'icon' => array(
'title' => esc_html__('Icon', 'onepress'),
'desc' => __('Paste your <a target="_blank" href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome</a> icon class name here.', 'onepress'),
'type' =>'text',
'type' =>'icon',
),
'link' => array(
'title' => esc_html__('URL', 'onepress'),
Expand Down Expand Up @@ -1114,8 +1113,7 @@ function onepress_customize_register( $wp_customize ) {
),
'icon' => array(
'title' => esc_html__('Icon', 'onepress'),
'desc' => __('Paste your <a target="_blank" href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome</a> icon class name here.', 'onepress'),
'type' =>'text',
'type' =>'icon',
'required' => array( 'icon_type', '=', 'icon' ),
),
'image' => array(
Expand Down Expand Up @@ -1520,7 +1518,6 @@ function onepress_customize_register( $wp_customize ) {
'fields' => array(
'icon_type' => array(
'title' => esc_html__('Custom icon', 'onepress'),
'desc' => __('Paste your <a target="_blank" href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome</a> icon class name here.', 'onepress'),
'type' =>'select',
'options' => array(
'icon' => esc_html__('Icon', 'onepress'),
Expand All @@ -1529,8 +1526,7 @@ function onepress_customize_register( $wp_customize ) {
),
'icon' => array(
'title' => esc_html__('Icon', 'onepress'),
'desc' => __('Paste your <a target="_blank" href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome</a> icon class name here.', 'onepress'),
'type' =>'text',
'type' =>'icon',
'required' => array( 'icon_type', '=', 'icon' ),
),
'image' => array(
Expand Down Expand Up @@ -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' );
6 changes: 3 additions & 3 deletions inc/template-tags.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down

0 comments on commit d3059ae

Please sign in to comment.