PageSourceSearch

https://www.kia-auto-center-weiterstadt.de/etc.clientlibs/settings…/clientlib/de/components/dealer-sdm.min.js

js kia-auto-center-weiterstadt.de collected 2026-10-07 06:40:00 UTC 21,743 bytes, 386 lines download raw bytes

1angular.module('eutTemplatesMain').run(['$templateCache', function ($templateCache) {
2  $templateCache.put("eut/clientlib/template/dealer-sdm/dealer-sdm.tpl.html",
3    "<div class=\"eut_cmly_section\">\n" +
4    "    <div class=\"eut_dealer_info\">\n" +
5    "        <div class=\"inner\" ng-class = \"{'single_view_other' : model.mapView == 'isOtherPage'}\">\n" +
6    "\n" +
7    "            <dealer-sdm-item ng-if=\"model.type === 'single1info'\"\n" +
8    "                             dealer=\"model.dealer\"\n" +
9    "                             dealer-name=\"dealer.dealerName\"\n" +
10    "                             showroom-latitude = \"model.dealer.dealerLatitude\"\n" +
11    "                             showroom-longitude = \"model.dealer.dealerLongitude\"\n" +
12    "                             service-latitude = \"\"\n" +
13    "                             service-longitude = \"\"\n" +
14    "                             model = \"model\"\n" +
15    "\n" +
16    "                             class=\"one_section\">\n" +
17    "            </dealer-sdm-item>\n" +
18    "\n" +
19    "            <dealer-sdm-item ng-if=\"model.type === 'single2map'\"\n" +
20    "                             dealer=\"model.dealer\"\n" +
21    "                             dealer-name=\"null\"\n" +
22    "                             showroom-latitude = \"model.showroomDealer.dealerLatitude\"\n" +
23    "                             showroom-longitude = \"model.showroomDealer.dealerLongitude\"\n" +
24    "                             service-latitude = \"model.repairDealer.dealerLatitude\"\n" +
25    "                             model = \"model\"\n" +
26    "                             service-longitude = \"model.repairDealer.dealerLongitude\">\n" +
27    "            </dealer-sdm-item>\n" +
28    "\n" +
29    "\n" +
30    "            <div ng-if=\"model.type === 'single2info'\">\n" +
31    "\n" +
32    "                <dealer-sdm-item ng-if=\"model.showroomDealer\" dealer=\"model.showroomDealer\"\n" +
33    "                                 dealer-name=\"model.dealer.dealerName\"\n" +
34    "                                 showroom-latitude = \"model.showroomDealer.dealerLatitude\"\n" +
35    "                                 showroom-longitude = \"model.showroomDealer.dealerLongitude\"\n" +
36    "                                 service-latitude = \"\"\n" +
37    "                                 service-longitude = \"\"\n" +
38    "                                 sub-title=\"{{'eu-sdm-dealer-showroom'|i18n}}\"\n" +
39    "                                 model = \"model\"\n" +
40    "                                 class=\"one_section\">\n" +
41    "                </dealer-sdm-item>\n" +
42    "\n" +
43    "                <dealer-sdm-item ng-if=\"model.repairDealer\" dealer=\"model.repairDealer\"\n" +
44    "                                 dealer-name=\"null\"\n" +
45    "                                 showroom-latitude = \"\"\n" +
46    "                                 showroom-longitude = \"\"\n" +
47    "                                 service-latitude = \"model.repairDealer.dealerLatitude\"\n" +
48    "                                 service-longitude = \"model.repairDealer.dealerLongitude\"\n" +
49    "                                 sub-title=\"{{'eu-sdm-service-department'|i18n}}\"\n" +
50    "                                 model = \"model\"\n" +
51    "                                 class=\"one_section\">\n" +
52    "                </dealer-sdm-item>\n" +
53    "            </div>\n" +
54    "        </div>\n" +
55    "    </div>\n" +
56    "\n" +
57    "\n" +
58    "\n" +
59    "\n" +
60    "\n" +
61    "\n" +
62    "\n" +
63    "</div>\n" +
64    "");
65}]);
66
67angular.module('eutTemplatesMain').run(['$templateCache', function ($templateCache) {
68  $templateCache.put("eut/clientlib/template/dealer-sdm/dealer-sdm-item.tpl.html",
69    "<div class=\"info_area\"> <!-- -->\n" +
70    "  <div ng-if=\"model.mapView == 'isHomePage'\">\n" +
71    "      <div class=\"left_area\">\n" +
72    "          <div class=\"dealer_contact_info\">\n" +
73    "            <h2 class=\"eut_title\" ng-if=\"dealerName\">{{dealerName}}</h2>\n" +
74    "            <div class=\"box_group\">\n" +
75    "                <div class=\"left_box\">\n" +
76    "                    <div class=\"address_box\">\n" +
77    "                        <span class=\"txt_address\">{{dealer.dealerAddress}} {{dealer.dealerAddressSub}} </span>\n" +
78    "                        <span class=\"txt_address\">{{dealer.dealerPostcode}} {{dealer.dealerResidence}}</span>\n" +
79    "                        <a ng-href=\"https://www.google.com/maps/dir//{{showroomLatitude}},{{showroomLongitude}}/@{{showroomLatitude}},{{showroomLongitude}},14z\" target=\"_blank\" class=\"eut_cmpe_btn_text\">{{'eu-sdm-get-directions'|i18n}}</a>\n" +
80    "                    </div>\n" +
81    "                    <div class=\"contact_box\">\n" +
82    "                        <ul class=\"list_contact\">\n" +
83    "                            <li ng-if=\"dealer.dealerPhone\"><span class=\"info_tel\">Tel.:</span><span><a ng-href=\"tel:{{dealer.dealerPhone}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerPhone}}</a></span></li>\n" +
84    "                            <li ng-if=\"dealer.dealerPhone1\"><span ng-class = \"{'dealer-second-number' : dealer.dealerPhone1}\" ><a ng-href=\"tel:{{dealer.dealerPhone1}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerPhone1}}</a></span></li>\n" +
85    "                            <li><span class=\"info_fax\">Fax:</span><span ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerFax}}</span></li>\n" +
86    "                            <li ng-if=\"dealer.dealerEmail\"><span class=\"info_email\">E-Mail:</span><a ng-href=\"mailto:{{dealer.dealerEmail}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerEmail}} </a>   <span>{{model.contactLabel1 ? '(' + model.contactLabel1 + ')' : ''}}</span></li>\n" +
87    "                            <li ng-if=\"dealer.dealerSecondEmail\"><a ng-class = \"{'dealer-second-email' : dealer.dealerSecondEmail}\" ng-href=\"mailto:{{dealer.dealerSecondEmail}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerSecondEmail}}</a>  <span> {{model.contactLabel2 ? '(' + model.contactLabel2 + ')' : ''}}</span></li>\n" +
88    "                            <li><span class=\"info_internet\">Internet:</span><a ng-if=\"dealer.websiteUrl\" ng-href=\"{{dealer.websiteUrl}}\" ng-click=\"ctrl.dealer_website_click(dealer);\">{{dealer.websiteUrl}}</a></li>\n" +
89    "                        </ul>\n" +
90    "                    </div>\n" +
91    "                    <div class=\"cta_box\">\n" +
92    "                        <ul class=\"cta_button\">\n" +
93    "                            <li><a ng-if= \"!model.hideCta1\" ng-href=\"{{model.ctalink1}}\"  class=\"eut_cmpe_btn small\" target=\"{{model.openInNewTab1 ? '_blank':''}}\">{{model.ctaText1}}</a></li>\n" +
94    "                            <li><a ng-if= \"!model.hideCta2\" ng-href=\"{{model.ctalink2}}\" class=\"eut_cmpe_btn small\" target=\"{{model.openInNewTab2 ? '_blank':''}}\">{{model.ctaText2}}</a></li>\n" +
95    "                            <li><a ng-if= \"!model.hideCta3\" ng-href=\"{{model.ctalink3}}\" class=\"eut_cmpe_btn small\">{{model.ctaText3}}</a></li>\n" +
96    "                        </ul>\n" +
97    "                    </div>\n" +
98    "                </div>\n" +
99    "            </div>\n" +
100    "          </div>\n" +
101    "\n" +
102    "          <div class=time_group>\n" +
103    "              <div class=\"opening_box\" ng-if=\"dealer.openingHourShowroom1 || dealer.openingHourShowroom2 || dealer.openingHourWorkshop1 || dealer.openingHourWorkshop2\">\n" +
104    "                  <em class=\"sub_title\">{{'eu-sdm-opening-hours'|i18n}} : </em>\n" +
105    "                  <div class=\"opening_hour\">\n" +
106    "                      <div class=\"showroom_time\">\n" +
107    "                              <dl class=\"time_info\" ng-if=\"dealer.openingHourShowroom1 || dealer.openingHourShowroom2\">\n" +
108    "                                  <dt>{{'eu-sdm-showroom'|i18n}}</dt>\n" +
109    "                                  <dd class=\"day_name\">{{'de-sdm-showroom-opening-hours1'|i18n}}</dd><dd ng-if=\"dealer.openingHourShowroom1\">{{dealer.openingHourShowroom1}}</dd>\n" +
110    "                                  <dd class=\"day_name\">{{'de-sdm-showroom-opening-hours2'|i18n}}</dd><dd ng-if=\"dealer.openingHourShowroom2\">{{dealer.openingHourShowroom2}}</dd>\n" +
111    "                              </dl>\n" +
112    "                      </div>\n" +
113    "                      <div class=\"workshop_time\">\n" +
114    "                              <dl class=\"time_info\" ng-if=\"dealer.openingHourWorkshop1 || dealer.openingHourWorkshop2\">\n" +
115    "                                  <dt>{{'eu-sdm-workshop'|i18n}}</dt>\n" +
116    "                                  <dd class=\"day_name\">{{'de-sdm-service-opening-hours1'|i18n}}</dd><dd ng-if=\"dealer.openingHourWorkshop1\">{{dealer.openingHourWorkshop1}}</dd>\n" +
117    "                                  <dd class=\"day_name\">{{'de-sdm-service-opening-hours2'|i18n}}</dd><dd ng-if=\"dealer.openingHourWorkshop2\">{{dealer.openingHourWorkshop2}}</dd>\n" +
118    "                              </dl>\n" +
119    "                      </div>\n" +
120    "                  </div>\n" +
121    "              </div>\n" +
122    "          </div>\n" +
123    "      </div>\n" +
124    "      <div class=\"right_area\">\n" +
125    "          <div class=\"showroom_image\">\n" +
126    "                  <img src=\"{{img.dealerImage}}\" alt=\"{{img.dealerImgAlt}}\"/>\n" +
127    "          </div>\n" +
128    "          <div class=\"dealder_map_area\">\n" +
129    "              <div class=\"showroom\" ng-if=\"showroomLatitude\">\n" +
130    "                  <a href=\"#\" class=\"img_area\" aria-label=\"{{img.imgShowroomAlt  || 'Showroom Image'}}\">\n" +
131    "                      <img src=\"{{img.imgShowroom }}\" ng-if=\"initialMap==='static'\" alt=\"{{img.imgShowroomAlt  || 'Showroom Image' }}\" ng-click=\"ctrl.showDealerShowroom()\"/>\n" +
132    "                  </a>\n" +
133    "              </div>\n" +
134    "              <div class=\"department\" ng-if=\"serviceLatitude\">\n" +
135    "                  <h3 class=\"s_title\" ng-if=\"!subTitle\">{{'eu-sdm-service-department'|i18n}}</h3>\n" +
136    "                  <a href=\"#\" class=\"img_area\">\n" +
137    "                      <img src=\"{{img.imgService}}\" ng-if=\"initialMap==='static'\" alt=\"{{img.imgServiceAlt}}\" ng-click=\"ctrl.showServiceDepartment( )\"/>\n" +
138    "                  </a>\n" +
139    "                  <a ng-href=\"https://www.google.com/maps/dir//{{serviceLatitude}},{{serviceLongitude}}/@{{serviceLatitude}},{{serviceLongitude}},14z\" target=\"_blank\" class=\"eut_cmpe_btn small light_gray\">
139{{'eu-sdm-get-directions'|i18n}}</a>\n" +
140    "              </div>\n" +
141    "          </div>\n" +
142    "      </div>\n" +
143    "  </div>\n" +
144    "  <div ng-if=\"model.mapView == 'isOtherPage'\">\n" +
145    "    <div class=\"left_area\">\n" +
146    "      <h2 class=\"eut_title\" ng-if=\"dealerName\">{{dealerName}}</h2>\n" +
147    "      <div class=\"box_group\">\n" +
148    "          <div class=\"left_box\">\n" +
149    "              <div class=\"address_box\">\n" +
150    "                <span class=\"txt_address\">{{dealer.dealerAddress}} {{dealer.dealerAddressSub}} </span>\n" +
151    "                <span class=\"txt_address\">{{dealer.dealerPostcode}} {{dealer.dealerResidence}}</span>\n" +
152    "                <a ng-href=\"https://www.google.com/maps/dir//{{showroomLatitude}},{{showroomLongitude}}/@{{showroomLatitude}},{{showroomLongitude}},14z\" target=\"_blank\" class=\"eut_cmpe_btn_text\">{{'eu-sdm-get-directions'|i18n}}</a>\n" +
153    "              </div>\n" +
154    "              <div class=\"contact_box\">\n" +
155    "                <ul class=\"list_contact\">\n" +
156    "                    <li ng-if=\"dealer.dealerPhone\"><span class=\"info_tel\"><span>Tel.:</span></span><span><a ng-href=\"tel:{{dealer.dealerPhone}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerPhone}}</a></span></li>\n" +
157    "                    <li ng-if=\"dealer.dealerPhone1\"><span ng-class = \"{'dealer-second-number' : dealer.dealerPhone1}\"><a ng-href=\"tel:{{dealer.dealerPhone1}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerPhone1}}</a></span></li>\n" +
158    "                    <li><span>Fax:</span><span ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerFax}}</span></li>\n" +
159    "                    <li ng-if=\"dealer.dealerEmail\"><span class=\"info_email\">E-Mail:</span><a ng-href=\"mailto:{{dealer.dealerEmail}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerEmail}} </a>   <span>{{model.contactLabel1 ? '(' + model.contactLabel1 + ')' : ''}}</span></li>\n" +
160    "                    <li ng-if=\"dealer.dealerSecondEmail\"><a ng-class = \"{'dealer-second-email' : dealer.dealerSecondEmail}\" ng-href=\"mailto:{{dealer.dealerSecondEmail}}\" ng-click=\"ctrl.dealer_website_click(dealer, 'contact dealer');\">{{dealer.dealerSecondEmail}}</a>  <span> {{model.contactLabel2 ? '(' + model.contactLabel2 + ')' : ''}}</span></li>\n" +
161    "                    <li><span>Internet:</span><a ng-if=\"dealer.websiteUrl\" ng-href=\"{{dealer.websiteUrl}}\" ng-click=\"ctrl.dealer_website_click(dealer);\">{{dealer.websiteUrl}}</a></li>\n" +
162    "                </ul>\n" +
163    "            </div>\n" +
164    "          </div>\n" +
165    "      </div>\n" +
166    "    </div>\n" +
167    "      <div class=\"right_area\">\n" +
168    "          <div class=\"dealder_map_area\">\n" +
169    "              <div class=\"showroom\" ng-if=\"showroomLatitude\">\n" +
170    "                  <a href=\"#\" class=\"img_area\" aria-label=\"{{img.imgShowroomAlt  || 'Showroom Image'}}\">\n" +
171    "                      <img src=\"{{img.imgShowroom}}\" ng-if=\"initialMap==='static'\" alt=\"{{img.imgShowroomAlt  || 'Showroom Image'}}\" ng-click=\"ctrl.showDealerShowroom()\"/>\n" +
172    "                  </a>\n" +
173    "              </div>\n" +
174    "              <div class=\"department\" ng-if=\"serviceLatitude\">\n" +
175    "                  <h3 class=\"s_title\" ng-if=\"!subTitle\">{{'eu-sdm-service-department'|i18n}}</h3>\n" +
176    "                  <a href=\"#\" class=\"img_area\">\n" +
177    "                      <img src=\"{{img.imgService}}\" ng-if=\"initialMap==='static'\" alt=\"{{img.imgServiceAlt}}\" ng-click=\"ctrl.showServiceDepartment( )\"/>\n" +
178    "                  </a>\n" +
179    "              </div>\n" +
180    "          </div>\n" +
181    "      </div>\n" +
182    "  </div>\n" +
183    "</div>\n" +
184    "");
185}]);
186
187/**
188 * Create a Module Dealer SDM
189 */
190
191;(function ( ng, dealerSdm ) {
192
193    dealerSdm.module = ng.module( 'dealer-sdm', [ 'eutCommonModule' ] );
194    dealerSdm.directive = {};
195    dealerSdm.service = {};
196    dealerSdm.controller = {};
197
198})( angular, eut.dealerSdm || (eut.dealerSdm={}) );
199
200
201;( function ( ng, dealerSdm, _ ) {
202
203    dealerSdm.service.dealerModel = function ( ) {
204
205        return {
206        };
207    }
208
209} )( angular, eut.dealerSdm, _  );
210
211
212;( function ( ng, _, dealerSdm ) {
213
214    /**
215     * Declaration  controoler
216     */
217    dealerSdm.controller.DealerSdm = function ( $scope ) {
218
219        this.preinitialize = preinitialize;
220        this.initialize = initialize;
221
222        function preinitialize(){
223            $scope.model = eut.dealerSdmData;
224            $scope.model.dealer = $scope.model.dealer ? $.parseJSON($scope.model.dealer): '';
225            $scope.model.showroomDealer = $scope.model.showroomDealer ? $.parseJSON($scope.model.showroomDealer) : '';
226            $scope.model.repairDealer = $scope.model.repairDealer ? $.parseJSON($scope.model.repairDealer): '';
227        }
228
229        function initialize(){
230
231        }
232
233    };
234
235} )( angular, _, eut.dealerSdm );
236
237
238;( function ( ng, _, dealerSdm, MapView ) {
239    /**
240     * Declaration  controller
241     */
242    dealerSdm.controller.DealerSdmItem = function ( $scope, $element  ) {
243
244        this.preinitialize = preinitialize;
245        this.initialize = initialize;
246        this.showDealerShowroom = showDealerShowroom;
247        this.showServiceDepartment = showServiceDepartment;
248        this.dealer_website_click = dealer_website_click;
249
250        function preinitialize(){
251            if( $scope.dealerName !== null ){
252                if( !$scope.dealerName ){
253                    $scope.dealerName = $scope.dealer.dealerName;
254                }
255            }
256            $scope.img = eut.dealerSdmData.img;
257            if($scope.dealer.dealerServiceType){
258                $scope.dealer.services = $scope.dealer.dealerServiceType.split(',');
259            }
260            $scope.isServiceDealer = eut.dealerSdmData.isServiceDealer;
261            $scope.initialMap = eut.dealerSdmData.initialMap || 'static';
262        }
263
264        function initialize(){
265          if($scope.initialMap !== 'static') {
266                setTimeout( function(){
267                    showDealerShowroom();
268                    showServiceDepartment();
269                }, 1000 );
270            }
271        }
272
273        function dealer_website_click( selectedData, modeOfContact = "visit website"){
274            if(selectedData) {
275                window.eut.gtmData = window.eut.gtmData ? window.eut.gtmData : {};
276                window.eut.gtmData.dealer_id = selectedData.dealerInternalid || selectedData.dealerExternalid;
277                window.eut.gtmData.dealer_name = selectedData.dealerName;
278                window.eut.gtmData.dealer_zip_code = selectedData.dealerPostcode;
279
280                if (window.eut?.analytics?.add) {
281                    window.eut?.analytics?.add("find_a_dealer", {
282                        form_step: modeOfContact,
283                        vehicle_nameplate: window.eut?.gtmData?.vehicle_nameplate,
284                        vehicle_id: window.eut?.gtmData?.vehicle_id,
285                        vehicle_type: window.eut?.gtmData?.vehicle_type?.length> 0? window.eut?.gtmData?.vehicle_type?.join(":"): undefined,
286                        vehicle_trim: window.eut?.gtmData?.vehicle_trim,
287                        vehicle_year: window.eut?.gtmData?.vehicle_year,
288                        dealer_id: window.eut?.gtmData?.dealer_id,
289                        dealer_name: window.eut?.gtmData?.dealer_name,
290                        click_text: window.event?.target?.innerText,
291                        zip_code: window.eut?.gtmData?.dealer_zip_code || window.eut?.common?.getLocalStorage("gtm_zip_code")
292                    });
293                }
294            }
295            if(event?.target?.closest("a")?.href)
296                window.location.href = event?.target?.closest("a")?.href
297        }
298
299        function showDealerShowroom(){
300            var mapView = new MapView( $element.find( '.showroom .img_area').get(0), { zoom:12, fitBounds:false} );
301            mapView.dataProvider( [{ dealerLatitude: $scope.showroomLatitude, dealerLongitude: $scope.showroomLongitude }] );
302            setTimeout( function(){ mapView.selectedIndex( 0 ); },10)
303        }
304
305        function showServiceDepartment(){
306            var mapView = new MapView( $element.find( '.department .img_area').get(0), { zoom:13, fitBounds:false} );
307            mapView.dataProvider( [{ dealerLatitude: $scope.serviceLatitude, dealerLongitude: $scope.serviceLongitude }] );
308            setTimeout( function(){ mapView.selectedIndex( 0 ); },10)
309        }
310    };
311
312} )( angular, _, eut.dealerSdm, eut.MapView );
313
314
315;( function ( ng, _, dealerSdm ) {
316
317    /**
318     * Declaration  Directive
319     */
320    dealerSdm.directive.dealerSdm = function ( templateManager ) {
321
322        return {
323            replace: true,
324            restrict: 'E',
325            template : templateManager.get( 'dealer-sdm', 'dealer-sdm' ),
326            controller:'DealerSdm',
327            controllerAs:'ctrl',
328            link:function ( $scope, $element, $attr, ctrl ) {
329                ctrl.preinitialize();
330                ctrl.initialize();
331            }
332        }
333    };
334
335} )( angular, _, eut.dealerSdm );
336
337
338;( function ( ng, _, dealerSdm  ) {
339    /**
340     * Declaration  Directive
341     */
342    dealerSdm.directive.dealerSdmItem = function ( templateManager ) {
343
344        return {
345            replace: true,
346            restrict: 'E',
347            template : templateManager.get( 'dealer-sdm', 'dealer-sdm-item' ),
348            scope:{
349                dealer:'=',
350                showroomLatitude:'=',
351                showroomLongitude:'=',
352                serviceLatitude:'=',
353                serviceLongitude:'=',
354                subTitle:'@',
355                dealerName:'=',
356                model:'='
357
358            },
359            controller:'DealerSdmItem',
360            controllerAs:'ctrl',
361            link: function ( $scope, $element, $attr, ctrl ) {
362                ctrl.preinitialize();
363                ctrl.initialize();
364            }
365        }
366    };
367
368} )( angular, _, eut.dealerSdm );
369/**
370 * Angular Bootstrap for Dealer SDM
371 */
372
373;(function ( ng, dealerSdm ) {
374
375    dealerSdm.module
376        .factory( 'dealerModel', dealerSdm.service.dealerModel )
377        .controller( 'DealerSdm', ['$scope', dealerSdm.controller.DealerSdm] )
378        .controller( 'DealerSdmItem', ['$scope', '$element', dealerSdm.controller.DealerSdmItem ])
379        .directive( 'dealerSdm', [ 'templateManager', dealerSdm.directive.dealerSdm ] )
380        .directive( 'dealerSdmItem', [ 'templateManager', dealerSdm.directive.dealerSdmItem ] );
381
382    ng.bootstrap( document.getElementById('dealer_sdm'),  [ dealerSdm.module.name ] );
383
384})( angular, eut.dealerSdm  );
385
386

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.