Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

デフォルトスキンの画像ポップアップに関する改善 #354

Merged
merged 5 commits into from
Feb 18, 2016
Merged

デフォルトスキンの画像ポップアップに関する改善 #354

merged 5 commits into from
Feb 18, 2016

Conversation

masal64
Copy link
Contributor

@masal64 masal64 commented Jan 7, 2016

2ch.netのchaikaスレに、デフォルトスキンの画像ポップアップに関する改善提案が来ていたので、
このパッチを元に、さらに自分でいろいろ改善してみたものです。
http://potato.2ch.net/test/read.cgi/software/1434991857/668

主な改善点は、

  • 画像ポップアップの初期サイズをオプションから設定できるようにした
  • 画像ポップアップをクリック拡大したとき、ウィンドウサイズを超えないようにするオプションを追加
  • 画像ポップアップをクリックしたときポップアップの位置を補正するようにした
  • ポップアップの位置補正動作に関する改善(スクロールバーを避けるなど)

ひととおりテスト済みです。画像ポップアップの使い勝手は相当改善されていると思います。

画像ポップアップの初期サイズをオプションから設定できるようにした(デフォルト横200px)
画像ポップアップをクリックして拡大したとき、表示サイズがウィンドウサイズを
超えないようにするオプションを追加(デフォルトON)
画像ポップアップをクリックしたときポップアップの位置を補正するようにした

CSS の vertical-align:bottom はポップアップ画像の直下に隙間が空く現象を修整するもの
ウィンドウ領域の下端近くにある画像URLを下方向へポップアップ表示したとき、
画像ポップアップの下側がウィンドウ領域の外に出たままになってしまうことがあるので
「画像拡大時にウィンドウサイズを超えないようにする」がOFFのときに、
巨大な画像のポップアップをクリックして拡大表示にした時にこういう状況になりえます。
こうする理由の1つは、left,top の値が負になってしまうと負の領域へはスクロールが不可能なこと。
もう1つは、初期状態で左上部分を表示するのがこのような状況では一般的であって、
ユーザーもそのような動作を想定しているであろうこと。
ポップアップの右端・下端がスクロールバーの裏に隠れることがあるのを改善するため。
もう1つは、ポップアップを上方向に表示する設定で、ウィンドウに横スクロールバーが出ているとき、
ポップアップの表示位置が十数px(スクロールバーの幅相当)だけ上にずれる現象を改善するため。
bottom のオフセット計算の基準は、スクロールバーを含まない領域ということらしいです。

ローカル変数の名前も clientWidth とかに変えた方が良いのかもしれない。
スクロール位置も、初期包含要素を基準にオフセットを計算するという意味から考えて、
document.documentElement.scrollTop などから取るべきなのかもしれない。
@nodaguti
Copy link
Contributor

マージが遅くなってしまってすみません.
改善ありがとうございます!

nodaguti added a commit that referenced this pull request Feb 18, 2016
デフォルトスキンの画像ポップアップに関する改善
@nodaguti nodaguti merged commit c1b88ab into chaika:develop Feb 18, 2016
@masal64 masal64 deleted the defskin-imgpop branch February 18, 2016 10:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants