Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(402)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/print_preview/print_preview.html

Issue 2101019: Print Preview component extension (Closed)
Patch Set: Put it under a flag Created 10 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/browser/resources/print_preview/print_preview.css ('k') | chrome/browser/resources/shared/css/button.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1
2 <html i18n-values="dir:textdirection">
3 <head>
4 <title>Print Preview</title>
5 <link rel="stylesheet" href="chrome://resources/css/button.css">
6 <link rel="stylesheet" href="chrome://resources/css/list.css">
7 <link rel="stylesheet" href="chrome://resources/css/tree.css">
8 <link rel="stylesheet" href="chrome://resources/css/menu.css">
9 <link rel="stylesheet" href="print_preview.css">
10 <script src="chrome://resources/css/tree.css.js"></script>
11 <script src="chrome://resources/js/cr.js"></script>
12 <script src="chrome://resources/js/class_list.js"></script>
13 <script src="chrome://resources/js/cr/event_target.js"></script>
14 <script src="chrome://resources/js/cr/link_controller.js"></script>
15 <script src="chrome://resources/js/cr/promise.js"></script>
16 <script src="chrome://resources/js/cr/ui.js"></script>
17 <script src="chrome://resources/js/cr/ui/array_data_model.js"></script>
18 <script src="chrome://resources/js/cr/ui/list_selection_model.js"></script>
19 <script src="chrome://resources/js/cr/ui/list_item.js"></script>
20 <script src="chrome://resources/js/cr/ui/list.js"></script>
21 <script src="chrome://resources/js/cr/ui/tree.js"></script>
22 <script src="chrome://resources/js/cr/ui/splitter.js"></script>
23 <script src="chrome://resources/js/cr/ui/command.js"></script>
24 <script src="chrome://resources/js/cr/ui/menu_item.js"></script>
25 <script src="chrome://resources/js/cr/ui/menu.js"></script>
26 <script src="chrome://resources/js/cr/ui/position_util.js"></script>
27 <script src="chrome://resources/js/cr/ui/menu_button.js"></script>
28 <script src="chrome://resources/js/cr/ui/context_menu_handler.js"></script>
29
30 <script src="chrome://resources/js/util.js"></script>
31 <script src="chrome://resources/js/local_strings.js"></script>
32 <script src="chrome://resources/js/i18n_template.js"></script>
33
34 <script src="chrome://resources/js/class_list.js"></script>
35 <script src="js/preview_list.js"></script>
36 </head>
37 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
38
39 <div style="display:-webkit-box;height:100%;with:100%;">
40 <div style="-webkit-box-flex:0;" class="bar left">
41 <div class="main-options">
42 <div>Destination</div>
43 <button class="dropdown" menu="#printer-menu" id="printer-chooser">Ironh orse</button>
44 <br />
45 <button id="print-button" class="action">Print</button>
46 <button id="cancel-button">Cancel</button>
47 </div>
48 <div id="more-options">
49 <div class="printer-option">
50 <input type="checkbox">
51 Archive a copy to Docs
52 </div>
53 <div class="printer-option">
54 <input type="checkbox">
55 Two-sided (duplex)
56 </div>
57 <div class="printer-option">
58 <input type="checkbox">
59 Multiple Copies
60 </div>
61 <div id="hidden-options" class="closed">
62
63 </div>
64 <div id="more-options-toggle">
65 More Options
66 </div>
67 </div>
68 </div>
69 <div class="page-layout">
70 <img id="bigpreview" class="placeholder" src="ss.png">
71 </div>
72 <div class="preview-list-container">
73 <list id=preview></list>
74 </div>
75 </div>
76
77
78 <menu id="printer-menu">
79
80 </menu>
81
82 <script>
83 const ArrayDataModel = cr.ui.ArrayDataModel;
84 const PreviewList = pp.PreviewList;
85 const List = cr.ui.List;
86 const ListItem = cr.ui.ListItem;
87 const Menu = cr.ui.Menu;
88 const MenuItem = cr.ui.MenuItem;
89 const MenuButton = cr.ui.MenuButton;
90 const Command = cr.ui.Command;
91
92 cr.ui.decorate('menu', Menu);
93 cr.ui.decorate('button[menu]', MenuButton);
94 cr.ui.decorate('command', Command);
95 PreviewList.decorate(preview);
96
97 var BigPreview = document.getElementById('bigpreview');
98 var PrinterMenuButton = document.getElementById("printer-chooser");
99 var PrintButton = document.getElementById('print-button');
100 var PrinterMenu = document.getElementById("printer-menu");
101
102 var moreOptionsToggle = document.getElementById('more-options-toggle');
103 var hiddenOptions = document.getElementById('hidden-options');
104
105 function getPreferredHeight(el) {
106 var oldHeight = el.style.height;
107 el.style.height = 'auto';
108 var height = el.offsetHeight;
109 el.style.height = oldHeight;
110 return height;
111 }
112 moreOptionsToggle.addEventListener('click', function(e) {
113 if (hiddenOptions.offsetHeight == 0) {
114 hiddenOptions.style.height = getPreferredHeight(hiddenOptions);
115 e.target.innerHTML = "Less Options";
116 } else {
117 hiddenOptions.style.height = 0;
118 e.target.innerHTML = "More Options";
119 }
120 });
121
122 // TODO(feldstein): Why can't this listen to the button instead?
123 document.addEventListener('command', setActivePrinter);
124
125 function setActivePrinter(e) {
126 var printer = e.command.printer;
127 PrinterMenuButton.innerHTML = printer.name;
128 }
129
130 function setPages(pages) {
131 var model = new ArrayDataModel(pages);
132 preview.dataModel = model;
133 }
134
135 function setPrinters(printers) {
136 printers.forEach(function(printer) {
137 var item;
138 if (!printer.name) {
139 item = document.createElement('hr');
140 } else {
141 item = new MenuItem();
142 item.className = printer.status;
143 item.printer = printer;
144 var command = new Command();
145 command.printer = printer;
146 command.disabled = (printer.status != 'online');
147 item.command = command;
148 item.innerHTML = printer.name + ' <span class="subtitle">' +
149 (printer.location || '') + '</span>';
150 }
151 PrinterMenu.appendChild(item);
152 });
153 PrinterMenu.decorate();
154 }
155
156 function pageClicked(e) {
157 if (preview.selectedItem.thumb) {
158 BigPreview.src = preview.selectedItem.thumb;
159 }
160 }
161 preview.addEventListener('change', pageClicked);
162
163 document.getElementById('cancel-button').addEventListener('click', function(){
164 chrome.windows.getCurrent(function(win) {
165 chrome.tabs.getSelected(win.id, function(obj) {
166 chrome.tabs.remove(obj.id);
167 });
168 });
169 });
170
171 /*
172 * Mock Data
173 */
174
175 var mockPages = [
176 {page: 1, thumb: 'page.png'},
177 {page: 2, thumb: 'page2.png'},
178 {page: 3},
179 {page: 4, thumb: 'page2.png'}
180 ];
181 setPages(mockPages);
182
183 var mockPrinters = [
184 {name: 'Ironhorse', location: 'MTV-1950-2', status: 'online'},
185 {name: 'acorn-color', location: 'MTV-1950-1', status: 'offline'},
186 {name: 'HP Office Jet 3600 Series With A Really Long Name Just For Testing Pur poses',
187 location: 'Mountain View, CA', status: 'offline'},
188 {},
189 {name: 'Cloud Print', status: 'online'},
190 ];
191 setPrinters(mockPrinters);
192
193 </script>
194
195 <div style="display:none" id="mock-hidden-options">
196 <hr />
197 <div class="printer-option">
198 <input type="checkbox">
199 Archive a copy to Docs
200 </div>
201 <div class="printer-option">
202 <input type="checkbox">
203 Two-sided (duplex)
204 </div>
205 <div class="printer-option">
206 <input type="checkbox">
207 Multiple Copies
208 </div>
209 <div class="printer-option">
210 <input type="checkbox">
211 Archive a copy to Docs
212 </div>
213 <div class="printer-option">
214 <input type="checkbox">
215 Two-sided (duplex)
216 </div>
217 <div class="printer-option">
218 <input type="checkbox">
219 Multiple Copies
220 </div>
221 </div>
222 <script>
223 document.getElementById('hidden-options').innerHTML =
224 document.getElementById('mock-hidden-options').innerHTML;
225 </script>
226
227 </body>
228 </html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/print_preview/print_preview.css ('k') | chrome/browser/resources/shared/css/button.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698