Is it possible to show unread item count in Google Chrome extension icon? If yes, then can someone point me to some pointers which explains how to do it?
I went through Google Chrome extension documentation, but couldn't figure it
If I understand correctly, you are looking for the browser-action's badge.
...a bit of text that is layered over the icon...
A badge has a background color and optionally some text and is used for displaying small bits of info (such as unread item count).
Use chrome.browserAction.setBadgeText to set/unset the text and chrome.browserAction.setBadgeBackgroundColor to set its color. E.g.:
var ba = chrome.browserAction;
function setAllRead() {
ba.setBadgeBackgroundColor({color: [0, 255, 0, 128]});
ba.setBadgeText({text: ' '}); // <-- set text to '' to remove the badge
}
function setUnread(unreadItemCount) {
ba.setBadgeBackgroundColor({color: [255, 0, 0, 128]});
ba.setBadgeText({text: '' + unreadItemCount});
}
Then use setUnread() and setAllRead() to show/hide the unread items count.
Related
I am writing an analyzer to visually see where my application is spending time. The interface that I am trying to achieve (see below) is something similar to a tree table with
lines or boxes to denote response time.
be a collapsible tree like graph
the ability to display metrics in the table columns (e.g., start time, cost, etc)
the ability to display the labels or description and metrics on the left and lines on the right
I create the following diagram (see below) in R -- unfortunately, although the graph production is automated, the approach is not interactive. I was wondering if you could suggest a better way -- maybe a tree table. I looked at many Swing, JavaFx tree table examples. I have not seen an example that has lines (time lines) in a tree table.
Any suggestions would be greatly appreciated. Thanks in advance.
You can show any node in a TreeTableCell using the grahic property in javaFX. This includes Rectangles.
This is a simple example of showing bars in a column using Rectangles:
// Arrays in TreeItems contain {startValue, endValue} (both positive)
TreeItem<int[]> root = new TreeItem<>(new int[]{0, 10});
root.getChildren().addAll(new TreeItem<>(new int[]{0, 5}), new TreeItem<>(new int[]{5, 10}));
TreeTableView<int[]> ttv = new TreeTableView<>(root);
// Column displaying bars based on data of TreeItem. Do not use this as
// the first column, otherwise the alignment be off depending on the
// distance to the root.
TreeTableColumn<int[], int[]> column = new TreeTableColumn<>();
column.setCellValueFactory(c -> c.getValue().valueProperty());
final double BAR_SIZE = 20;
column.setCellFactory((t) -> new TreeTableCell<int[], int[]>() {
// the bar
private final Rectangle rectangle = new Rectangle(0, 10);
{
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
// bar invisible by default
rectangle.setVisible(false);
setGraphic(rectangle);
}
#Override
protected void updateItem(int[] item, boolean empty) {
super.updateItem(item, empty);
if (!empty && item != null) {
// resize and display bar, it item is present
rectangle.setWidth((item[1] - item[0]) * BAR_SIZE);
rectangle.setTranslateX(item[0] * BAR_SIZE);
rectangle.setVisible(true);
} else {
// no item -> hide bar
rectangle.setVisible(false);
}
}
});
// add a columns new column
// add a additional empty column at the start to prevent bars being
// aligned based on distance to the root
ttv.getColumns().addAll(new TreeTableColumn<>(), column);
Things you need to do
use a data type different to int[]; the cell value factory and TreeTableCell needs to be adjusted accordingly; an example of a more complex model can be found e.g. in the oracle tutorial: https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/tree-table-view.htm
Choose better colors; These colors could e.g. be stored in a Map and created if a new one is needed.
add additional colums
I make bracelets and place them in my opencart store. Each bracelet is unique, so I have 1 in stock. But customer has to let me know the size of his/her wrist so I can adapt it.
Options ask me for quantities. So, I can not use them because I must enter a number or the option does not become visible.
What I need is:
bracelet B ---> tell me your wrist´s size: (here a drop down or a text box to let the customer choose or write).
Order will reads: Bracelet B... Size: 18cm.... xx $
Then, when the customer pays, Bracelt B is out of stock.
Now, I can do all that, but any time a customer adds an option, the bracelet keeps available.
So Order reads:
Bracelet B ... Size: 18cm... xx$
Bracelet B ... Size: 19cm... xx$ etc
function addToCart(product_id, quantity) {
quantity = typeof(quantity) != 'undefined' ? quantity : 1;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + quantity,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information, .error').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
/*adding Shadyyx solution*/
if (json['error']) {
$('#notification').html('<div class="error" style="display: none;">' + json['error'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('.error').fadeIn('slow');
}
/*end adding*/
}
});
}
In default OC You have the ability to disable ordering of out of stock products.
Simply go to the administration -> System -> Settings, click edit on Your store and navigate to the Options tab. Then scroll down to the Stock section and notice the Stock Checkout: option. If You select No and save the users won't be able to order the products that are not in stock.
This means that if You create a bracelet product with 1 piece in stock, add an option to it with one piece in stock and somebody order this one, it's stock will be immediately set to Not in stock and nobody will be able to order it again.
If You'd like to hide all the products that are not in stock after they are ordered, You have two options - either do this manually by disabling the product or You'd need to implement few modifications in to the getProducts() method for the product model to load only those products that are still in stock.
UPDATE regarding the comment: You are misunderstaning the options in OpenCart. One option for which You have the stock 1 piece is the size option, which may have different values, e.g. 15cm, 16cm, 17cm, 18cm, etc. All these values contained in one single size option for one single stock item mean that if I select any of them, after ordering the bracelet there will no more pieces left.
What You are telling is creating one option for 15cm with 1pcs stock, another option for 16cm with 1pcs stock, etc., thus having 1 piece in stock for each size - this is incorrect (i.e. misuse of product options). Nevertheless, even in this case, when different sizes have all one piece but the product itself has only one piece, after ordering first it should be out of the stock even there are options with stock left...
Step by step walkthrough:
Go to Your OC administration and log in.
Hover the mouse over the Catalog menu point and click on the Options entry
On this Options overview screen notice the Insert in the top-right corner - click it
Enter the Option's name, e.g. Wrist Size
Choose the Option's type, either Select or Radio (depending on how many possible values You want to have, more than 4, use Select)
Sort Order may be a numeric value (or when blank, will be filled with 0)
Now there is empty table underneath with one row containing only a button Add Option Value - by clicking this it will add a row with empty form fields to enter the Option's value; let's say we want to add wrist sizes from 15cm to 22cm => 8 values => click that button 8 times (be careful, after each click it will be moved downward as a new row with form fields will appear above it)
into that 8 rows enter all the necessary values, e.g. 15cm, 16cm, ..., 22cm as value's name and sort order to match Your needs (leaving blank may lead to inappropriately ordered values when displayed)
Click on Save button located at top-right corner.
Now navigate Yourself to the products overview, select the product You want to add this option to and click Edit in that row. Move to the Data tab and make sure the bracelet has these settings:
Quantity: 1
Subtract Stock: Yes
Out of Stock Status: Out of Stock
Then move to the Option tab and add the new option by typing the Option's name (Wrist Size) in the left area - after the Option is found, click on that label and a new Option (new tab) will be added to the view. Now make sure the Option is required and add all possible values while setting these settings to all of them:
Quantity: 1
Subtract Stock: Yes
The other option values depends on Your business model. Now Save the product and try to order it with any of the wrist sizes value. If You have the settings set for the store that the customer isn't possible to order the products that are out of stock, this should work for You.
Let me know if there is something that I missed (or if it still doesn't work).
UPDATE:
Here is one possible solution (not tested but I believe it will work out of the box or maybe there is only simple bug You may fix Yourself):
Open up the catalog/controller/checkout/cart.php and find this line (should be at 543):
$this->cart->add($this->request->post['product_id'], $quantity, $option);
and before this line directly add this code (You may want to do this via vQmod extension):
if ($product_info['quantity'] == 1 && $product_info['subtract'] == 1) {
$products = $this->cart->getProducts();
$already_added = false;
foreach ($products as $product) {
if ($product['product_id'] == $this->request->post['product_id']) {
$already_added = true;
break;
}
}
if ($already_added) {
return $this->response->setOutput(json_encode(array(
'error' => $this->language->get('text_product_already_added')
)));
}
}
Then open up this file catalog/language/english/checkout/cart.php and add this to the end:
$_['text_product_already_added'] = 'This product has allowed quantity of 1 piece and is already added to a cart. Remove it from the cart to be able to add it (e.g. with different size).';
This is all only as an example, You may edit the error message to meet Your requirements.
Warning: this is only a simple solution not letting the same user (or within the same session) to add the same product twice or more times into the cart but it won't prevent the same product being added and ordered at the very same time by two different users (or one user using two browsers, for example). For this edge case You'd need to implement some kind of product locking - after it is added to cart this is saved to a DB and nobody else would be able to add the same product into the cart. In this case it would be nice to store also the datetime when it was locked and have a cron job that will unlock this product (also with removing from the cart) so that the product is not locked for ever and is orderable by other users again...
EDIT for JS part:
Open up this file catalog/view/javascript/common.js and search for method function addToCart(product_id, quantity) { - in this file find this part:
if (json['success']) {
...
}
and after this one add this code:
if (json['error']) {
$('#notification').html('<div class="error" style="display: none;">' + json['error'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('.error').fadeIn('slow');
}
This should be enough.
UPDATE XYZ:
In PHP find this code what have we added:
return $this->response->setOutput(json_encode(array(
'error' => $this->language->get('text_product_already_added')
)));
and change it to this (then try):
$this->response->setOutput(json_encode(array(
'error' => $this->language->get('text_product_already_added')
)));
return;
The point is to see in console where the request is done to index.php?route=checkout/cart/add the response with either success or error message in response. Try for both cases to make sure You are looking at the correct request (in success You can see the success message on the top of page so You may be sure it was done) and then try again to receive error (for the same product) message - it should be contained in the response the same way as the success message is. If still doesn't work, try to change return; to exit;...
Unfortunately I can't comment your post.
I had the problem with error message not showing up, when trying to add the product twice.
I needed to add the JS code to /catalog/view/theme/*/product/product.tpl
Just search for "url: 'index.php?route=checkout/cart/add'" and add the code shadyxx postet right after
if (json['success']) { ... }
I'm using the Google maps V3 JavaScript API and I'm currently using the default directions formatting (because this is the easiest way to get the map pins and step icons integrated into the listing). I'm setting the text that is displayed for each 'address' for example:
var loc = 'The Old Ballpark Bar and Lounge';
var addr = '1234 Main st. Chicago, IL.';
...
route.legs[0].start_address = loc + ' - ' + addr;
I'd like to enhance the readability of this start_address in 2 ways:
I'd like to put the addr part on a separate line.
I'd like to highlight the loc part in bold
Since the text for this start_address is placed in a td (class="adp-text") within a table (class="adp-placemark"); I thought that putting a <br/> between the loc and addr would get me the newline I wanted; but it doesn't work, the api translates this into <br/>. Similarly, trying to put <b> before the loc part, gets translated into & lt;b& gt;.
I've tried escaping the markup code with quotes and backslashes, etc.; but can't find a way to do what I want. Is there any way to insert such mark up so as to get it past the Google code translators? Are there some lower-level CSS tags that might be used to accomplish this?
You must modify the elements after they have been inserted into the DOM.
assign the desired markup:
route.legs[0].start_address = '<div style="font-weight:bold">'+ loc + '</div>' + addr;
hide the panel(to avoid undesired effects)
//directionsDisplay is the google.maps.DirectionsRenderer-instance
directionsDisplay.getPanel().style.visibility='hidden';
set the direction:
directionsDisplay.setDirections(response);
wait a moment until you modify the elements:
setTimeout(function(){
//fetch the elements
var nodes=directionsDisplay.getPanel().querySelectorAll('td.adp-text');
for(var n=0;n<nodes.length;++n){
//assign the text-content of the element to the innerHTML-property
nodes[n].innerHTML=nodes[n].firstChild.data;
}
//show the panel
directionsDisplay.getPanel().style.visibility='visible';
},100);
I want to change the font color of the misspelled words in a Textareafield in Sencha Touch2. I have the array of misspelled words.
This is the textareafield.
{
xtype:'textareafield',
label:'Note',
id:'txt',
scroll:'vertical',
},
MisspeltArr will have the wrongly spelt words.
var misspeltArr =[];
for(i = 0;i<txtArr.length;i++){
var spellCheck = dictionary.check(txtArr[i]);
console.log("spellCheck : "+spellCheck);
if(spellCheck == false){
misspeltArr.push(txtArr[i]);
}
}
Say i have typed the below text in the textareafield,
Thisss is a mobile application screennn
Now in txt I have the text entered
var txt = Ext.getCmp('txt').getValue();
I want to change the color or underline the wrong words - Thisss and screennn (words in the array) in the textareafield. I have achieved spell check and all I want to do is Highlighting the wrong words. Any help is appreciated.
it seems you have to use something more advanced than textarea. Something such as iframe may do the job
Is it possible to specify how many pixels, etc. the tab space occupies in a <pre> using CSS?
for example, say i have a piece of code appearing in a <pre> on a web page:
function Image()
{
this.Write = function()
{
document.write(this.ToString());
return this;
};
...
}
Image.prototype = new Properties();
...
is it possible to specify a different amount of space the tab indents the line using CSS?
If not, is there any workarounds?
While the above discussion provides some historical background, times have changed, and more relevant information and possible solutions can be found here: Specifying Tab-Width?
attn admin: possible duplicate of ref'ed question.
From CSS 2.1, § 16.6.1 The 'white-space' processing model:
All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
CSS3 Text says basically the same thing.
From HTML 4.01 § 9.3.4 Preformatted text: The PRE element
The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.
If you're concerned with leading tabs, it's a simple matter to replace them with spaces.
/* repeat implemented using Russian Peasant multiplication */
String.prototype.repeat = function (n) {
if (n<1) return '';
var accum = '', c=this;
for (; n; n >>=1) {
if (1&n) accum += c;
c += c;
}
return accum;
}
String.prototype.untabify = function(tabWidth) {
tabWidth = tabWidth || 4;
return this.replace(/^\t+/gm, function(tabs) { return ' '.repeat(tabWidth * tabs.length)} );
}