Enumeration から Stream にする。
java.util.Collections の list を使って、Stream にする。
Collections.list(getRequest().getParameterNames()).stream().forEach(key->{
});
こんな感じ。。。
Wicket ModalWindow full screen
Wicket ModalWindow full screen と言うと、ちょっと言い過ぎだけど、つまりブラウザで開いたページ表示一杯の
幅、高さで ModalWindow しかも caption なしの ModalWindow に見えない ModalWindow を出したくなった。
昔、captionが無い～フレーム枠が存在しないModalWindow を出したことがある。
ドラッグさせないWicketのModalWindow - Oboe吹きプログラマの黙示録
これをヒントに、更なる展開としてModalWindow に見えないPageの上を別のPageで重ねたように表示する Panel で
CLOSEボタンを配置して元のページに戻ったときに Panel で入力した情報を受け取るのが目的です。
Page遷移させたくないのです。
PageのHTML bodyタグの直下に ModalWindow する div を置きます。
<body> <div wicket:id="modal"></div> <a wicket:id="test" href="#">open</a>
Panel は、必ず CLOSE する為のボタンを置きます。
<wicket:panel> <form wicket:id="form"> <button wicket:id="close" type="button">CLOSE</button> </form> </wicket:panel>
Page の Java
ModalWindow window = new ModalWindow("modal");
queue(window);
queue(AjaxLink.onClick("test", t->{
window.setContent(new ModalPanel(window.getContentId()));
window.show(t);
}));Panel
queue(new Form<Void>("form"));
queue(AjaxButton.onSubmit("close", (b, t)->ModalWindow.closeCurrent(t)));問題は、CSS です。wicket-modal クラスでとにかく、position 指定でフル表示を指定し、
wicket-mask-dark ： 背景表示を強制的に display : none
モーダルのコンテンツの高さを 100％ と指定したいところですが、そうでなくて、
最近導入された、CSS3 の Viewports units で画面高さの比率で指定します。height: 100vh とすると
どうしても Wicket が生成する Modal コンテンツ枠が僅かに引っ掛かってブラウザにスクロールバーが
生じてしまいます。
.wicket-modal{ top: 0 !important; left: 0px !important; width: 100% !important; height: 100% !important; position: absolute !important; visibility: visible !important; } .w_caption, div.w_top_1, div.w_topLeft, div.w_topRight, div.w_bottom_1{ display: none; } .wicket-mask-dark{ display: none !important; } div.w_left, div.w_right , div.wicket-modal div.w_content_1 , div.wicket-modal div.w_right_1 , div.wicket-modal div.w_left_1 , div.w_content_1, div.w_content_2, div.w_content_3, div.w_window_3 { margin: 0; background-image: none; _background-image: none; border: none: display: none; height: 99vh; !important; }
だから、99vh にします。それでもわずかに線が出るのですが、ここまでできれば良しとします。
window.close() の実行
JavaScript で開いている自身のページのブラウザWindow は、セキュリティのために閉じられないように
なっているが、aタグ target="_blank" 開いた先での window.close() は効いてくる。
結構昔から、いろんなことが試されていた。
stackoverflow.com
jQuery UI の datepicker trigger を画像でなくてフォントアイコンで指定
jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。
https://jqueryui.com/datepicker/#icon-trigger
にあるようなカレンダーアイコンをクリックで呼び出すもの。これより入力フィールドをクリック、focusされた時に呼び出すのでわざわざアイコンがあるのが
釈然としない。
jqueryui.com サイトにあるサンプルは、アイコン画像も gif でありこのように画像サイズを気にしながら準備するのも煩わしい。
このアイコンをＧＩＦでなくて、フォントアイコンで描画させてサイズ調整しても描画が乱れないようにできないだろうかと考えて試してみる。
まず。jQuery UI datepicker のデモページに書いてあるコードは
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});と書いてあって、これで input タグの後ろに自動的に次の img タグが描画される。
<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="Select date" title="Select date">
この img タグ生成させる代わりに、buttonタグ生成にさせたい。そこで、buttonImage と buttonImageOnly を指定しないようにする。
$( "#datepicker" ).datepicker({
prevText:"前月", nextText:"翌月",
changeMonth: true, monthNamesShort: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
showOn: "button",
buttonText: "Select date"
});この段階で、
ということになる。
フォントアイコンとして、Fontello - icon fonts generator から必要なフォントファイルをダウンロードして
次のように CSS を用意する。
@font-face{ font-family: 'fontello'; src: url('../../fontello/font/fontello.eot'); src: url('../../fontello/font/fontello.eot#iefix') format('embedded-opentype'), url('../../fontello/font/fontello.woff') format('woff'), url('../../fontello/font/fontello.ttf') format('truetype'), url('../../fontello/font/fontello.svg#fontello') format('svg'); font-weight: normal; font-style: normal; } .ui-datepicker-trigger{ font-family: "fontello"; font-style: normal; font-weight: normal; font-size: 16[f:id:posturan:20170415184856j:plain]px; display: inline-block; text-decoration: inherit; cursor: pointer; color: #3456ff; }
そして、datepicker設定の buttonText は、fontello の約束ではタグＢＯＤＹに書くコードでアイコンを指定するので、
$(function(){
$("#date").datepicker({
prevText:"前月", nextText:"翌月",
changeMonth: true, monthNamesShort: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
showOn: "button",
buttonText: ""
}).datepicker("setDate", moment().format('YYYY/MM/DD'));
});すると buttonタグとしてフォントアイコン埋め込みのボタンになる。 ( HTML-BODY に背景色指定 ）
このままでもいいけど、どうせならボタンとしての形状でなくて、アイコン画像としてフラットな描画にしたいので、CSSで以下のように追加する
.ui-datepicker-trigger{ font-family: "fontello"; font-style: normal; font-weight: normal; font-size: 16px; display: inline-block; text-decoration: inherit; cursor: pointer; color: #3456ff; /* 追加 */ background-color: rgba(0,0,0,0); border: none; }
background-color と border を指定しなおしてしまう。透過させたいので、rgba で指定する。
このようになる。
moment.js でリアルタイムに日付時刻を表示
moment.js でリアルタイムに日付時刻を表示する。
jQuery と moment-with-locales.js を使う。
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/moment-with-locales.js"></script>
<div> <h1 id="date"></h1> <h2 id="hour_min_sec"></h2> </div>
自分で clock関数、１秒間隔実行を用意して実行する。
$(function(){
moment.updateLocale("ja",
{ weekdays: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
weekdaysShort: ["日","月","火","水","木","金","土"], }
);
var clock = function(){
var m = moment();
setTimeout(clock, 1000);
/* 表示。極力他の処理をやらない */
$('#date').html(m.format("YYYY年 M月 D日 (ddd)")),
$('#hour_min_sec').html(m.format("HH:mm:ss"));
}
clock();
});ミリ秒、マイクロ秒の単位まで精度を求めないならこれで充分。
moment.js で曜日出力に注意
２年近く前に知ってから愛用している moment.js 曜日を出力しようと思って、
各国語対応の moment-with-locales.js を使ったら フォーマット dddd または、ddd を使ったら曜日が日本語で出力されない。
あれ、そうだっけ？！
しかたなく、moment-with-locales.js 利用のまま、、moment.js の locale 関数を呼ぶことにしたら、ちゃんと曜日が出るものの、
chrome のコンソールをチェックすると、
Deprecation warning: use moment.updateLocale(localeName, config) to change an existing locale. moment.defineLocale(localeName, config) should only be used for creating a new locale See http://momentjs.com/guides/#/warnings/define-locale/ for more info.
ネットで検索してたら、、
github.com
なんだと！ locale 関数じゃなくて、結局、updateLocale 関数を呼ぶのか！！
moment-with-locales.js 利用では、
moment.locale("ja",
{ weekdays: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
weekdaysShort: ["日","月","火","水","木","金","土"], }
);でなくて、、
moment.updateLocale("ja",
{ weekdays: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
weekdaysShort: ["日","月","火","水","木","金","土"], }
);moment.min.js を利用するなら、locale関数、
もっとも、moment-with-locales.js を使わずに、moment.min.js と、
https://github.com/moment/moment
ここから、locale にある ja.js を使用することにすれば、locale 関数も updatelocale関数も呼ばなくて済む。
ＣＤＮからの取得で書くと
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
だけどダウンロードして自分ところで抱えて使う。
(1) moment-with-locales.js を使う場合
自分のコードで moment updateLocale関数を実行
(2) moment.min.js を使う場合
自分のコードで moment locale関数を実行
(3) moment.min.js と ja.js を使う場合
locale 関数等は呼ばない。
(1) のmoment-with-locales.js をよく使ってたから、updateLocale関数呼出しが面倒でも
これが良いのか？
たった曜日のために。。悩ましい。
