diff --git a/assets/images/design_thumb.png b/assets/images/design_thumb.png index ee730f7..34862b4 100644 Binary files a/assets/images/design_thumb.png and b/assets/images/design_thumb.png differ diff --git a/assets/images/icon-view@2x.png b/assets/images/icon-view@2x.png new file mode 100644 index 0000000..1a80d4f Binary files /dev/null and b/assets/images/icon-view@2x.png differ diff --git a/assets/images/titleicon.png b/assets/images/titleicon.png new file mode 100644 index 0000000..c5ea822 Binary files /dev/null and b/assets/images/titleicon.png differ diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 73a0263..4817c4a 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -264,18 +264,33 @@ }, ClickMenuHandler: function() { - $('.navbar-toggle').click(function(e){ + // 處理主選單切換(漢堡 icon) + $(document).on('click', '.navbar-toggle', function (e) { e.preventDefault(); + + // 確保 .navbar-toggle 放到 .modules-menu 後面 + $('.mobile-menu').each(function () { + var $menu = $(this); + if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) { + $menu.find('.modules-menu').after($menu.find('.navbar-toggle')); + } + }); + $('.mobile-menu').toggleClass('active'); $('body').toggleClass('noscroll'); - $('.mobile-menu .navbar-toggle').removeClass('collapsed'); - // $menu.slideToggle(); - $('.mobile-menu1 > ul').slideUp(500); - $('.mobile-menu1 > .menu-drop').removeClass('opened'); - $('.mobile-menu2 > ul').slideUp(500); - $('.mobile-menu2 > .menu-drop').removeClass('opened'); - }) + + // 關閉所有下拉選單 + $('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500); + $('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened'); + + // 無障礙:聚焦第一個互動元素 + if ($('.mobile-menu').hasClass('active')) { + setTimeout(function () { + $('.modules-menu').find('input, button, select, textarea, a').first().focus(); + }, 100); + } + }); $('.mobile-menu1 > .menu-drop').click(function(){ var $that = $(this); @@ -384,6 +399,113 @@ // $('.header-buttom').appendTo($('.dropdowns')); // } function forFreeGo() { + //表單legend + $("fieldset").each(function () { + const $fieldset = $(this); + const hasLegend = $fieldset.children("legend").length > 0; + + if (!hasLegend) { + // 嘗試抓最上層的群組標題,例如 "Apply" + const headingText = $fieldset.find(".form-group:first").text().trim() || "表單填寫"; + + // 插入 legend 為第一個元素 + $fieldset.prepend(`${headingText}`); + } + }); + + // 處理「上一頁」按鈕 + $(".cmdBackward").each(function () { + $(this) + .attr("title", "上一頁") + .attr("aria-label", "上一頁"); + + if ($(this).find(".sr-only").length === 0) { + $(this).append('上一頁'); + } + + $(this).find("i").attr("aria-hidden", "true"); + $(this).find(".icon").attr("aria-hidden", "true"); + }); + + // 處理「下一頁」按鈕 + $(".cmdForward").each(function () { + $(this) + .attr("title", "下一頁") + .attr("aria-label", "下一頁"); + + if ($(this).find(".sr-only").length === 0) { + $(this).append('下一頁'); + } + + $(this).find("i").attr("aria-hidden", "true"); + $(this).find(".icon").attr("aria-hidden", "true"); + }); + + $('.pagination li.active a').attr('aria-current', 'page'); + + $('path').each(function () { + $(this) + .attr('aria-hidden', 'true') + .attr('focusable', 'false') + .attr('tabindex', '-1'); + }); + + $('.controlplay a[role="radio"]').on('click', function () { + // 取消所有的 aria-checked 並還原文字 + $('.controlplay a[role="radio"]').attr('aria-checked', 'false'); + $('.controlplay a[role="radio"] span').each(function () { + var text = $(this).text().replace('(已選取)', ''); + $(this).text(text); + }); + + // 設定目前被點擊的按鈕為已選取 + $(this).attr('aria-checked', 'true'); + var selectedText = $(this).text().trim(); + $(this).find('span').text(selectedText + '(已選取)'); + }); + // 遍历所有的 .s-annc__tag-wrap 元素 + $('.s-annc__tag-wrap').each(function() { + // 遍历 .s-annc__tag-wrap 下的每个 a 元素 + $(this).find('a').each(function() { + // 如果 .s-annc__tag 元素为空或没有内容 + if ($(this).find('.s-annc__tag').is(':empty')) { + // 移除该 a 元素 + $(this).remove(); + } + }); + }); + + $('.w-ba-banner__caption li button').each(function (index) { + const $slide = $('.w-ba-banner__slide').eq(index); + const title = $slide.attr('data-cycle-title')?.trim(); + + if (title) { + const fullText = title + '的pager'; + $(this).attr('aria-label', fullText); + $(this).attr('title', fullText); + } + }); + // 當 focus 到 menu link 時,顯示對應 ul + $('.sitemenu-item > a').on('focus', function () { + $(this).siblings('ul').addClass('show'); + }); + + // 當 focus 離開最後一個子選單 link 時,移除 .show + $('.sitemenu-item').each(function () { + const $submenuLinks = $(this).find('ul a'); + + if ($submenuLinks.length > 0) { + $submenuLinks.last().on('blur', function () { + // 當最後一個子項 blur 時關閉 ul + $(this).closest('ul').removeClass('show'); + }); + } else { + // 若沒有子項,當主選單項 blur 也隱藏 + $(this).find('> a').on('blur', function () { + $(this).siblings('ul').removeClass('show'); + }); + } + }); if (document.documentElement.lang === 'zh_tw') { document.documentElement.lang = 'zh-Hant'; } @@ -465,6 +587,18 @@ $(this).css("font-size", emValue + "em"); } }); + $("[style*='font-size']").each(function() { + var styleAttr = $(this).attr("style"); // 取得原始 style 屬性字串 + var match = styleAttr.match(/font-size\s*:\s*(\d+(?:\.\d+)?)pt/i); + if (match) { + var ptValue = parseFloat(match[1]); + var emValue = ptValue / 12; + // 替換 style 屬性字串中的 pt 為 em + var newStyle = styleAttr.replace(/font-size\s*:\s*\d+(?:\.\d+)?pt/i, `font-size: ${emValue}em`); + $(this).attr("style", newStyle); + } + }); + //表格scope $("table").each(function() { $(this).find("tr").each(function(rowIndex) { $(this).find("th").each(function(colIndex) { @@ -502,6 +636,18 @@ $this.attr('title', '這是一張圖片'); } }); + $('img').each(function() { + var $this = $(this); + + // 檢查 img 的 alt 屬性是否為 "裝飾圖片" + if ($this.attr('alt') === "裝飾圖片" || $this.attr('title') === "裝飾圖片") { + // 設定 alt 為空字串 + $this.attr('alt', ''); + + // 移除 title 屬性 + $this.removeAttr('title'); + } + }); $(".w-annc__img-wrap a").each(function () { var $this = $(this); // 確保 內沒有文字節點 (避免重複添加) @@ -561,106 +707,93 @@ $button.attr('aria-label', '播放驗證碼語音'); } }); - // 幫有連結目的之所有a標籤加上aria-label - $('a').each(function() { - var $this = $(this); + //有連結目的之所有a標籤加上aria-label和title + $('a').each(function () { + var $a = $(this); + var href = $a.attr('href'); + if (!href) return; - // 如果 已經有 aria-label,則跳過 - if ($this.attr('aria-label')) return; + var hasSrOnly = $a.find('.sr-only').length > 0; - var href = $this.attr('href'); - if (!href) return; // 如果沒有 href,則跳過 + // 若有 .sr-only,移除 aria-label 和 title 避免重複朗讀 + if (hasSrOnly) { + $a.removeAttr('aria-label'); + $a.removeAttr('title'); + return; // 有 .sr-only 就不做其他處理 + } - var ariaLabel = ""; + // ----- aria-label 邏輯 ----- + if (!$a.attr('aria-label')) { + let ariaLabel = ''; - // 加入開啟方式 - if ($this.attr('target') === '_self') { - ariaLabel += '在本視窗開啟 '; - } else if ($this.attr('target') === '_blank') { + // 加入開啟方式 + if ($a.attr('target') === '_blank') { ariaLabel += '在新視窗開啟 '; + } else if ($a.attr('target') === '_self') { + ariaLabel += '在本視窗開啟 '; + } + + // 如果包含圖片且有圖片 title + if ($a.find('img').length) { + const imgTitle = $a.find('img').attr('title'); + if (imgTitle) ariaLabel = imgTitle; + } else { + const text = $a.text().trim(); + if (text) { + ariaLabel += text; + } else if ($a.children('span').length === 1) { + ariaLabel += $a.children('span').text().trim(); + } + } + + if (ariaLabel) { + $a.attr('aria-label', ariaLabel); + } } - // 取得 的文字內容 - var linkText = $this.text().trim(); - if (linkText) { - ariaLabel += linkText; - } else if ($this.children('span').length === 1) { - ariaLabel += $this.children('span').text().trim(); - } - // 如果包含 圖示,標示為 icon - if ($this.find('i').length) { - ariaLabel = "這是 icon"; - } + // ----- title 邏輯 ----- + if (!$a.attr('title')) { + let titleStr = ''; - // 如果是圖片連結,標示為照片 - if ($this.find('img').length) { - ariaLabel = "這是一張照片"; - } + if ($a.attr('target') === '_blank') { + titleStr += '在新視窗開啟 '; + } else if ($a.attr('target') === '_self') { + titleStr += '在本視窗開啟 '; + } - // 設定 aria-label - if (ariaLabel) { - $this.attr('aria-label', ariaLabel); - } - }); + if ($a.find('img').length) { + titleStr = '這是一張照片'; + } else { + const text = $a.text().trim(); + if (text) { + titleStr += text; + } else if ($a.children('span').length === 1) { + titleStr += $a.children('span').text().trim(); + } + } - // 幫有連結目的之所有a標籤加上title - $('a').each(function() { - var $this = $(this); - var href = $this.attr('href'); - if (!href) return; // 沒有 href 就跳過 - // 如果 已經有 title 屬性,則不進行修改 - if ($this.attr('title')) return; - var titlestr = ""; - // 加入開啟方式 - if ($this.attr('target') == '_self') { - titlestr += '在本視窗開啟 '; - } else if ($this.attr('target') == '_blank') { - titlestr += '在新視窗開啟 '; + if (titleStr) { + $a.attr('title', titleStr); + } } - // 決定 title 內容 - var linkText = $this.text().trim(); - if (linkText) { - titlestr += linkText; - } else if ($this.children('span').length == 1) { - titlestr += $this.children('span').text().trim(); - } - // 如果是圖片連結,標示為照片 - if ($this.find('img').length) { - titlestr = "這是一張照片"; - } - // 設定 title - if (titlestr) { - $this.attr('title', titlestr); - } - }); + }); + $('a').each(function () { + const $link = $(this); + const linkText = $link.text().trim(); - // for(var i=0;i<$('a').length;i++){ - // if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){ - // var titlestr=""; - // if($('a').eq(i).attr('target')=='_self') - // titlestr += '在本視窗開啟 '; - // else if($('a').eq(i).attr('target') == '_blank') - // titlestr += '在新視窗開啟 '; - // if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('span').length==1) - // titlestr += $('a').eq(i).find('>span').html().trim(); - // else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){ - // try{ - // if($('a').eq(i).html().trim().split('>').length==2) - // titlestr += $('a').eq(i).html().trim().split('>')[1].trim(); - // else if($('a').eq(i).html().trim().split('>').length==3) - // titlestr += $('a').eq(i).html().trim().split('>')[2].trim(); - // }catch(e){}; - // } - // else - // titlestr += $('a').eq(i).attr('title'); - // if(titlestr.search(' + $(".fnav-item a").each(function () { + const $a = $(this); + + // 如果內部已經有 .sr-only,就略過 + if ($a.find(".sr-only").length > 0) return; + + // 嘗試從 title 擷取語意文字 + let label = $a.attr("title") || ""; + + // 如果還是空字串,再嘗試用 i 的 title + if (!label.trim()) { + const iconTitle = $a.find("i").attr("title"); + if (iconTitle) label = iconTitle; + } + + // 如果真的都沒有語意,預設一個 generic label(也可加入 warning log) + if (!label.trim()) { + label = "操作按鈕"; + } + + // 加上 title 和 aria-label + $a.attr("title", label).attr("aria-label", label); + + // 加上 sr-only 輔助文字 + $a.append(`${label}`); + + // 確保 icon 不被閱讀器讀取 + $a.find("i").attr("aria-hidden", "true"); + $a.find(".icon").attr("aria-hidden", "true"); + }); +}); + +//video js $(document).ready(function () { if ($(".main-content .video_detail").length > 0) { $('.videopagenone').css("display","none"); @@ -831,7 +1000,7 @@ $(document).ready(function () { $(this).html(decodedHtml); // 設置為真正的 HTML }); $(".video_group_time").each(function () { - var $this = $(this); // 當前 .video_group_time + var $this = $(this); // 找到對應的 ,並移動到 .video_group_time 內部 var $q = $this.closest(".imglst_desc").find(".movie_desc q"); if ($q.length) { @@ -895,22 +1064,8 @@ $(document).ready(function () { clearInterval(interval); } }, 1000); - }); - - // 當文件物件模型(DOM)載入後,執行init函數 - $(document).ready(function() { - // 綁定滑動事件 - $(".cycle-slideshow").swipe({ - swipeLeft: function () { - $(this).cycle("next"); // 向左滑動,切換到下一張 - }, - swipeRight: function () { - $(this).cycle("prev"); // 向右滑動,切換到上一張 - }, - threshold: 50, // 滑動靈敏度(數值越小越敏感) - }); - //改變日期格式 - $(".video_group_time").each(function () { + //改變日期格式 + $(".video_group_time").each(function () { var $this = $(this); var originalText = $this.text().trim(); // 把 YYYY-MM-DD 轉換成 M月D日 @@ -922,6 +1077,87 @@ $(document).ready(function () { // 更新內容並加上 $this.html(formattedText).append($q); }); + +}); + +$(document).ready(function () { + $('.rucaptcha-image').removeAttr('onload'); + + // 檢查是否已插入過 + if (!$('#captcha_audio').length) { + const audioButton = $(` + + `); + + const audio = $(''); + + $('.rucaptcha-image').after(audioButton, audio); + } +}); + +//萬用表格searchbtn2 +$(document).ready(function () { + $('.searchbtn2').click(function (event) { + event.preventDefault(); // 防止預設行為 + $(".searchbox").slideToggle(300, function () { + updateAriaExpanded(); + }); + $(this).closest('.ken-click').toggleClass('ken-click2'); + }); + + let triggeredByFocus = false; + + function updateAriaExpanded() { + const isVisible = $(".searchbox").is(":visible"); + $(".searchbtn2").attr("aria-expanded", isVisible ? "true" : "false"); + } + + // 預設 aria-expanded 為 false + $(".searchbtn2").attr("aria-expanded", "false"); +}); + +// 當文件物件模型(DOM)載入後,執行init函數 +$(document).ready(function() { + $('a').each(function () { + const $a = $(this); + + // 有圖示或圖片就不刪 + if ($a.find('i, img').length > 0) return; + + // 沒有任何實際文字內容(去除空白) + const hasVisibleText = $a.text().trim().length > 0; + + // 進一步判斷 span 內部是否完全為空 + const allChildrenEmpty = $a.children().length > 0 && $a.children().toArray().every(child => { + return $(child).text().trim().length === 0; + }); + + // 如果沒有文字內容且子元素全為空,則移除 + if (!hasVisibleText && allChildrenEmpty) { + $a.remove(); + } + }); + $('.i-member-pic-wrap a').removeAttr('target'); + function markCheckStatusButton() { + $('.ask-question').each(function () { + var $prev = $(this).prev(); // 取得前一個元素 + + // 如果前一個元素是 且 class 包含 "btn" + if ($prev.is('a') && $prev.hasClass('btn')) { + $prev.addClass('CheckStatus'); // 加上 class + } + }); + }; + markCheckStatusButton(); //常用到的js // $('.').after($('.')); // $('.').before($('.')); @@ -929,6 +1165,19 @@ $(document).ready(function () { // if($('.show-announcement').hasClass('show-announcement')) { // $('.').css('', ''); // } + + // 綁定滑動事件 + $(".cycle-slideshow").swipe({ + swipeLeft: function () { + $(this).cycle("next"); + }, + swipeRight: function () { + $(this).cycle("prev"); + }, + threshold: 50, // 滑動靈敏度(數值越小越敏感) + }); + + $('#check_history_form input[type="submit"][value="Check History"]').addClass('CheckHistory'); $(".mybooking").append(''); //內頁dattpp移位 $('.i-annc__page-title').after($('.sitemenu-wrap2')); @@ -937,12 +1186,9 @@ $(document).ready(function () { $('.box-social-share').before($('.sitemenu-wrap3')); $('.box-social-share').before($('.sitemenu-wrap3')); $('.box-social-share').before($('.sitemenu-wrap3')); - $(".member-data2-tr").before($(".show-member .table-striped > tbody > tr:nth-of-type(4)")); $(".nav-pills").before($(".show-member .table-striped > tbody > tr:last-child")); - - //檔案室手風琴 $('.panel-title>.collapsed').click(function(){ $(this).find('.fa').toggleClass("fa-chevron-down"); @@ -994,11 +1240,6 @@ $(document).ready(function () { }else{ $('.outdropdowns').before($('.header-nav')); }; - // - $(".ken-click").click(function(){ - $(".searchbox").slideToggle(300); - $('.ken-click').toggleClass('ken-click2'); - }); $('.sitemenu-vertical .sitemenu-dropdown-toggle').click(function(){ $('.sitemenu-vertical .dropdown-menu').slideToggle(); $(".sitemenu-vertical .sitemenu-dropdown-toggle").toggleClass("fa-caret-down"); @@ -1019,7 +1260,6 @@ $(document).ready(function () { $('.list-unstyled>li:nth-child(n+5)').slideToggle(); $(".morebken .fa-chevron-down").toggleClass("rotate"); $(".openmorebken").toggleClass("closemorebken"); - }); //RWD 自動縮放headerbannner function headerH() { @@ -1093,91 +1333,172 @@ $(document).ready(function () { // $('.outdropdowns').removeClass('navFixed'); /* 移除選單固定效果 */ // } // }); - $('.navbar-brand h2').replaceWith(function() { - return $("

", { - class: this.className, - html: $(this).html() - }); - }); + // $('.navbar-brand h2').replaceWith(function() { + // return $("

", { + // class: this.className, + // html: $(this).html() + // }); + // }); $('#search'). attr('title', '另開新視窗'); - $(window).scroll(function() { - var windowBottom = $(window).scrollTop() + $(window).innerHeight(); - $('.hide0').each(function() { - var mid = $(this).offset().top + $(this).height()/2; - if( mid < windowBottom && mid > $(window).scrollTop()){ - $(this).addClass('animationvisible') - } else { - $(this).removeClass('animationvisible') - } - }) - $('.hide1').each(function() { - var mid = $(this).offset().top + $(this).height()/2; - if( mid < windowBottom && mid > $(window).scrollTop()){ - $(this).addClass('animationvisible1') - } else { - $(this).removeClass('animationvisible1') - } - }) - $('.hide2').each(function() { - var mid = $(this).offset().top + $(this).height()/2; - if( mid < windowBottom && mid > $(window).scrollTop()){ - $(this).addClass('animationvisible2') - } else { - $(this).removeClass('animationvisible2') - } - }) - $('.hide3').each(function() { - var mid = $(this).offset().top + $(this).height()/2; - if( mid < windowBottom && mid > $(window).scrollTop()){ - $(this).addClass('animationvisible3') - } else { - $(this).removeClass('animationvisible3') - } - }) - $('.rotate0').each(function() { - var mid = $(this).offset().top + $(this).height()/2; - if( mid < windowBottom && mid > $(window).scrollTop()){ - $(this).addClass('animationrotate0') - } else { - $(this).removeClass('animationrotate0') - } - }) - $('.zoomin').each(function() { - var mid = $(this).offset().top + $(this).height()/2; - if( mid < windowBottom && mid > $(window).scrollTop()){ - $(this).addClass('animationvisible5') - } else { - $(this).removeClass('animationvisible5') - } - }) - }) + $(window).scroll(function () { + var windowTop = $(window).scrollTop(); + var windowBottom = windowTop + $(window).innerHeight(); + + function handleAnimationOnce(selector, animationClass, offsetRatio = 0.5) { + $(selector).each(function () { + var elementTop = $(this).offset().top; + var elementHeight = $(this).height(); + var triggerPoint = elementTop + elementHeight * offsetRatio; + + if ( + triggerPoint >= windowTop && + triggerPoint <= windowBottom && + !$(this).hasClass(animationClass) + ) { + $(this).addClass(animationClass); + } + }); + } + + handleAnimationOnce('.hide0', 'animationvisible', 0.1); + handleAnimationOnce('.hide1', 'animationvisible1', 0.5); + handleAnimationOnce('.hide2', 'animationvisible2', 0.5); + handleAnimationOnce('.hide3', 'animationvisible3', 0.5); + handleAnimationOnce('.rotate0', 'animationrotate0', 0.5); + handleAnimationOnce('.zoomin', 'animationvisible5', 0.5); + }); + init(); +}); + +//orbitbar無障礙js +$(document).ready(function() { + const isEnglish = document.documentElement.lang === 'en'; + + if (isEnglish) { + $('.navbar-toggle').attr({ + title: 'menu', + 'aria-label': 'menu' + }); + $('label[for="open-orbit-nav"]').attr({ + title: 'Site search and language menu', + 'aria-label': 'Site search and language menu' + }); + $('.mobile-button').attr({ + title: 'Language menu', + 'aria-label': 'Language menu' + }); + } else { + $('label[for="open-orbit-nav"]').attr({ + title: '全站収尋及語言切換選單', + 'aria-label': '全站収尋及語言切換選單' + }); + $('.mobile-button').attr({ + title: '語言切換選單', + 'aria-label': '語言切換選單' + }); + } + + + $('label[for="open-orbit-login"]').removeAttr('tabindex'); + $('#orbit-bar').find('li').each(function() { + var $li = $(this); + + // 如果
  • 中没有 元素,则为
  • 设置 tabindex="0" + if ($li.children('a').length === 0) { + $li.attr('tabindex', '0'); + } else { + // 如果
  • 中有 元素,则确保 有 tabindex="0" + $li.find('a').attr('tabindex', '0'); + + // 确保
  • 不影响焦点管理,移除
  • 的 tabindex + $li.removeAttr('tabindex'); + + // 如果
  • 被聚焦,自动跳转到 元素 + $li.on('focus', function() { + $(this).find('a').focus(); + }); + } }); + $('label[for="open-orbit-nav"]').attr('tabindex', '0'); + // 当屏幕宽度小于 768px 时,将 .orbit-bar-search-sign-language 移动到
  • diff --git a/modules/web_resource/_web_res_widget9.html.erb b/modules/web_resource/_web_res_widget9.html.erb new file mode 100644 index 0000000..54e493f --- /dev/null +++ b/modules/web_resource/_web_res_widget9.html.erb @@ -0,0 +1,40 @@ + + diff --git a/modules/web_resource/info.json b/modules/web_resource/info.json index 7e6be90..2a78ff7 100644 --- a/modules/web_resource/info.json +++ b/modules/web_resource/info.json @@ -29,8 +29,8 @@ { "filename" : "web_res_widget2", "name" : { - "zh_tw" : "2. 橫式列表 ( 模組標題, 連結 )", - "en" : "2. Horizontal List (widget-title, link)" + "zh_tw" : "2. 收合橫式列表 ( 模組標題, 連結 )", + "en" : "2.close & open-Horizontal List (widget-title, link)" }, "thumbnail" : "web_res_widget2_thumb.png" }, @@ -81,6 +81,14 @@ "en" : "8. Horizontal List (widget-title, link)" }, "thumbnail" : "web_res_widget8_thumb.png" + }, + { + "filename" : "web_res_widget9", + "name" : { + "zh_tw" : "9. 純文字圓形橫式列表 ( 模組標題, 連結 )", + "en" : "9. txt only-Circle-Horizontal List (widget-title, link)" + }, + "thumbnail" : "web_res_widget1_thumb.png" } ] }