Hovercards is a plugin which shows a delightful preview of your users when they hover on usernames around your board. You can customize Hovercards as you wish, fine-tuning what users data to show inside cards and their visual aspect as well.



Minimum requirements
PHP 5.4
MyBB 1.8.0
PluginLibrary
664 chmod permissions on inc/functions.php

Main features
Hovercards is not a complicated plugin. As such, it does not come with many hardcoded options, but it does what it's supposed to do: display cards on hover.

Extensibility
You decide what data to include in a card: once a data point becomes available, you can reference it in Hovercards' unique template, which is then packed and built upon every single hover on an username. Hovercards adds 1 stylesheet you can play around with to customize the visual aspect of the card. A minimal style is included by default.

You can also use JavaScript conditionals to adapt each data point's display. For example, you might want to display a different label when an user hasn't posted yet. You can use the buildTemplateCallback(html, user) function to manipulate the template accounting for each user's values every time it is displayed. The base example is included in the hovercards_script template.

Adaptive colors
Every card can hold an unique background color which is chosen upon the dominant one from the user's avatar. Text color is adjusted to be readable accounting for the background contrast. This is available as an option. Adaptive colors uses a nasty technique which absolutely demands the image data; cross-site scripting blocks is circumvented by using Google's public image proxy, which helps gathering the image data.

All-in-one query
Hovercards queries the database just the first time you hover on a username, gathering all the users available in the page with one query. This adds an extra layer of trust when it comes to properly assign an user's data to the respective target on screen, and it also saves resources by avoiding too many queries over time.

Installation
Upload the files maintaining the same folder structure as they come in the package and click the button Install & activate within your board's plugin list.

Settings
Hovercards adds 4 settings.

Adaptive colors has already been explained above. If you disable it, you can manually choose and add a default background color for all cards in HEX format.

Fields to use lets you select the available data points. The more data points you will select, the more intense and slow the query will be (although you shouldn't notice the difference most of the times). A FIELD is then available within Hovercards' template with the following, simple syntax: {FIELD}. For example, if you activate the field "username", you will be able to use {username} into Hovercards' template and it will be replaced with the user's formatted username when watching his card.

Card positioning lets you decide the orientation of cards relative to their attached object out of 9 possible vertical/horizontal placements. The default orientation is "bottom left".

Templates and stylesheets
Hovercards adds a CSS file named hovercards.css to every theme of your board. You can customize the card's appearance by editing the stylesheet's CSS rules. It also adds 2 templates which you can customize to change both the appearance and data points to show in a single card, as explained above.

Hovercards là một plugin hiển thị bản xem trước thú vị của người dùng khi họ di chuột vào tên người dùng xung quanh bảng của bạn. Bạn có thể tùy chỉnh Hovercard theo ý muốn, tinh chỉnh dữ liệu người dùng để hiển thị bên trong thẻ và khía cạnh trực quan của chúng.



Yêu cầu tối thiểu
PHP 5.4
MyBB 1.8.0
Thư viện PluginLibrary
664 quyền CHMOD trên Inc/functions.php

Những đặc điểm chính
Hovercards không phải là một plugin phức tạp. Như vậy, nó không đi kèm với nhiều tùy chọn được mã hóa cứng, nhưng nó thực hiện những gì nó phải làm: hiển thị thẻ khi di chuột.

Khả năng mở rộng
Bạn quyết định dữ liệu nào sẽ đưa vào thẻ: khi một điểm dữ liệu có sẵn, bạn có thể tham chiếu nó trong mẫu duy nhất của Hovercards, sau đó được đóng gói và xây dựng dựa trên mỗi lần di chuột trên tên người dùng. Hovercards thêm 1 stylesheet mà bạn có thể chơi xung quanh để tùy chỉnh khía cạnh hình ảnh của thẻ. Một kiểu tối giản được bao gồm theo mặc định.

Bạn cũng có thể sử dụng điều kiện JavaScript để điều chỉnh hiển thị của từng điểm dữ liệu. Ví dụ: bạn có thể muốn hiển thị một nhãn khác khi người dùng chưa đăng. Bạn có thể sử dụng hàm buildTemplateCallback(html, user) để thao tác với tính toán mẫu cho các giá trị của từng người dùng mỗi khi nó được hiển thị. Ví dụ cơ sở được bao gồm trong mẫu hovercards_script.

Màu sắc thích ứng
Mỗi thẻ có thể chứa một màu nền độc đáo được chọn trên màu nền chủ đạo từ hình đại diện của người dùng. Màu văn bản được điều chỉnh để có thể đọc được tính đến độ tương phản nền. Điều này có sẵn dưới dạng một tùy chọn. Màu sắc thích ứng sử dụng một kỹ thuật khó chịu hoàn toàn yêu cầu dữ liệu hình ảnh; các khối kịch bản chéo trang web được phá vỡ bằng cách sử dụng proxy hình ảnh công khai của Google, giúp thu thập dữ liệu hình ảnh.

Truy vấn tất cả trong một
Hovercards truy vấn cơ sở dữ liệu chỉ trong lần đầu tiên bạn di chuột vào tên người dùng, thu thập tất cả người dùng có sẵn trong trang với một truy vấn. Điều này bổ sung thêm một lớp tin cậy khi gán đúng dữ liệu của người dùng cho mục tiêu tương ứng trên màn hình và nó cũng tiết kiệm tài nguyên bằng cách tránh quá nhiều truy vấn theo thời gian.

Cài đặt
Tải lên các tệp duy trì cùng cấu trúc thư mục như chúng có trong gói và nhấp vào nút Cài đặt & kích hoạt trong danh sách plugin của bảng của bạn.

Cài đặt
Hovercards thêm 4 cài đặt.

Màu sắc thích ứng đã được giải thích ở trên. Nếu bạn tắt tính năng này, bạn có thể chọn và thêm màu nền mặc định cho tất cả các thẻ ở định dạng HEX theo cách thủ công.

Các trường để sử dụng cho phép bạn chọn các điểm dữ liệu có sẵn. Bạn càng chọn nhiều điểm dữ liệu, truy vấn sẽ càng dữ dội và chậm hơn (mặc dù bạn sẽ không nhận thấy sự khác biệt trong hầu hết các trường hợp). Sau đó, một FIELD có sẵn trong mẫu của Hovercards với cú pháp đơn giản như sau: {FIELD}. Ví dụ: nếu bạn kích hoạt trường "tên người dùng", bạn sẽ có thể sử dụng {username} vào mẫu của Hovercards và nó sẽ được thay thế bằng tên người dùng được định dạng của người dùng khi xem thẻ của họ.

Định vị thẻ cho phép bạn quyết định hướng của thẻ so với đối tượng đính kèm của chúng trong số 9 vị trí dọc / ngang có thể có. Hướng mặc định là "dưới cùng bên trái".

Mẫu và biểu định kiểu
Hovercards thêm một tệp CSS có tên hovercards.css vào mọi chủ đề trên bảng của bạn. Bạn có thể tùy chỉnh giao diện của thẻ bằng cách chỉnh sửa các quy tắc CSS của stylesheet. Nó cũng thêm 2 mẫu mà bạn có thể tùy chỉnh để thay đổi cả giao diện và điểm dữ liệu để hiển thị trong một thẻ duy nhất, như đã giải thích ở trên.